調(diào)用HTML標(biāo)簽進(jìn)行CSS布局
Html標(biāo)簽有很多值得學(xué)習(xí)的地方，那么你知道如何使用HTML標(biāo)簽進(jìn)行CSS布局，這里向大家簡(jiǎn)單描述一下，為了避免DIV成為Table的替代品，多層嵌套的DIV會(huì)嚴(yán)重影響代碼的可閱讀性，活用HTML為我們提供的標(biāo)簽吧。
合理使用HTML標(biāo)簽進(jìn)行CSS布局
CSS高級(jí)布局已逐漸流行，但面對(duì)所謂DIV+CSS布局的叫法讓人更為擔(dān)心，不要讓DIV成為Table的替代品，多層嵌套的DIV會(huì)嚴(yán)重影響代碼的可閱讀性，活用HTML為我們提供的標(biāo)簽吧。
什么時(shí)候應(yīng)該用DIV?
雖然在這方面沒有什么硬性的規(guī)定,但個(gè)人認(rèn)為DIV更適用于大體框架的定位.例如我們要定義一塊頭部的區(qū)域,一般會(huì)這樣定義一個(gè)DIV:
- <dividdivid="header">這里就是頭部框架里要寫的內(nèi)容</div>
當(dāng)然,可以用class來定義,但一般來講如不是在同一頁(yè)面會(huì)重復(fù)的元素,用id能更好的區(qū)別開來.
本人觀察了下alistapart的首頁(yè)代碼,它的頭部定義代碼如下:
以下是引用片段：
- <ulidulid="navbar"><liidliid="articles">
- <ahrefahref="/articles/"title="Articles">
- Articles</a></li><liidliid="topics">
- <ahrefahref="/topics/"title="Topics">
- Topics</a></li><liidliid="about"><ahrefahref="/about/"title="About">
- About</a></li><liidliid="contact">
- <ahrefahref="/contact/"title="Contact">
- Contact</a></li><liidliid="contribute">
- <ahrefahref="/contribute/"title="Contribute">
- Contribute</a></li><liidliid="feed">
- <ahrefahref="/feed/"title="Feed">
- Feed</a></li></ul><h1idh1id="masthead"><ahrefahref="/">
- <imgsrcimgsrc="/pix/alalogo.gif"
- alt="ALISTApart:ForPeopleWhoMakeWebsites"/>
- </a></h1>
以下是引用片段：
- <dividdivid="ish"><ahrefahref="/issues/214"title="Issue214">
- No.<em>214</em></a></div>
定義了最上面的導(dǎo)航(ul部分),左邊的大logo和那個(gè)圓圓的No.xxxx的標(biāo)記.
他沒有使用DIV來做頂部的框架,但卻很好的說明了這些代碼的用途,為什么?因?yàn)樗钣昧薍TML提供的標(biāo)簽,以及樣式名稱的定義。
其它最常用的布局標(biāo)簽
h1
這個(gè)標(biāo)簽或許真正會(huì)去用的人很少,因?yàn)樗@示的字體真的是太"大"了,但我們是CSSer,有什么標(biāo)簽樣式不能改呢?而且它所能表達(dá)的意思就如同它原先的作用一樣明顯(大標(biāo)題)我想你已經(jīng)知道怎么去用它了^_^
ul
這個(gè)標(biāo)簽很多情況是用來定義導(dǎo)航部分的,當(dāng)然也可以用ol來代替,但導(dǎo)航連接沒有什么順序之分吧,所以還是用ul來的比較確切(去掉CSS后效果更明顯)
b
這個(gè)已經(jīng)不再推薦使用的標(biāo)簽,在布局上卻能帶來不少的方便(因?yàn)槎?,雖然我不是太贊成使用這個(gè)標(biāo)簽,但有些時(shí)候(比如細(xì)小地方的布局定義)還是不錯(cuò)的選擇
h2
h2使用最多的地方應(yīng)該不是布局上,而是副標(biāo)題,但有些地方需要定義欄目樣式的話,用這個(gè)標(biāo)簽比較合適,欄目?jī)?nèi)容就使用p
【編輯推薦】
- DIV+CSS滑動(dòng)門技術(shù)簡(jiǎn)介
- 暢談DIV排版和table排版的區(qū)別
- 14大CSS工具提高網(wǎng)頁(yè)設(shè)計(jì)效率
- 實(shí)現(xiàn)DIV圖片居中方法揭秘
- 鼠標(biāo)經(jīng)過時(shí)改變DIV背景顏色的三種途徑
