一．开发前的准备
1. 配置开发环境(sublime)
2. 建立项目文件夹
首页 index.html
Css文件夹 index.css base.css
图片文件夹 images
Js文件夹 js文件
3. Css初始化
因为html中的标签都有各自的默认样式，为了布局的稳定性和统一成我们自己想的风格，因此需要将这些标签默认的样式统统去掉。
4. 分析网站构成(写代码)
二．布局中所遵循的规范或是通例
一般是遵循从上到下，从左到右的一个顺序。就从页面的稳定性上来说，优先考虑使用标准流，其次才考虑浮动或是定位。
遵循标准流的元素中，又以宽高最稳定，先把大的框架实例化出来，再进行细节的布局。能用padding的优先考虑padding(内边距),其实才考虑margin(外边距)。如果没有margin的边距合并或是共享的问题话，也是可以比较愉快的使用margin的。
我们网页的布局其实就像是在搭积木。将一块块的盒子组合在一块，使其呈现一个漂亮的页面效果。Html中任何一个元素都可以看成一个盒模型，都有宽高，内外边距。
但行内元素的宽高不起作用，只有块级元素的宽高有效。行内元素的左右边距是起效果的。为了让行内元素也可能拥有宽高，可以有两种办法：
第一种是让行内元素转换成块级元素或是行内块元素,代码如下：
display: block, display: inline-block
第二种是给行内元素添加浮动或是定位，浮动或是定位了的元素脱离标准流的控制了，就会自动的拥有宽高的效果。
用到的块级元素有： div, p, ul,li,dl,dt,dd,h2,h3
用到的行内元素有： span,a,del,
用到的行内块元素有：img,input,button 注意行内块元素想邻排列默认有几像素的间距，只能通过浮动解决这个问题。
三 盒模型
每一个盒模型都有上右下左四个方向的值，比如
border: 20px; 就好比是：
border-top: 20px;
border-right: 20px;
border-bottom: 20px;
border-left: 20px;
padding: 30px; 就好比是：
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
margin: 40px; 就好比是：
margin-top: 40px;
margin-right: 40px;
margin-bottom: 40px;
margin-left: 40px;
如果我要写： margin: 0 10px; 就好比是：
margin-top: 0; margin-bottom: 0;
margin-right: 10px; margin-left: 10px;
如果我要写： margin: 0 10px 20px; 就好比是：
margin-top: 0;
margin-right: 10px; margin-left: 10px;
margin-bottom: 20px;
四 选择器
基本选择器：
标签选择器，id选择器，类选择器，通配符选择器
复合选择器：
标签指定式，并集选择器，后代选择器，综合选择器
4.1 标签指定式选择器(交集选择器):
标签名+ID名或者类名{属性名:属性值;属性名:属性值;}
应用场景：不同标记上有同样的类名
4.2 选择符分组（并集选择器）:
用法：选择器,选择器,选择器{属性名:属性值;属性名:属性值;}
4.3.后代选择器（包含，派生，嵌套）:
父级选择器 子级选择器 孙级选择器{属性名:属性值;属性名:属性值;}
3.综合选择器 各种选择器的结合使用。
h1,li.one span,.two,#one_1{color:red;font-size:36p;background:#FC0;}
标签，后代，选择符分组(并集选择器)，标签指定式(交集选择器)
五 复合属性 font background
Font :
可以按顺序设置如下属性：
font-style （使用斜体、倾斜或正常字体）
font-variant （设置小型大写字母的字体显示文本）
font-weight （设置文本的粗细）
font-size/line-height （设置字体的尺寸和行高）
font-family （规定元素的字体系列）
body{ font: italic small-caps bold 14px/24px " microsoft yahei";}
字体： 斜体 小型大写字母 粗体 14号大小/24像素行高 微软雅黑
可以不需要每个都写，但是顺序还是要的。再简写，也至少包括两个，就是字体大小 和字体样式。
Background:
css2中有五个与背景相关的属性。它们是：
margin-bottom: 5pt; margin-left: 9pt; line-height: 15pt;">background-image:用作背景的图片
background-position:确定背景图片的位置
background-repeat:确定背景图片是否重复
background-attachment:确定背景图片是否随页面滚动
简写就是：
Background: 颜色 图片 是否平铺 位置 是否滚动