HTML導航欄的多種製作方法
阿新 • • 發佈：2018-12-15
首先，大家可以直接使用html中的導航欄標籤<nav></nav>
具體程式碼如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>導航欄</title> </head> <body> <nav> <a href="#">首頁</a> <a href="#">新聞</a> <a href="#">關於我們</a> </nav> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> ul{ height: 100px; width:100%; list-style-type: none; //取消無序列表的固定樣式 } ul li{ float:left; margin: 20px; //設定三個元素的外間距 } </style> </head> <body> <ul> <li><a href="">首頁<a></li> <li><a href="">新聞<a></li> <li><a href="">關於我們<a></li> </ul> </body> </html>
第三種，設定超連結
在這裡還想說的是，<ul>的子集元素只能是<li>,不可以是別的，HTML的語義很弱，標籤的使用很重要，在實際的網頁開發中，不同標籤的語義，權重都不一樣，所以，優化也不一樣。