效果如下
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;
}
