html5中側(cè)邊欄導(dǎo)航·怎樣寫(xiě)

側(cè)邊欄導(dǎo)航標(biāo)簽：

我們注重客戶提出的每個(gè)要求，我們充分考慮每一個(gè)細(xì)節(jié)，我們積極的做好成都做網(wǎng)站、網(wǎng)站制作服務(wù)，我們努力開(kāi)拓更好的視野，通過(guò)不懈的努力，創(chuàng)新互聯(lián)贏得了業(yè)內(nèi)的良好聲譽(yù)，這一切，也不斷的激勵(lì)著我們更好的服務(wù)客戶。 主要業(yè)務(wù)：網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計(jì),重慶小程序開(kāi)發(fā),網(wǎng)站開(kāi)發(fā),技術(shù)開(kāi)發(fā)實(shí)力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫(kù)的技術(shù)開(kāi)發(fā)工程師。

aside

nav

ul

li菜單一/li

li菜單二/li

li菜單三/li

li菜單四/li

li菜單五/li

/ul

/nav

/aside

樣式自己加。

html5常用標(biāo)記及用法？

HTML5 新增結(jié)構(gòu)元素分為主體結(jié)構(gòu)元素和非主體結(jié)構(gòu)元素

1.主體結(jié)構(gòu)元素包括 article、section、nav、aside、time

2.非主體結(jié)構(gòu)元素包括 header、hgroup、footer、address

一、主體結(jié)構(gòu)元素

article

article 標(biāo)簽，從語(yǔ)義化上看為文檔、頁(yè)面，其用法如下：

通常是一篇文章、一個(gè)頁(yè)面、一個(gè)獨(dú)立完整的內(nèi)容模塊

一般會(huì)帶個(gè)標(biāo)題，并放在 header 標(biāo)簽中

article 元素可以互相嵌套

使用頻率極高，強(qiáng)調(diào)獨(dú)立性，多注意下與 header 標(biāo)簽的使用。

代碼如下:

article

header

h1是我標(biāo)簽/h1

/header

p我是段落/p

article

div我的內(nèi)容/div

/article

/article

section

section 標(biāo)簽，從語(yǔ)義化上看為部分，其用法如下：

用于頁(yè)面內(nèi)容的獨(dú)立分塊，往往是文章的一段

通常由內(nèi)容和標(biāo)題組成，沒(méi)有標(biāo)題的內(nèi)容不推薦使用 section

使用頻率低，強(qiáng)調(diào)分段分塊。

注：《HTML5與CSS3權(quán)威指南》這本書(shū)中說(shuō)明：一個(gè)容器需要被定義樣式或者腳本定義行為時(shí)，推薦用div而非section，不要將section用作設(shè)置樣式的容器。

代碼如下:

section

h1水果/h1

article

h2蘋(píng)果/h2

div蘋(píng)果是撒？/div

/article

article

h2桔子/h2

div桔子是撒？/div

/article

/section

!-- article可以看成是一種特殊種類的section元素,它比section更強(qiáng)調(diào)獨(dú)立性 --

article

h1中國(guó)人物/h1

p三國(guó)、兩晉、南北朝/p

section

h2三國(guó)/h3

p猛將猛將猛將猛將/p

/section

section

h2兩晉/h3

p猛將猛將猛將猛將/p

/section

/article

nav

nav 標(biāo)簽，從語(yǔ)義化上看為導(dǎo)航，其用法如下：

通常作為頁(yè)面導(dǎo)航的鏈接組

側(cè)邊欄導(dǎo)航

使用頻率高。

代碼如下:

nav

ul

lia href=""菜單1/a/li

lia href=""菜單2/a/li

lia href=""菜單3/a/li

/ul

/nav

aside

aside 標(biāo)簽，從語(yǔ)義化上看為在旁邊、側(cè)邊，其用法如下：

在 article 標(biāo)簽中使用時(shí)，作為主要內(nèi)容的附屬信息部分，如有關(guān)的參考資料、名詞解釋等。

在 article 標(biāo)簽外使用時(shí)，作為頁(yè)面或者站點(diǎn)全局的附屬信息部分，如側(cè)邊欄、博客的友情鏈接部分、廣告區(qū)域等。

使用頻率低。

代碼如下:

!-- 在article標(biāo)簽外使用時(shí) --

article

h1馬云是誰(shuí)/h1

