效果如下
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代码
发布评论