发表于: 2017-03-24 22:05:50

1 632


今天完成的事情:上午将任务15的第三张网页代码编写完成,然后进行了调整,修改了导航栏在小分辨率下出现横向滚动条的问题,反复调整主体内容部分的图片和文字同行显示,不能出现自动换行的效果,这个花费了不少时间。下午把隐藏的内容如何展示出来的动画效果换了一下,感觉css3的动画属性很值得去花时间研究一下!然后提取了部分可以公用的东西,相当于组件的雏形了吧,间接完成任务14,比如顶部和底部导航栏的三列布局,css实现轮播图的代码,栅格系统,一点导航栏的属性设置等。晚上修改任务8,并进行了提交。

明天计划的事情:开始js部分的学习,明天打算先看任务要求,再看书。

遇到的问题:

 第一个,是关于这两天做任务15时遇到的关于栅格系统内嵌套的div是标准盒子模型而不是bootstrap中类似IE盒子模型的显示效果的问题的解决,下午因为改写隐藏部分弹出的动画效果,查看了CSS3的教程,无意中看到了box-sizing这个属性,嗯,就是它,用它就可以使盒子的宽度包括边框和内边距还有内容主体三部分。

 第二个是关于图片和文字同行显示的问题,对文字部分设置的宽度不是在所有分辨率下都能达到使文字和图片同行显示的问题,所以也是很费力的事情,用媒体查询一遍遍使用开发工具在浏览器中调整,期间也修改了一下图片的显示尺寸。才使得同行的问题得到比较好的解决,还有其他更好的方法吗?目前就不清楚了。

 第三个是在300px~340px之间,一直在其他分辨率下显示正常的内容会在这段逐渐出现横向滚动条。从上到下反复查找后发现是顶部和底部导航栏的问题,开始只对header和footer设置了width:100%;的样式,后来改成了min-width:1200px后得到了改善,其中还有里头嵌套的div的宽度也有问题的都设置了最小宽度,然后横向滚动条就消失了,不过这个问题在使用框架时没有出现过,不知道其中是不是还需要在公共类中添加什么属性才能解决?

收获:今天算是把任务15做完了,但是写代码的过程确实不是很顺利,各种问题,还好都一一试探性的解决了。感觉html5和css3其实并不太熟悉,打算以后把这两块补补,加深一下印象。今天提交了任务8,希望审核通过吧!


返回列表 返回列表
评论

    分享到