溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“怎么用DIV+CSS代碼實現簡單導航條”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么用DIV+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設置寬度高度等款式收效。
詳細結構高度、顏色值、欄目間距隔絕距離均重要通過軟件得到（置信參預CSS5培訓同學都能應用軟件失去粗略穩重的花色值）
在引人CSS5初始化模板根本前途行案例代碼組織。
新增各代碼如下：
1、CSS代碼：
ul#nav{ width:100%; height:60px; bac公斤round:#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{bac公斤round:#0095BB}/*設置裝備擺設鼠標滑過或懸停時更動的后臺色彩*/這里ul和#nav緊貼不有空格，代表#nav只針對ul標簽配置，標簽只有ul標簽應用id=”nav”設置技倆本事收效。以上代碼沒有在ul外再設置DIV，多么能夠華侈一個DIV實現異樣構造。
2、HTML代碼
<ul id="nav"> <li><a href="//www.css5.com.cn/">首頁</a></li> <li><a href="//www.css5.com.cn/html/">HTML教程</a></li> <li><a href="//www.css5.com.cn/css/">CSS基礎底細</a></li> <li><a href="//www.css5.com.cn/tools/">CSS開荒器材</a></li> <li><a href="//www.css5.com.cn/texiao/">CSS特效</a></li> <li><a href="//www.css5.com.cn/wenti/">CSS問題</a></li>
</ul>
3、造詣截圖
CSS+DIV機關容易委瑣實用通用導航條在瀏覽器中造詣截圖
4、殘缺HTML源代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>小小簡單小氣通用導航條 CSS5實例</title> <link href="images/style.css" rel="stylesheet" type="text/css" /> <!-- css5.com.cn --> </head> <body> <ul id="nav"> <li><a href="//www.css5.com.cn/">首頁</a></li> <li><a href="//www.css5.com.cn/html/">HTML教程</a></li> <li><a href="//www.css5.com.cn/css/">CSS根底</a></li> <li><a href="//www.css5.com.cn/tools/">CSS開拓工具</a></li> <li><a href="//www.css5.com.cn/texiao/">CSS殊效</a></li> <li><a href="//www.css5.com.cn/wenti/">CSS問題</a></li> </ul> </body> </html>
5、完整CSS源代碼：
@charset "utf-8"; /* CSS5-CSS初始化模板-css5.com.cn */ body, div, ul, li{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} /* \5B8B\4F53 代表 宋體，更多中筆墨體轉 Unicode //www.css5.com.cn/jiqiao/325.shtml */ 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{bac千克round:#0095BB}以上就是關于“怎么用DIV+CSS代碼實現簡單導航條”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
