一般導航條采用ul li列表布局，這里也不例外，也采用列表標簽ul li + CSS布局。

在實際DIV+CSS布局項目中，一般不會只使用一次ul li列表，避免干擾其他地方使用ul li布局，避免對ul li設置樣式影響其他地方，所以特地這里對ul設置一個#nav命名（一般導航條以nav或menu為CSS命名，這里選擇nav），假如導航條背景寬度100%全屏或固定寬度均可，這里就由ul#nav控制，這里就設置100%全屏寬度藍色背景。

這里一個技術點，對ul里的li設置排成一排所以需要設置一個CSS display:inline讓li排成一排，從而讓li并排布局。

然后需要對ul li里的a標簽設置display:block的，但a父級li不設置具體寬度，所以需要對a設置display:inline-block讓其a隨li并排繼承同時對a設置寬度高度等樣式生效。

具體布局高度、顏色值、欄目間距距離均需要通過軟件獲得

具體案例p css代碼

在引人初始化模板基礎上進行案例代碼布局。

新增各代碼如下：

CSS代碼：

ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto} ul#nav li{display:inline; height:60px} ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px; color:#FFF; font-family: /5FAE/8F6F/96C5/9ED1 font-size:16px} ul#nav li a:hover{background:#0095BB}/*設置鼠標滑過或懸停時變化的背景顏色*/

這里ul和#nav緊貼沒有空格，代表#nav只針對ul標簽設置，標簽只有ul標簽使用id=”nav”設置樣式才能生效。

以上代碼沒有在ul外再設置DIV，這樣可以節約一個DIV實現同樣布局。

HTML代碼

 ul id= nav  li a href= http://www.php.com/ 首頁 /a /li  li a href= http://www.php.com/html/ HTML教程 /a /li  li a href= http://www.php.com/rumen/ CSS基礎 /a /li  li a href= http://www.php.com/css-tool/ CSS開發工具 /a /li  li a href= http://www.php.com/css-texiao/ CSS特效 /a /li  li a href= http://www.php.com/wenji/ CSS問題 /a /li  /ul 

完整HTML源代碼：

 !DOCTYPE html  html  head  meta charset= utf-8 /  title 小小簡單大方通用導航條 /title  link href= images/style.css rel= stylesheet type= text/css /  /head  body  ul id= nav  li a href= http://m.survivalescaperooms.com/ 首頁 /a /li  li a href= http://m.survivalescaperooms.com/ HTML教程 /a /li  li a href= http://m.survivalescaperooms.com/ CSS基礎 /a /li  li a href= http://m.survivalescaperooms.com/ CSS開發工具 /a /li  li a href= http://m.survivalescaperooms.com/ CSS特效 /a /li  li a href= http://m.survivalescaperooms.com/ CSS問題 /a /li  /ul  /body  /html 

完整CSS源代碼：

@charset utf-8 body, p, ul, li{margin:0; padding:0;font-style: normal;font:12px/22px /5B8B/4F53 ,Arial, Helvetica, sans-serif} /* /5B8B/4F53 代表 宋體 */ ol, ul ,li{list-style:none} img {border: 0; vertical-align:middle} body{color:#000000;background:#FFF; text-align:center} .clear{clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px} a{color:#000000;text-decoration:none} a:hover{color:#BA2636} .red ,.red a{ color:#F00} .lan ,.lan a{ color:#1E51A2} .pd5{ padding-top:5px} .dis{display:block} .undis{display:none} ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto} ul#nav li{display:inline; height:60px} ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px; color:#FFF; font-family: /5FAE/8F6F/96C5/9ED1 font-size:16px} ul#nav li a:hover{background:#0095BB}

這樣就是一份完整的導航條了，用我們的CSS和DIV來實現的，有興趣的朋友可以深度研究一下。

相關閱讀：

HTML里的checkbo怎么使用

鏈接樣式怎么用CSS設置

怎么用css寫虛線邊框

以上就是怎樣用DIV和CSS做導航條的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。