H5培训_H5导航制作
1.导航栏（nav）实现效果导航栏主要分为两种：水平导航栏和垂直导航栏，其中水平导航栏又有普通导航栏与简约导航栏等样式设置。
2.实现思路：导航栏的实现主要使用ul标签或ol结合li列表，a标签，设置a标签为块元素，可为其设置宽高，将其向左浮动就可形成水平导航栏，取消其默认的原点与下划线样式，并为鼠标移入时增加样式，颜色较深的背景色的导航栏，鼠标移入时，多会修改移入部分背景色，背景为白色的导航栏在鼠标移入时，可为其添加下滑线等样式，以追求其美观性。
例子：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style>
.nav li{
background-color: black;
float: left;
list-style: none;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
color: white;
}
.nav li:hover{
color: white;
font-weight: bold;
background: deeppink
}
</style>
</head>
<body>
<ul class=’nav’>
<li>首页</li>
<li>公司简历</li>
<li>产品中心</li>
<li>联系方式</li>
</ul>
</body>
</html>
总结采用无序列表UI制作导航栏效果，结合li与a标签使用。
985大学 211大学 全国院校对比 专升本
温馨提示：
