規(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)一。如果沒對(duì)CSS初始化往往會(huì)出現(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
浮動(dòng)(float)
浮動(dòng)的目的:可以讓多個(gè)塊級(jí)元素放到同一行上
float: left right none;
清除浮動(dòng)
清除浮動(dòng)：根據(jù)情況需要來清除浮動(dòng)财著。
清除浮動(dòng)的目的：就是為了解父盒子高度為0的問題
清除浮動(dòng)的方法:
- 額外標(biāo)簽法
- overflow:hidden ：觸發(fā)bfc模式就不需要清除浮動(dòng)
- 偽元素
.clearfix:after{
content:"";
visibility:hidden;
display:block;
hight:0;
clear:both;
}
.clearfix{
zoom:1;
}
- 雙偽元素
.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 移動(dòng)
cursor:text 文本輸入
標(biāo)簽嵌套
- 塊級(jí)元素 -- 任何元素可以
- 行內(nèi)元素 -- 行內(nèi)元素只能嵌套b u span 等元素
- p元素內(nèi)不能放div
- a標(biāo)簽里面不能放a input等元素。
