怎么写横向导航用css _HBuilder

制作网站页面时，导航图标都是必不可少的部分，那么，如何用css来制作简单的横向导航呢？
需要这些哦
HBuilder
Adobe Dreamweaver
方式/
1第一步，新建html页面
在html编纂器软件内，新建html页面，（一般我们常利用的两条目编纂器是HBuilder和Adobe Dreamweaver，这里我利用的软件是HBuilder）。如图：

文章插图

2第二步，添加导航的标签
在<body></body>添加<div class="nav"></div>,于<div class="nav"></div>中心添加<ul></ul>,在<ul>内添加<li>标签，<li>内同时添加<a>标签，便利毗连导航跳转。如图：

文章插图

3第三步，添加导航内容
在新建的<a></a>内，添加横标的目的导航要显示的内容。如图：

文章插图

4第四步，建立样式标签
在<title></title>下方添加一个<style type="text/css"></style>

文章插图

5第五步，建立横标的目的导航的样式代码
在<style>标签里添加一个样式类为：.nav宽度为1200像素，在整个页面摆布居中；.nav ul li断根失落li的自带样式，li的每个宽度为180像素，li左浮动，实现横标的目的导航样式，布景为红色，高度为30像素，为了上下居中，行高应与li高度一致，文字摆布居中；a标签去失落下划线，给字体颜色为白色。
样式代码为：
.nav{ width: 1200px; margin-left: auto; margin-right: auto;}
.nav ul li{
list-style: none;
width:180px;
float: left;
height: 30px;
line-height: 30px;
background: red;
text-align: center;
}
【怎么写横向导航用css】 .nav ul li a {
text-decoration: none;
color: #fff;

}
如图：

文章插图

6第六步，结果预览
源文件html保留后，利用浏览器打开预览结果。如图：

文章插图

7所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>横标的目的导航</title>
<style type="text/css">
.nav {
width: 1200px;
margin-left: auto;
margin-right: auto;
}

.nav ul li {
list-style: none;
width: 180px;
float: left;
height: 30px;
line-height: 30px;
background: red;
text-align: center;
}

.nav ul li a {
text-decoration: none;
color: #fff;
}
</style>
</head>

<body>
<div class="nav">
<ul>
<li>
<a href=https://vvvtt.com/article/"">横标的目的导航
</li>
<li>
<a href=https://vvvtt.com/article/"">横标的目的导航
</li>
<li>
<a href=https://vvvtt.com/article/"">横标的目的导航
</li>
<li>
<a href=https://vvvtt.com/article/"">横标的目的导航
</li>
<li>
<a href=https://vvvtt.com/article/"">横标的目的导航