p馬云，男，1964年10月15日出生于浙江省杭州市，中國(guó)著名企業(yè)家，阿里巴巴集團(tuán)、淘寶網(wǎng)、支付寶創(chuàng)始人........../p

aside

h1參考資料/h1

p百度網(wǎng)、維基百科.../p

/aside

/article/p p!-- 在article標(biāo)簽內(nèi)使用時(shí) --

aside

nav

ul

lia href=""老趙的博客/a/li

lia href=""鬼哥的博客/a/li

lia href=""彪叔的博客/a/li

/ul

/nav

/aside

time

time 標(biāo)簽，從語(yǔ)義化上看為時(shí)間，其用法如下：

代表 24 小時(shí)中的某個(gè)時(shí)刻或某個(gè)日期

表示時(shí)刻時(shí)允許帶時(shí)間差

可定義很多格式的日期和時(shí)間

使用頻率低。

代碼如下:

time datetime="2013-3-6"2014年3月6日/time

!-- datetime屬性中日期與時(shí)間之間要用“T” 文字分隔，“T”表示時(shí)間 --

time datetime="2013-3-6T20:00"2014年3月6日20:00/time

!-- 時(shí)間加上“Z”表示給機(jī)器編碼時(shí)使用UTC標(biāo)準(zhǔn)時(shí)間 --

time datetime="2013-3-6T20:00Z"2014年3月6日20:00/time

二、非主體結(jié)構(gòu)元素

header

header 標(biāo)簽，從語(yǔ)義化上看為文檔的頁(yè)眉，其用法如下：

一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素

通常放置在整個(gè)頁(yè)面或者頁(yè)面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題

一個(gè)網(wǎng)頁(yè)內(nèi)并沒(méi)有限制 header 標(biāo)簽的個(gè)數(shù)

使用頻率極高，比較容易理解。

代碼如下:

header

h1我是大頭/h1

/header

article

header

h1我是脖子/h1

/header

p我是身體/p

/article

hgroup

hgroup 標(biāo)簽，從語(yǔ)義化上看為標(biāo)題組，其用法如下：

作為 header 標(biāo)簽的子元素

一個(gè)內(nèi)容模塊中包括了主標(biāo)題和至少一個(gè)子標(biāo)題才使用 hgroup

通常會(huì)將 h1~h6 元素進(jìn)行分組

使用頻率高。

代碼如下:

article

header

hgrounp

h1我是劉備/h1

h2我是關(guān)羽/h2

h3我是張飛/h3

/hgrounp

/header

p呂布驚呆了/p

/article

footer

footer 標(biāo)簽，從語(yǔ)義化上看為文檔的腳注，其用法如下：

一個(gè)內(nèi)容塊區(qū)的腳注

通常內(nèi)容為聯(lián)系信息、相關(guān)閱讀、版權(quán)信息等

使用頻率高，比較容易理解。

代碼如下:

article

p呂布驚呆了/p

footer

ul

li關(guān)于三國(guó)/li

li地圖信息/li

li游戲攻略/li

/ul

/footer

/article

address

address 標(biāo)簽，從語(yǔ)義化上看為地址，其用法如下：

用于文檔中呈現(xiàn)的聯(lián)系信息

通常內(nèi)容為作者、網(wǎng)站鏈接、電子郵箱、地址、電話號(hào)碼等

使用頻率低。

代碼如下:

address

a href=""作者：張三豐/a

a href=""地址：武當(dāng)山/a

a href=""聯(lián)系方式：1247/a

/address

HTML5設(shè)計(jì)一個(gè)導(dǎo)航側(cè)邊欄？

?!DOCTYPE?html

html?lang="en"

head

meta?charset="UTF-8"

meta?name="viewport"?content="width=device-width,?initial-scale=1.0"

titleDocument/title

style

*{

margin:0;

padding:0;

}

ul{

list-style:?none;

background-color:?black;

color:blanchedalmond;

width:?100px;

line-height:?48px;

}

li:nth-of-type(2n+1){

background-color:?blue;

}

li:hover{

color:?red;

background-color:?yellow;

}

/style

/head

body

ul

li1/li

li2/li

li3/li

li4/li

li5/li

li6/li

li7/li

li8/li

/ul

/body

/html

?請(qǐng)采納

網(wǎng)頁(yè)標(biāo)題：html5側(cè)邊,css側(cè)邊欄
網(wǎng)站路徑：http://chinadenli.net/article40/dsiijeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站制作、虛擬主機(jī)、外貿(mào)網(wǎng)站建設(shè)、App開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)