html導覽列怎麼設定-html教學-PHP中文網

首頁

web前端

html教學

html導覽列怎麼設定

coldplay.xixi

Jan 05, 2021 pm 04:12 PM

html 導覽列

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