因为期末考试、调整心态等等的种种原因,距离上一次的项目练习已经过了很久了,今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原。设计图很长,整个页面分为了好几个区域,所以就不放完整的设计图了,具体的设计文件可以在文末的Github地址中下载。第一次的总结是以我对页面架构的理解,按照代码实现顺序讲解的,那这一次就按照遇到的问题总结性地记录吧。欢迎大家看完我的作品和总结以后,提出宝贵的建议!谢谢大家!
经过上一次的练手,这次的练手就更加从容了,不仅仅是为了查缺补漏,也是为了解决问题的同时,让代码可以更加简洁。但也有一些小瑕疵,比如说页面中每个模块的每个标题其实都是同样的字号以及颜色,部分的标题根据背景颜色有变化,本来可以在开头先设置总体的颜色和字号,这样遇到特殊情况的时候再进行修改。但是因为最后犯懒,这部分的设置就在每个模块里重复了很多遍。还有页面的字体也是没有导入的,所以显得没有涉及稿那么完美了。还有一点疑问是,因为是静态页面,所以所有的尺寸都是固定值,在页面缩放的时候就会出现一些不好的现象,而且设置了绝对定位以后,也是不可以同时实现响应式的。这样在实际的产品生产中,应该是大家都很不友善的?下一个作品要好好地考虑这个问题呢。最后一点是,页面上有很多可以用到JavaScript的地方,不过现在学艺不精,也还没有勇气尝试(???),所有也没有好好设计,但能够用CSS实现的,还是实现了。
下面就从我在实现过程中遇到的一些问题来进行总结吧。
问题一:遇到行内元素与块级元素需要在同一行上显示时,总会让人很抓狂。
这个问题在上一次作品中也遇到了,提到几种解决方案,针对一些问题,有的方案可以解决,而有的却没有什么效果。下面就根据我实现页面过程中遇到的问题,再来说说我的解决方案。
延伸阅读
学习是年轻人改变自己的最好方式