最近过了一遍《HTML & CSS Design and Build Websites》.这本书对初学者比较友好,
图文并茂,排版美观,内容全面,是一本值得一看的书.主要是自学的,不懂的就搜索,没有完整的看过一遍,看这本书主要是看看有哪些漏下的,还有就是顺便复习一下.
这里推荐一个css可视化的参考网站,里面用图文来解释css的属性,非常直观: css reference.
一些知识
颜色
色调
差不多就是颜色.
色环
就是把颜色环成一个圆圈,每一个角度对应一个色调.
饱和度
是指一种色调中灰色的含量,用百分比来表示.100%的饱和度代表不加入灰色.同样0%的饱和度就全是灰色了.
亮度
是指色调中加入黑色的含量.亮度最大时就是该色调,亮度最小时就是黑色了.
明度
是指色调中加入白色或者黑色的含量.明度为0%时是黑色,50%时是标准色,100%时是白色.
line-height
行间距就是2行直接的距离.在css中有一点不一样, line-height 指的是字体大小再加行间距. 这就是 line-height 和 font-size 的区别.推荐用 1.4em 到 1.5em,这样可以提高文本的可读性.
vertical-align
垂直对齐.比如说, 要实现顶部对齐就可以设置 vertical-align: top.
自定义text inputs 的格式
比如说给它前面加个图标:
- 设置 background-image, background-repeat:no-repeat, background-postion,
这样图标就在 input 里面了 - 设置 padding-left, 这样就可以不让图标盖住了输入的数据
960 栅格
因为以前大部分设备显示都大于 960px, 所以选960px来显示内容.在把960px
分成12列,每一列是 80px, 这个80px的列包含左右各有10px的间隔,设置width
的时候就可以把内容设置为几个列的宽度.比如说, 一列放置3个内容,那么每个内容就
占4个列, 80(一个列的宽度)4-10(一个间隔的宽度)2 就是每个内容块的宽度,
所以每个内容块的宽度就是 300px .这样就可以使得整个页面非常整洁.
线框图
是指网站中每个页面内容的概要.显示出信息的层次结构以及需要占用的空间.在写代码前
画下线框图能更省时间,这样也能更好的分离任务,一次只关注一点,效率才高.
seo
站内优化
- 页面标题,
<title></title> - url
- 标题,
<h1>到<h6> - 正文
- 链接文本
- 图像的alt属性
- 页面描述