溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關html導航欄如何設置，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
html導航欄的設置方法：1、直接使用html5中的導航欄標簽【<nav></nav>】；2、可以無序列表，去除默認樣式設置浮動就可以；3、設置超鏈接。
html導航欄的設置方法：
1、首先，大家可以直接使用html5中的導航欄標簽<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>
這是實際的效果，可以根據實際需要，去除下劃線和顏色等等
2、接下來可以無序列表，去除它的默認樣式設置浮動就可以了，具體的代碼如下
<!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>這是實際的效果圖。
3、設置超鏈接
在這里還想說的是，<ul>的子集元素只能是<li>，不可以是別的，HTML的語義很弱，標簽的使用很重要，在實際的網頁開發(fā)中，不同標簽的語義，權重都不一樣，所以，優(yōu)化也不一樣。
4、可以使用bootstrap，大家可以看一下具體的代碼和詳細的注釋。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>bootstrap的學習</title> <!--導入基本樣式--> <link style="text/css" rel="stylesheet" href="css/bootstrap.css"> <!--導入基本樣式的壓縮--> <link style="text/css" rel="stylesheet" href="css/bootstrap.min.css"> <!--導入主題樣式 注意：順序 不可變--> <link style="text/css" rel="stylesheet" href="css/bootstrap-theme.css"> </head> <body> <!--類nav清除列表的默認樣式 nav-tabs定義tabs的標題欄--> <ul class="nav nav-tabs"> <li><a href="#tab2" data-toggle=tab">首頁</a></li> <li><a href="#tab2" data-toggle=tab">關注</a></li> <li><a href="#tab2" data-toggle=tab">個人中心</a></li> </ul> </body> </html>
實際效果如下
關于“html導航欄如何設置”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
