html（css）实现⽔平导航
⽔平导航：
实现效果图
⿏标放上去会有阴影：
代码：直接把css⽂件放到style这个标签，可以⾃⾏分离
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏的制作</title>
<link type="text/css" rel="stylesheet" href="#">
/*如果需要css⽂件，把这改成⾃⼰的路径，代码粘贴即可*/
<style>
*{
margin:0;
padding:0;
font-family:"microsoft yahei"，宋体,arial, helvetica,sans-serif;
font-size:0.75rem;
font-style: normal;
}
li,ul,img,a,div{
border:0;
list-style: none;
}
div{
display: block;
}
a{
color:#333333;
text-decoration: none;
outline: none;
}
em{
font-weight: normal;
}
}
.ue-bar{
background-color:#000000; }
.ue-bar-wrap{
width:61.25rem;
height:4.375rem;
margin:0 auto;
overflow: hidden;
position: relative;
}
.ue-bar-logo{
width:8.375rem ;
height:3.125rem;
float: left;
padding-right:0.625rem;
padding-top:0.5rem;
}
.ue-bar-logo a{
display: inline-block;
html导航源码width:100%;
height:100;
margin-top: 12px;
}
.ue-bar-nav{
height: 70px;
float: left;
}
.ue-bar-nav li{
height: 70px;
float: left;
margin-right: 20px;
}
.ue-bar-nav li *{
color:#dadada;
font-size: 14px;
display: inline-block;
line-height: 17px;
vertical-align: top;
}
.ue-bar-nav li a{
height: 12px;
line-height: 22px;
padding: 26px 17px;
}
.ue-bar-nav li.active{
background:#333;
}
.ue-bar-nav li a:hover{
background:#333;
}
</style>
</head>
<body>
<!--⽔平导航栏的制作-->
<div class="ue-bar">
<div class="ue-bar-wrap"> <div class="ue-bar-logo">
<div class="ue-bar-logo">
<a href="#">
<img src="../Image/899bba22afea88a2d0353f0c95920ac0.jpg"      width="30" height="30" alt="hello" title="world"/>
</a>
</div>
<div class="ue-bar-nav">
<ul>
<li class="active"><a href="#">
<em>⾸页</em></a></li>
<li><a href="#">
<em>秒杀</em></a></li>
<li><a href="#">
<em>优惠卷</em></a></li>
<li><a href="#">
<em>VIP会员</em></a></li>
<li><a href="#">
<em>品牌</em></a></li>
<li><a href="#">
<em>拍卖</em></a></li>
<li><a href="#">
<em></em></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

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