常見布局種類
一列布局
- 自上而下的,一般頭部進(jìn)行固定寬度,高度設(shè)置為自動
兩列布局
- 自適應(yīng)的兩列布局：width 用百分比+float；
- 固定寬度的兩列布局：width：具體值/父級元素的寬度肯定，width+百分比；+float;如果沒有加 float 的話，不能實(shí)現(xiàn)并排的兩列布局。
三列布局
- 傳統(tǒng)的三列布局依托于 float 實(shí)現(xiàn)
- 特殊的三列布局：左右固定，中間自適應(yīng)情況，左右使用絕對定位來實(shí)現(xiàn)，中間用 margin 實(shí)現(xiàn)三列布局：左邊和右邊固定，中間自適應(yīng)：
CSS中的定位機(jī)制
- 標(biāo)準(zhǔn)文檔流
- 浮動
- 絕對定位
網(wǎng)頁簡單布局之結(jié)構(gòu)與表現(xiàn)的原則
- 最大化的簡化 html 的結(jié)構(gòu)，然后用 css 進(jìn)行設(shè)置，減少 html 與 css 的契合度
- 不應(yīng)當(dāng)為了樣式而添加無意義的標(biāo)簽
- 結(jié)構(gòu)與表現(xiàn)分離，結(jié)構(gòu)簡潔，構(gòu)建結(jié)構(gòu)不斟酌布局樣式
CSS元素隱藏
{ display: none; /* 不占據(jù)空間，沒法點(diǎn)擊 */ }
{ visibility: hidden; /* 占據(jù)空間，沒法點(diǎn)擊 */ }
{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占據(jù)空間，沒法點(diǎn)擊 */ }
{ position: absolute; top: -999em; /* 不占據(jù)空間，沒法點(diǎn)擊 */ }
{ position: relative; top: -999em; /* 占據(jù)空間，沒法點(diǎn)擊 */ }
{ position: absolute; visibility: hidden; /* 不占據(jù)空間，沒法點(diǎn)擊 */ }
{ height: 0; overflow: hidden; /* 不占據(jù)空間，沒法點(diǎn)擊 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占據(jù)空間，可以點(diǎn)擊 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占據(jù)空間，可以點(diǎn)擊 */ }
CSS中清除浮動最優(yōu)方法
在父級添加 overflow：hidden
優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語義化問題，代碼量極少
缺點(diǎn)：內(nèi)容增多時(shí)候容易造成不會自動換行致使內(nèi)容被隱藏掉，沒法顯示需要溢出的元素
父元素也設(shè)置浮動（加個float：left/right）
優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語義化問題，代碼量極少
缺點(diǎn)：使得與父元素相鄰的元素的布局會遭到影響，不可能一直浮動到 body，不推薦使用
父元素設(shè)置 display:table
優(yōu)點(diǎn)：結(jié)構(gòu)語義化完全正確，代碼量極少
缺點(diǎn)：盒模型屬性已改變，由此釀成的一系列問題，得不償失，不推薦使用
使用 :after 偽元素
優(yōu)點(diǎn)：需要注意的是 :after 是偽元素，不是偽類（某些CSS手冊里面稱之為“偽對象”），很多清除浮動大全之類的文章都稱之為偽類，不過 csser 要嚴(yán)謹(jǐn)一點(diǎn)，這是一種態(tài)度。
由于IE6⑺不支持:after，使用 zoom: 觸發(fā) hasLayout。
缺點(diǎn)：兼容性不是很好。
在浮動的元素后面添加空標(biāo)簽
清除浮動
優(yōu)點(diǎn)：簡單明了
缺點(diǎn)：無意義的空標(biāo)簽，不利于語義化
DIV+CSS規(guī)范命名集合
命名規(guī)范說明：
所有的命名最好都小寫
每一個標(biāo)簽都要有開始和結(jié)束，且要有正確的層次，排版有規(guī)律工整
空元素要有結(jié)束的 tag 或于開始的 tag 后加上”/”
表現(xiàn)與結(jié)構(gòu)完全分離，代碼中不觸及任何的表現(xiàn)元素，如 style、font、bgColor、borde r等
定義，應(yīng)遵守從大到小的原則，體現(xiàn)文檔的結(jié)構(gòu)，并有益于搜索引擎的查詢。
給每個表格和表單加上一個唯一的、結(jié)構(gòu)標(biāo)記 id
給圖片加上alt標(biāo)簽
盡可能使用英文命名原則
盡可能不縮寫，除非一看就明白的單詞
DIV+CSS命名參考表
| CSS 樣式命名 | 說明 | CSS 文件命名 | 說明 |
|---|---|---|---|
| wrapper | 頁面外圍控制整體布局寬度 | master.css,style.css | 主要的 |
| container或#content | 容器,用于最外層 | module.css | 模塊 |
| layout | 布局 | base.css | 基本公用 |
| head,#header | 頁頭部份 | layout.css | 布局,版面 |
| foot,#footer | 頁腳部份 | themes.css | 主題 |
| nav | 主導(dǎo)航 | columns.css | 專欄 |
| subnav | 二級導(dǎo)航 | font.css | 文字、字體 |
| menu | 菜單 | forms.css | 表單 |
| submenu | 子菜單 | mend.css | 補(bǔ)釘 |
| sideBar | 側(cè)欄 | print.css | 打印 |
| sidebar_a,#sidebar_b | 左側(cè)欄或右側(cè)欄 | main | 頁面主體 |
| msg#message | 提示信息 | tips | 小技能 |
| vote | 投票 | friendlink | 友誼連接 |
| title | 標(biāo)題 | summary | 摘要 |
| loginbar | 登錄條 | searchInput | 搜索輸入框 |
| hot | 熱門熱門 | search | 搜索 |
| search_output | 搜索輸出和搜索結(jié)果類似 | searchBar | 搜索條 |
| search_results | 搜索結(jié)果 | copyright | 版權(quán)信息 |
| branding | 商標(biāo) | logo | 網(wǎng)站 LOGO 標(biāo)志 |
| siteinfo | 網(wǎng)站信息 | siteinfoLegal | 法律聲明 |
| siteinfoCredits | 信譽(yù) | .tab | 標(biāo)簽頁 |
| joinus | 加入我們 | partner | 合作火伴 |
| service | 服務(wù) | regsiter | 注冊 |
| arr/arrow | 箭頭 | guild | 指南 |
| sitemap | 網(wǎng)站地圖 | list | 列表 |
| homepage | 首頁 | subpage | 2級頁面子頁面 |
| tool,#toolbar | 工具條 | drop | 下拉 |
| dorpmenu | 下拉菜單 | tag | 標(biāo)簽 |
| status | 狀態(tài) | scroll | 轉(zhuǎn)動 |
| .left.right.center | 居左、中、右 | .news | 新聞 |
| .download | 下載 | .banner | 廣告條(頂部廣告條) |
導(dǎo)入樣式及腳本傳統(tǒng)方式
援用線上CDN
<script type="text/javascript" href="xxx/xxx.js"> 這是援用 JS 文件
<script type="text/css" href="xxx/xxx.css">這是援用 CSS 文件
援用本地文件
<script type="text/javascript" src="http://www.wfuyu.com/uploadfile/cj/20150502/xxx/xxx.js"> 這是援用JS文件
<script type="text/css" src="http://www.wfuyu.com/uploadfile/cj/20150502/xxx/xxx.css">這是援用CSS文件
新規(guī)范
根據(jù) HTMl5 規(guī)范，在 引入 CSS 和 JavaScript 文件時(shí)一般不需要指定
