首頁 > web前端 > html教學 > html導覽列怎麼設定

html導覽列怎麼設定

coldplay.xixi
發布: 2023-01-04 09:38:44
原創
48917 人瀏覽過

html導覽列的設定方法:1、直接使用html5中的導覽列標籤【<nav></nav>】;2、可以無序列表,移除預設樣式設定浮動就可以; 3.設定超連結。

html導覽列怎麼設定

本文操作環境:Windows7系統,html5版本,Dell G3電腦。

推薦:HTML教學

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>
登入後複製

這是實際的效果,可以根據實際需要,去除下劃線和顏色等等

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>
登入後複製

這是實際的效果圖。

html導覽列怎麼設定

3、設定超連結

在這裡還想說的是,<ul>的子集元素只能是<li>,不可以是別的,HTML的語意很弱,標籤的使用很重要,在實際的網頁開發中,不同標籤的語意,權重都不一樣,所以,優化也不一樣。

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導覽列怎麼設定

更多程式相關知識,請造訪:程式設計教學! !

以上是html導覽列怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板