H5培训_H5导航制作

发布时间： 2019-08-18 17:32:56

　　H5培训_H5导航制作

　　1.导航栏（nav）实现效果
　　导航栏主要分为两种：水平导航栏和垂直导航栏，其中水平导航栏又有普通导航栏与简约导航栏等样式设置。
　　2.实现思路：
　　导航栏的实现主要使用ul标签或ol结合li列表，a标签，设置a标签为块元素，可为其设置宽高，将其向左浮动就可形成水平导航栏，取消其默认的原点与下划线样式，并为鼠标移入时增加样式，颜色较深的背景色的导航栏，鼠标移入时，多会修改移入部分背景色，背景为白色的导航栏在鼠标移入时，可为其添加下滑线等样式，以追求其美观性。
　　例子：
　　<!DOCTYPE html>
　　<html>
　　<head>
　　<meta charset="UTF-8">
　　<title>导航条</title>
　　<style>
　　.nav li{
　　/*border: black solid 1px;*/
　　background-color: black;
　　float: left;
　　/*列表的点去掉*/
　　list-style: none;
　　width: 100px;
　　height: 30px;
　　text-align: center;
　　/*当行高等于父容器高度的时候，文字垂直方向居中*/
　　line-height: 30px;
　　color: white;
　　}
　　/*当鼠标放上去，改变btn的颜色*/
　　.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标签使用。