CSS使用ul li布局網(wǎng)站導(dǎo)航條的原因是什么

本篇內(nèi)容主要講解“CSS使用ul li布局網(wǎng)站導(dǎo)航條的原因是什么”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“CSS使用ul li布局網(wǎng)站導(dǎo)航條的原因是什么”吧!

會(huì)布局的都知道網(wǎng)站導(dǎo)航條布局非常重要，可能一個(gè)導(dǎo)航條最終布局效果有時(shí)可以使用ul li列表標(biāo)簽布局，有時(shí)可以不用ul li布局，而是直接一個(gè)div盒子里直接放錨文本超鏈接的欄目名稱，也能實(shí)現(xiàn)，看下圖。

假如要布局出這樣簡(jiǎn)單導(dǎo)航條效果

比如以下代碼：

1、可以使用Ul li布局導(dǎo)航條

<ul>     <li><a href="http://www.億速云.com/">網(wǎng)站首頁(yè)</a></li>     <li><a href="http://www.億速云.com/html/">HTML教程</a></li>     <li><a href="http://www.億速云.com/htmlrumen/">HTML入門</a></li>     <li><a href="http://www.億速云.com/html5/">HTML5教程</a></li>     <li><a href="http://www.億速云.com/rumen/">CSS教程</a></li>     <li><a href="http://www.億速云.com/cssrumen/">CSS入門</a></li> </ul>

2、也可以不使用ul li布局的

<div class=”nav”>     <a href="http://www.億速云.com/">網(wǎng)站首頁(yè)</a>     <a href="http://www.億速云.com/html/">HTML教程</a>     <a href="http://www.億速云.com/htmlrumen/">HTML入門</a>     <a href="http://www.億速云.com/html5/">HTML5教程</a>     <a href="http://www.億速云.com/rumen/">CSS教程</a>     <a href="http://www.億速云.com/cssrumen/">CSS入門</a> </div>

通過(guò)以上兩種布局都能實(shí)現(xiàn)同樣導(dǎo)航條布局效果，但是DIVCSS5推薦使用ul li布局，哪怕多幾個(gè)ul li標(biāo)簽代碼也無(wú)妨。

這是為什么（推薦ul li）？

在不考慮網(wǎng)站優(yōu)化seo布局情況下，DIVCSS5是推薦不用ul li布局從而節(jié)約html代碼；但一般網(wǎng)站要考慮搜索引擎排名因素（SEO），此時(shí)如果不用ul li而是直接在一個(gè)盒子里放錨文本超鏈接的欄目名稱，雖然html代碼量減少了，但這樣搜索引擎容易認(rèn)為有堆砌關(guān)鍵字嫌疑（故意堆砌關(guān)鍵字容易被搜索引擎有降權(quán)的風(fēng)險(xiǎn)）。如果使用ul li列表標(biāo)簽布局，這個(gè)時(shí)候搜索引擎很容易辨別為有條理的列表型內(nèi)容（對(duì)搜索引擎蜘蛛更加友好）。

綜合以上描述，不難看出有時(shí)在div css網(wǎng)頁(yè)布局中考慮seo搜索引擎優(yōu)化時(shí)網(wǎng)頁(yè)布局適當(dāng)使用h2、h3、h4、h5、b、strong等標(biāo)簽必要性，如果在html css布局中對(duì)不同html 標(biāo)簽靈活使用，可能會(huì)得到意想不到的效果。當(dāng)然使用不同標(biāo)簽的使用適可而止，不要濫用后成為適得其反。

到此，相信大家對(duì)“CSS使用ul li布局網(wǎng)站導(dǎo)航條的原因是什么”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！