常見(jiàn)布局種類
一列布局
- 自上而下的,一般頭部進(jìn)行固定寬度,高度設(shè)置為自動(dòng)
兩列布局
- 自適應(yīng)的兩列布局:width 用百分比+float;
- 固定寬度的兩列布局:width:具體值/父級(jí)元素的寬度肯定,width+百分比;+float;如果沒(méi)有加 float 的話,不能實(shí)現(xiàn)并排的兩列布局。
三列布局
- 傳統(tǒng)的三列布局依托于 float 實(shí)現(xiàn)
- 特殊的三列布局:左右固定,中間自適應(yīng)情況,左右使用絕對(duì)定位來(lái)實(shí)現(xiàn),中間用 margin 實(shí)現(xiàn)三列布局:左邊和右邊固定,中間自適應(yīng):
CSS中的定位機(jī)制
- 標(biāo)準(zhǔn)文檔流
- 浮動(dòng)
- 絕對(duì)定位
網(wǎng)頁(yè)簡(jiǎn)單布局之結(jié)構(gòu)與表現(xiàn)的原則
- 最大化的簡(jiǎn)化 html 的結(jié)構(gòu),然后用 css 進(jìn)行設(shè)置,減少 html 與 css 的契合度
- 不應(yīng)當(dāng)為了樣式而添加無(wú)意義的標(biāo)簽
- 結(jié)構(gòu)與表現(xiàn)分離,結(jié)構(gòu)簡(jiǎn)潔,構(gòu)建結(jié)構(gòu)不斟酌布局樣式
CSS元素隱藏
{ display: none; /* 不占據(jù)空間,沒(méi)法點(diǎn)擊 */ }
{ visibility: hidden; /* 占據(jù)空間,沒(méi)法點(diǎn)擊 */ }
{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占據(jù)空間,沒(méi)法點(diǎn)擊 */ }
{ position: absolute; top: -999em; /* 不占據(jù)空間,沒(méi)法點(diǎn)擊 */ }
{ position: relative; top: -999em; /* 占據(jù)空間,沒(méi)法點(diǎn)擊 */ }
{ position: absolute; visibility: hidden; /* 不占據(jù)空間,沒(méi)法點(diǎn)擊 */ }
{ height: 0; overflow: hidden; /* 不占據(jù)空間,沒(méi)法點(diǎn)擊 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占據(jù)空間,可以點(diǎn)擊 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占據(jù)空間,可以點(diǎn)擊 */ }
CSS中清除浮動(dòng)最優(yōu)方法
在父級(jí)添加 overflow:hidden
優(yōu)點(diǎn):不存在結(jié)構(gòu)和語(yǔ)義化問(wèn)題,代碼量極少
缺點(diǎn):內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行致使內(nèi)容被隱藏掉,沒(méi)法顯示需要溢出的元素
父元素也設(shè)置浮動(dòng)(加個(gè)float:left/right)
優(yōu)點(diǎn):不存在結(jié)構(gòu)和語(yǔ)義化問(wèn)題,代碼量極少
缺點(diǎn):使得與父元素相鄰的元素的布局會(huì)遭到影響,不可能一直浮動(dòng)到 body,不推薦使用
父元素設(shè)置 display:table
優(yōu)點(diǎn):結(jié)構(gòu)語(yǔ)義化完全正確,代碼量極少
缺點(diǎn):盒模型屬性已改變,由此釀成的一系列問(wèn)題,得不償失,不推薦使用
使用 :after 偽元素
優(yōu)點(diǎn):需要注意的是 :after 是偽元素,不是偽類(某些CSS手冊(cè)里面稱之為“偽對(duì)象”),很多清除浮動(dòng)大全之類的文章都稱之為偽類,不過(guò) csser 要嚴(yán)謹(jǐn)一點(diǎn),這是一種態(tài)度。
由于IE6⑺不支持:after,使用 zoom: 觸發(fā) hasLayout。
缺點(diǎn):兼容性不是很好。
在浮動(dòng)的元素后面添加空標(biāo)簽
清除浮動(dòng)
優(yōu)點(diǎn):簡(jiǎn)單明了
缺點(diǎn):無(wú)意義的空標(biāo)簽,不利于語(yǔ)義化
DIV+CSS規(guī)范命名集合
命名規(guī)范說(shuō)明:
所有的命名最好都小寫
每一個(gè)標(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),并有益于搜索引擎的查詢。
給每個(gè)表格和表單加上一個(gè)唯一的、結(jié)構(gòu)標(biāo)記 id
給圖片加上alt標(biāo)簽
盡可能使用英文命名原則
盡可能不縮寫,除非一看就明白的單詞
DIV+CSS命名參考表
CSS 樣式命名 | 說(shuō)明 | CSS 文件命名 | 說(shuō)明 |
---|---|---|---|
wrapper | 頁(yè)面外圍控制整體布局寬度 | master.css,style.css | 主要的 |
container或#content | 容器,用于最外層 | module.css | 模塊 |
layout | 布局 | base.css | 基本公用 |
head,#header | 頁(yè)頭部份 | layout.css | 布局,版面 |
foot,#footer | 頁(yè)腳部份 | themes.css | 主題 |
nav | 主導(dǎo)航 | columns.css | 專欄 |
subnav | 二級(jí)導(dǎo)航 | font.css | 文字、字體 |
menu | 菜單 | forms.css | 表單 |
submenu | 子菜單 | mend.css | 補(bǔ)釘 |
sideBar | 側(cè)欄 | print.css | 打印 |
sidebar_a,#sidebar_b | 左側(cè)欄或右側(cè)欄 | main | 頁(yè)面主體 |
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)簽頁(yè) |
joinus | 加入我們 | partner | 合作火伴 |
service | 服務(wù) | regsiter | 注冊(cè) |
arr/arrow | 箭頭 | guild | 指南 |
sitemap | 網(wǎng)站地圖 | list | 列表 |
homepage | 首頁(yè) | subpage | 2級(jí)頁(yè)面子頁(yè)面 |
tool,#toolbar | 工具條 | drop | 下拉 |
dorpmenu | 下拉菜單 | tag | 標(biāo)簽 |
status | 狀態(tài) | scroll | 轉(zhuǎn)動(dòng) |
.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í)一般不需要指定