发表于: 2019-07-19 23:39:09
1 381
今天完成的事:
完成了任务13 三个页面
明天计划的事:
分离样式组建自己的样式库,精简代码提交任务。
遇到的问题:
暂无
收获:
CSS样式库可以架构为以下几部分:
① 网站常见颜色,尤其是链接色
② 网站常见背景色(我习惯用bg+颜色前2字母表示,例如.bgf7
表示background:#f7f7f7
)
③ 网站常见边框色,这里类似于CSS 通用库中的margin
属性,需拆分,例如.bbdd
表示border-bottom:1px solid #ddd;
每人的命名习惯不一样,但是尽量简单为好,甚至您可以像Google一样,直接两个字母(大小写混搭)表示。另外,一定要告知设计师,边框取色不宜多,不能凭感觉,要有所牺牲,也就是如果之前使用了#cecece
的边框色,后面的#d0d0d0
颜色与之相近,请可以使用#cecece
代替,用户是看不出来其中差异的。
④ 网站遗留的单margin
属性,例如,某一div
留白较大,有个单独的margin-top:35px
的属性,OK,这个属性请放在网站CSS样式库中,以.mt35{margin-top:35px;}
保留,以供之后类似布局或需要的地方使用。
⑤ 网站遗留的单padding
属性,例如,双栏自适应布局时,无论是浮动自适应,还是绝对定位自适应,都需要使用padding-left
值,此时的padding-left
多单样式,可抽取出来,以网站样式库的形式存在。记住,是单属性,且不可从通用元素中抽取单独的padding
值,否则是给自己挖火坑。
⑥ 网站已有的width
属性,在流体布局思想下,宽度是有限的,是珍贵的,需好好利用。
⑦ 网站常用的一些height
属性,指一些高度值,例如height:18px
,height:20px
,height:24px
,height:50px
,height:100px
,height:200px
等。
评论