CSS教程 设置一个导航栏
CSS教程 设置一个导航栏
一、通过把块元素转化成行内元素
二、通过浮动然后按下浮动
三、通过固定来控制
一、把块状元素转化成行内元素：
1、list-style-tyoe:nome; 列表符号类型，可以转换成有序列表，也可以省略列表符号。
2、text-decoration:none; 用于a连接去点装饰，也就是去掉下划线。
3、：hover{} 鼠标滑动时候显示
4、display: inline-block; 装换成行内块状元素
5、vertical-align: middle; y轴居中
6、单行省略号：
overflow：hidden；
text-overflow：ellipsis；
white-space：nowrap；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.header{
background-color: pink;
}
.header>ul{
margin: 0;
padding: 0;
}
.header>ul>li{
list-style-type: none;
display: inline-block;
padding: 10px;
}
.header>ul>li>a{
text-decoration: none;
}
.header>ul>li:hover{
background-color: red;
}
.header>ul>li:hover>a{
color: #fff;
}
</style>
</head>
<body>
<div class="header">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>二、通过浮动然后按下浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.header{
background-color: rgba(100, 100, 100, 0.5);
}
.header>ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.header>ul>li{
display: block;
float: left;
padding: 5px;
}
.header>ul>li>a{
text-decoration: none;
}
.header>ul::after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="header">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>三、通过固定来控制
通过固定可以控制位置：
文章作者：刘广法，转载请注明出处。
