tips:html文件乱码的排查
查看meta信息中,charset所设置的字符集与文件本身的编码是否一致。(charset设置的字符集是告诉浏览器要用什么编码,当然只有文件本身是这种编码类型才行)
写一个网页的工作流程:
1、划块,首先分析网页的效果图,分析如何分块
分块的原则:从上到下,从左到右,从大到小
2、布局
盒子模型
块状元素可以看成一个硬盒子,盒子的属性:width height padding border margin background
background:体现的范围width*height+padding
盒子有哪些特点:
- 默认情况下,盒子独占一行
- 盒子有宽有高
- 盒子可以设置外边距,即盒子与盒子之间的距离
- 盒子可以有边框,可以设置边框的精细、颜色、样式
- 盒子与盒子内部的内容可以保持一定距离,即内边距
浮动模型
当一个块状元素设置浮动之后,应这样来看待此元素,此元素原地上升起一定高度,漂浮在半空中,被浮动前所占的区域让出来,所以后来的普通块状元素,占据漂浮块原来的空间,因此,视觉上看,后来的块将被浮动块盖住。如果后来的仍然是浮动元素,则认为两者浮动的高度一样,因此并排摆放。
如果不想让后来的被盖住,可以声明clear:left/right/both。分别代表本块上面不允许有左浮元素/右浮元素/左右浮元素
3、填写内容,html标签img ul h1 h2 p span
4、css细化控制显示效果
背景控制:background
文本控制:text-indent text-align text-decoration
字体:大小 行距 样式 粗细 字体
颜色控制:color
从整个网站的角度看如何工作
1、首先观察所有页面的布局,观察布局的共同点进行归类
2、引入初始化css
3、把布局相同的一类页面做出架子(包括html和css),然后在利用此页面做模版,每个页面不同的部分,我们再写不同的css来单独控制
也就是说,做出的模版页面应该有2个css文件初始化css和模版框架css
例:template.html+reset.css+frame.css