发表于： 2018-12-07 23:12:27
1 811
今天完成的事：
1.CSS通用样式库：
这是我自己提取的css通用样式表（）
/*公用样式表：*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{
margin:0;
padding: 0;
}
ul,ol{
padding-left:0;
list-style-type:none;
}
img{border:0;}
.bgf0 {background-color: #f0f0f0;}
.bg29 {background-color: #29bde0;}
.bgef {background-color: #eff0f4;}
.bgf {background-color: #ffffff;}
.dib {display: inline-block;}
.df {display: flex;}
.jcs {justify-content:start;}
.jcc {justify-content: center;}
.aic {align-items: center;}
.fdc {flex-direction: column;}
.c0 {color: #000000}
.pa {position: absolute;}
.w6 {width: 6rem}
应用通用样式表的时候只需要使用<link>标签将通用的css文件引入到HTML文档的页面头部<head>标签内可以了。
CSS样式库又可以架构为以下几部分：
① 网站常见颜色，尤其是链接色
② 网站常见背景色（我习惯用bg+颜色前2字母表示，例如.bgf7表示background:#f7f7f7）
③ 网站常见边框色，这里类似于CSS 通用库中的margin属性，需拆分，例如.bbdd表示border-bottom:1px solid #ddd;每人的命名习惯不一样，但是尽量简单为好，另外，边框取色不宜多，不能凭感觉，要有所牺牲，也就是如果之前使用了#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等。
记住一个原则：网站通用的元素（按钮，导航，选项卡的）的样式千万不能分离作为网站的CSS样式库。
css样式重置：就是清除系统默认的margin和padding值。
由于不同的浏览器内核的区别，或者对选择器默认数值不一样，所以CSS重置就是让各个浏览器的CSS样式有一个统一的基准。
css样式分离：指的是“以单独的CSS文件将CSS样式分离出来。主要作用之一就是精简与重用。此处的重用多针对不同页面的重用，就是说，一个样式文件，可以多个页面使用，这对于一些公共样式的重构是很有用的
明天计划的事：完成任务13.
遇到的问题：对什么是css架构不理解，任务不知道该怎么做，找不到从哪下手，花了大量的时间在搜索文档中。
收获：完成自己的css通用样式表，任务有一点思路了。
返回列表
评论