分开HTML代码和CSS代码，专门制作一个CSS文件专门来放置css代码，css文件里一般有作者样式(XXX.css)和通用样式(common.css)。这样会使代码更易维护，且整齐美观。
写整体网页时，通常先构造网页结构，构造结构之前先将网页划分为几个部分，分步写HTML代码和css代码，注意观察每个部分的相似性，为同一个类名添加样式，之后遇到相似的样式时，直接引用类名即可，这样会大大缩减代码的长度。
例如，豆瓣网页整体内容宽度相同，且水平居中，这里只需设置一个类名container，为其设置同一样式，之后的每部分引用container即可。
在实现代码的过程中，我们会重复性的使用一些特殊样式，比如左浮动右浮动，或者对雪碧图的同意设置等，可将他们均写在common.css中这样当其他网页也需用这些特殊样式时，直接引用css文件即可，当然每个网页中都会有该网页独特的重复的样式，这些样式可写在作者样式里，注意标注为首页通用样式，防止和该网页中其他部分css代码混淆。
有时网页中某个区域在主页面上可使用，同时它也有自己的页面，这时就需要新制作一个网页，并用iframe元素将新网页嵌入到原网页中。
浮动盒子导致的高度坍塌解决方法：
给行盒设置宽高：
行盒不可改变宽高，要想让行盒的宽高生效，必须将其转化为块盒。
以下以a元素为例：
隐藏文字：
1. 用span元素把文字包裹起来，设置span为display：none即可
2. 在这里，还有另一种巧妙的方法：不用设置span元素，设置a元素高度为0，接着设置其padding-top为适宜像素，此时文字会被挤下去，这时只要设置overflow为hidden即可。
外边距合并问题：
1.创建BFC盒子
2. 设置header内边距
搜索框一般效果：输入文字后按回车页面会加载到另一个页面
做法有两种
1.通过JS代码实现 2.在input元素外面套一个form（表单元素），form里再加一个子元素button，button里又有i元素（图标） 这里的input元素记得按照要求定宽高
按回车键时，就相当于触发了按钮，提交数据
设置placeholder文字颜色：
重置input，button样式：
给背景图设置宽高的方法：
background: url(https://blog.csdn.net/guai_guai_guai/article/imgs/搜索小.png) no-repeat left（或离左边的距离） top（或离上面的距离）/25px（宽） 25px（高）;
将元素横向排列的方法：
1.浮动（记得清楚浮动）
2. 将元素变为行块盒
右边框不充满问题：
设置+86右边框时，注意观察，他的边框并未充满，这时只需要将高度减小，因为垂直居中，所以line-height也要相应减小，但定位top值就要变成减小的值/2.
首行缩进与padding区别：
在这里要注意，如果给文本框设置首行缩进的话，当输入文字过长时，就会出现以下效果：
故为+86腾出空间时，应使用padding-left
背景颜色覆盖圆角边框问题 ：
注意观察圆角边框附近背景颜色 ，背景颜色将圆角边框覆盖了，要解决这个问题，可以设置overflow：hidden，也可以为title设置圆角边框，在这里我们就设置溢出隐藏吧
解决边框重复问题：
只设置border-top，单独设置最后一个li元素的border-bottom，这里就要用到伪元素选择器
img为行盒，行盒的水平居中，设置其父元素text-align为center
设置鼠标悬浮样式（兄弟元素）：
设置悬浮时（父子关系）
用到的选择器：
制作两栏或三栏布局:
网页中可能会有多个部分分左栏，右栏或主区域，设置其样式时将其设置为通用样式
设置子元素除第一个之外的其他元素的样式：
全英文换行效果：
如果全英文（无空格），则最终效果不会换行，故要给ul设置word-break：break-all（可在单词内部截断）
把图片按一定数量横向排列方法：
设置ul通用样式：给ul加上item-list类名，再统一设置
根据页面主区域设置宽度，注意一定要将ul设置为行块盒
图片横向排列时，去除每行末尾图片的margin-right ：
视频区域中图片上的播放图标设置：
设置图片区域的before，可以给伪元素选择器里添加字体图标，也可给内容区加上图片，设置插入播放图片的宽度和高度都撑满，为了让插入的图片居中，则设置text-align和line-height即可；
菜单区域用a元素的常见问题
将a元素设置成块盒（为了使元素独占一行），但之前写过a元素的统一样式，鼠标悬浮在a元素上时会有背景颜色，此时会显现出这样的效果（a元素变为块盒引起的）
整个块盒背景颜色均变颜色，影响视觉效果，故这里最好用ul>li元素将a元素包起来，不将a元素设置为块盒，此时就可达到想要的效果
制作有序菜单：
首先先写ul>li，简单制作出其结构
通过设置li元素样式制造出有序效果
名字过长处理方式 ：
电影名字一般的处理方式是不换行+溢出隐藏+溢出用原点代替
设置分散对齐：
text-align：justify，给item-list添加伪元素，让伪元素独占一行，解决了justify不让最后一行分散对齐的问题
阴影的设置：
设置阴影用到了css3属性里的box-shadow,其速写属性的值：