使用webstorm 編輯
1. 確定項目文件夾
2. 規劃好頁面
a. 首頁 index.html
b. 樣式 CSS文件夾： css文件 base樣式 和 global 樣式
c. 圖片 images文件夾
d. 特效 js文件夾：js文件
3. css初始化
4. 引入css
<link rel="stylesheet" href="css/base.css">
5.引入favicon圖標
<link rel="" href="favicon.ico">
6. css權重
標簽 1 ， 類 10 ，id 100 , 行內 1000 ，
7.
網頁穩定：
Width 和height 最穩定
其次 padding
最后才考慮margin8 . 清除浮動
清除浮動的目的就是為了解決父親盒子的高為0的問題
a.額外標簽法
<div class=" cl h"></div>
.cl{clear:both}
.h{height:}
b. overflow:hidden
c. 偽元素法
.clearfix:after { content:””; Visibility:hidden; Display:block; Height:0; Clear:both; } .clearfix{ Zoom:1;} d. 雙偽元素法
.clearfix:before,.clearfix:after{ display: table; content: "";}.clearfix:after { clear: both;}.clearfix { zoom: 1;}案例：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .father{ width: 600px; border: 1px solid red; /* overflow: hidden; */ } .xiongda,.xionger{ width: 200px; height: 100px; background-color: yellow; float: left; } /* 雙偽元素清除浮動 */ .xiongda,.xionger{ width: 200px; height: 100px; background-color: yellow; float: left; } .clearfix:after{ display: block; content: ""; clear: both; visibility: hidden; height: 0; } .clearfix{ zoom:1; } /* 偽元素清除浮動 .clearfix:before,.clearfix:after{ display: table; content: ""; } .clearfix:after{ clear: both; } .clearfix{ zoom:1; } */ </style></head><body> <div class="father clearfix"> <div class="xiongda">熊大</div> <div class="xionger">熊二</div> </div></body></html>
新聞熱點
疑難解答
