規(guī)劃好頁面（css，html，javascript等相關(guān)資源要文件夾分好類后存放）

• 頁面：

>index.html
>html
    >html文件

• 樣式：

>CSS
    >CSS文件
基本樣式(global.css)
全局樣式(base.css)

。。。

CSS初始化

• 編寫css樣式之前需要初始化css樣式（CSS初始化是指重設(shè)瀏覽器的樣式。不同的瀏覽器默認(rèn)的樣式可能不盡相同，所以開發(fā)時(shí)的第一件事可能就是如何把它們統(tǒng)一。如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面差異。）
• CSS樣式初始化能避免一些奇怪的問題
• 初始化代碼可以百度

舉例（淘寶初始化代碼）：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

引入favicon圖標(biāo)

<link rel="shortcut icon" href="favicon.icon"/>

設(shè)置盒模型

width和height最穩(wěn)定
其次考慮padding
最后考慮margin

浮動(float)

浮動的目的:可以讓多個(gè)塊級元素放到同一行上
float: left right none;

清除浮動

清除浮動：根據(jù)情況需要來清除浮動。
清除浮動的目的：就是為了解父盒子高度為0的問題
清除浮動的方法:

1. 額外標(biāo)簽法
2. overflow:hidden ：觸發(fā)bfc模式就不需要清除浮動
3. 偽元素

.clearfix:after{
    content:"";
    visibility:hidden;
    display:block;
    hight:0;
    clear:both;
}
.clearfix{
    zoom:1;
}

4. 雙偽元素

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1; /*IE/7/6*/
}

鼠標(biāo)樣式

cursor:pointer 小手狀
cursor:default 默認(rèn)
cursor:move 移動
cursor:text 文本輸入

標(biāo)簽嵌套

1. 塊級元素 -- 任何元素可以
2. 行內(nèi)元素 -- 行內(nèi)元素只能嵌套b u span 等元素
3. p元素內(nèi)不能放div
4. a標(biāo)簽里面不能放a input等元素。