导航栏html代码效果如下
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>导航制作</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/public.css">
</head>
<body>
<!-- 导航 -->
<nav class="pageNav">
<ul class="list">
<li><a href="#" target="_blank"><span>⾸页</span></a></li>
<li><a href="#" target="_blank"><span>公司产品</span></a></li>
<li><a href="#" target="_blank"><span>公司介绍</span></a></li>
<li><a href="#" target="_blank"><span></span></a></li>
<li><a href="#" target="_blank"><span>招聘⼈才</span></a></li>
</ul>
</nav>
<!-- 导航 end -->
</body>
</html>
css 代码
.pageNav{
height: auto;
width:100%;
margin-left: 0;
background:#FF0000;
position: fixed;
top: 0;
margin-bottom: 5px;
font-size: 15px;
transform: skewX( 30deg); display: block;
}
a{
height: 40px;
line-height: 40px;
background-color:#f00;
color: #fff;
padding-left: 40px;
padding-right: 40px;
text-align: center;
text-decoration: none;
margin-left: auto;
margin-right: auto;
border-radius: 10px 0; }
a:hover{
background-color: #00aaff; }
li{
list-style-type: none;
float: left;
display: block;
position: inherit;
margin-right: 20px;
transform: skewX(-30deg);  }
.pageNav a{
transition: all 0.5s;
}
公⽂样式
*{
margin:0; padding:0;
}
ol,ul,li{
list-style:none;
}
a{
text-decoration: underline; }
ins,a{
text-decoration:none;
html代码转链接}

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