CSS使用ul li布局網站導航條的原因是什么

本篇內容主要講解“CSS使用ul li布局網站導航條的原因是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS使用ul li布局網站導航條的原因是什么”吧!

會布局的都知道網站導航條布局非常重要，可能一個導航條最終布局效果有時可以使用ul li列表標簽布局，有時可以不用ul li布局，而是直接一個div盒子里直接放錨文本超鏈接的欄目名稱，也能實現，看下圖。

假如要布局出這樣簡單導航條效果

比如以下代碼：

1、可以使用Ul li布局導航條

<ul>     <li><a href="http://www.億速云.com/">網站首頁</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/">網站首頁</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>

通過以上兩種布局都能實現同樣導航條布局效果，但是DIVCSS5推薦使用ul li布局，哪怕多幾個ul li標簽代碼也無妨。

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

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

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

到此，相信大家對“CSS使用ul li布局網站導航條的原因是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！