网页开发顺序是：
=======================
以下是HTML5布局实例：
在写CSS时，最好都不要使用 id 设置，因为id的权重为100，通配符 * 的权重为0，class的权重为 10 ，* > class > id 这样比较顺。
因为，把 id 留着给使用 javascript 调用的时候使用比较适合。
-------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
*{
padding: 0;
margin: 0;
border: none;
font-size: 16px;
}
a{
text-decoration: none;
}
header{
height: 55px; /*高度固定，最好在最外面一层设置好高度。*/
background: #000;
}
header > .container{
950px;
margin: 0 auto;/*二级宽度居中显示*/
}
header > .container > img,
header > .container > span {
float: left;
display:block; /*如果想要设置宽高，外边框时，记住先显示为块级元素，且写在设置宽度高度外边框之前*/
margin: 7px 0;
}
header > .container > span{
color: #fff;
font-size: 30px;
font-family: "微软雅黑";
line-height: 55px;
}
header > .container > nav{
float: right;
}
header > .container > nav > a{
float: left;
font-size: 24px;
display: block; /*把行内元素设置为块级元素时，把这三个属性写到一起*/
height: 50px;
75px;
line-height: 50px; /*居中显示，两个属性写一起*/
text-align: center;
color: #fff;
}
header > .container > nav > .one{background: #433b90;}
header > .container > nav > .two{background: #017fcb;}
header > .container > nav > .three{background: #78197b;}
header > .container > nav > .four{background: #feb800;}
header > .container > nav > .five{background: #f27c01;}
header > .container > nav > .six{background: #d40112;}
header > .container > nav > a:hover,
header > .container > nav > .active{ /*注意这里 .active 是一个class 而不是伪类 :active ，active：当前的，现役的*/
padding-bottom: 5px;
}
</style>
</head>
<body>
<header>
<div class="container">
<img src="http://climg.mukewang.com/582e5f160001b17100400040.png"><span>MYMOOC</span>
<nav>
<a class="one active" href="#">Home</a>
<a class="two" href="#">FAQ</a>
<a class="three" href="#">Course</a>
<a class="four" href="#">Notes</a>
<a class="five" href="#">My</a>
<a class="six" href="#">Quester</a>
</nav>
</div>
</header>
</body>
</html>
============================
此外，在学习阶段，一定一定要一个代码一个代码的敲，这样细节才会学到很多，
如果一不小心，一个符号写错了，那么就无法运行。
正所谓：细节决定成败！
============================
单行居中：
height=line-height 上下垂直居中
text-align:center; 块级元素内容左右居中
多行居中：
父元素设置 display:table. 且宽度固定
子元素设置 display:table-cell. vertical-align:middle;
定位居中一：
父元素设置position:relative;
子元素设置position:absolute; top:0; bottom:0; left:0; right:0; margin:auto auto;
其中如果只设置如下效果又不一样：
left: 0;
right: 0;
margin: 0 auto; //本元素相对于有relative的祖先元素左右垂直居中。
top: 0;
bottom: 0;
margin:auto 0 ; //本元素相对于有relative的祖先元素上下垂直居中。
定位居中二：
父元素设置position:relative/fixed; 或者父元素是body。
子元素设置position:absolute; left:50%; top:50% margin-left:-(子元素宽度的一半); margin-top:-(子元素高度的一半);
固定宽度块级元素:margin:0 auto; 左右居中。
块级元素的内容:text-align: center; 左右居中。
行内元素:vertical-align:middle; 上下居中。