H5+CSS3实现简单的导航条效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style>
.btns{
/*border: black solid 1px;*/
background-color: black;
float: left;
/*列表的点去掉*/
list-style: none;
width: 100px;
height: 30px;
text-align: center;
/*当⾏⾼等于⽗容器⾼度的时候，⽂字垂直⽅向居中*/
line-height: 30px;
color: white;
}
/*当⿏标放上去，改变btn的颜⾊*/
.
btns:hover{
color: white;
font-weight: bold;
background: deeppink
}
</style>
</head>
<body>
<!--01. ul li 布局；
02.float：left；
03.border
-
->
<ul>
<li class="btns">⾸页</li>
<li class="btns">菜单</li>
<li class="btns">订单</li>
<li class="btns">定位</li>
<li class="btns">⽤户</li>
</ul>css特效文字
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。