怎么写横向导航用css

制作网站页面时，导航图标都是必不可少的部分，那么，如何用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;
}
.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="">横标的目的导航</a>
</li>
<li>
<a href="">横标的目的导航</a>
</li>
<li>
<a href="">横标的目的导航</a>
</li>
<li>
<a href="">横标的目的导航</a>
</li>
<li>
<a href="">横标的目的导航</a>
</li>
<li>
<a href="">横标的目的导航</a>
</li>
</ul>
</div>
</body>

</html>
END

发表于 2020-04-22 19:00
阅读 ( 855 )
分类：其他类型

怎么写横向导航用css

东西/原料

方式/步调

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »

推荐文章