发表于: 2016-12-18 08:53:26

0 501


今天完成的事情:

1.完成了任务13

主要是按照CSS重置、网站通用样式、单页面精细结构和样式这些分类重构过去的代码,把每部分的字体颜色、边框、背景色这些属性抽出来做成单独的类,这样在需要用到这些属性的时候直接引用这些类就可以了。还有就是把原CSS文件中重复性很高的一些属性如float:left;display:absolute;以CSS通用库的形式代替。其实思路和之前的LESS一样,都是为了节省工作量。

帮师弟解决了任务3和任务4中的小问题

CSS的学习初期大家遇到的问题都差不多,师弟们遇到的问题主要还是清除浮动、绝对定位脱离文档流这些,有些的基础知识不太扎实,还需要再巩固一下,也有些问题比较无脑,比如网址后面没加.html之类的。html和CSS初学时会遇到这些问题其实还是因为对一些基础属性没有理解的足够深刻,或者是只知其一不知其二,要做到游刃有余还是要下一番功夫的。


明天计划的事情:

开始任务14,学习现成的组件库,理解构造方式。

我现在对这两个词完全没概念,什么是组件库,什么又是构造方式。。。


遇到的问题:

我把CSS分成了几个部分,一是CSS重置,reset.css,包括外边距归零,html字体转换font-size: 625%;ul,ol {list-style-type:none;}

内容不多,但是都很有用。二是网站通用样式,base.css,内容包括body的宽度、最大宽度、居中、字号,头部和中部的背景色、字体色、text-align:center;overflow:hidden;还有用到的边框。三是CSS通用库,这里直接引用了张鑫旭大神的zxx.lib.css,这个里面内容就多了,常用的position: relative;display: absolute;float: left;background: #ccc;color: #333;每条属性都对应着一个单独的类名,需要注意的就是分的太细,写html的时候一个个写类名可能会不习惯,以前总是习惯了在CSS文件里一条条写属性,现在改成写类名了,不过最终的结果都是一样的,写多了习惯就好。最后一个就是该网站页面的CSS文件,主要包括各部分的具体坐标值、字号、行高、百分比边距、单独的边框之类的,内容已经比拆分之前大大减少,很多重复的东西都不用再一遍遍反复写了。


收获:

今天终于体会到了CSS架构的好处,也体验了和之前完全不同的写代码的感觉,通过通用样式库,html要分担一部分CSS的任务了,引用各种类代替了CSS里的一条条属性,以后还要多用这种写法,提高编码效率,同时遵守编码规范。



返回列表 返回列表
评论

    分享到