纯css完成的往下拉导航栏栏附html构造及css款式

日期:2021-03-08 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

这里是html文档

拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<title>导航栏栏</title>
<meta http-equiv="content-type" content="text/html; charset=UTF⑻">
<link rel="stylesheet" type="text/css" href="css/navigator.css">
</head>
<body>
<div class="navigator">
<ul>
<li>
<a href="#">AAAA</a>
<ul>
<li><a href="#">A1</a></li>
<li><a href="#">A2</a></li>
<li><a href="#">A3</a></li>
<li><a href="#">A4</a></li>
<li><a href="#">A5</a></li>
<li><a href="#">A6</a></li>
</ul>
</li>
<li>
<a href="#">BBBB</a>
<ul>
<li><a href="#">B1</a></li>
<li><a href="#">B2</a></li>
<li><a href="#">B3</a></li>
<li><a href="#">B4</a></li>
<li><a href="#">B5</a></li>
<li><a href="#">B6</a></li>
</ul>
</li>
<li>
<a href="#">CCCC</a>
<ul>
<li><a href="#">C1</a></li>
<li><a href="#">C2</a></li>
<li><a href="#">C3</a></li>
<li><a href="#">C4</a></li>
<li><a href="#">C5</a></li>
<li><a href="#">C6</a></li>
</ul>
</li>
<li>
<a href="#">DDDD</a>
<ul>
<li><a href="#">D1</a></li>
<li><a href="#">D2</a></li>
<li><a href="#">D3</a></li>
<li><a href="#">D4</a></li>
<li><a href="#">D5</a></li>
<li><a href="#">D6</a></li>
</ul>
</li>
<li>
<a href="#">EEEE</a>
<ul>
<li><a href="#">E1</a></li>
<li><a href="#">E2</a></li>
<li><a href="#">E3</a></li>
<li><a href="#">E4</a></li>
<li><a href="#">E5</a></li>
<li><a href="#">E6</a></li>
</ul>
</li>
<li>
<a href="#">FFFF</a>
<ul>
<li><a href="#">F1</a></li>
<li><a href="#">F2</a></li>
<li><a href="#">F3</a></li>
<li><a href="#">F4</a></li>
<li><a href="#">F5</a></li>
<li><a href="#">F6</a></li>
</ul>
</li>
<li>
<a href="#">GGGG</a>
<ul>
<li><a href="#">G1</a></li>
<li><a href="#">G2</a></li>
<li><a href="#">G3</a></li>
<li><a href="#">G4</a></li>
<li><a href="#">G5</a></li>
<li><a href="#">G6</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

下面是css文档

拷贝编码
编码以下:

.navigator{/*自然,宽度能够你自身界定*/
width: 100%;
margin: 0;
}
.navigator ul{/*这里务必设定内边距和外边距,由于访问器会全自动给ul设置值,会把导航栏栏挤歪*/
padding: 0;
margin: 0;
list-style-type: none;
}
.navigator li{/*原本ul是垂直排序的,对全部li元素开展float:left他就会全自动所有靠左*/
float: left;
position :relative;
}
.navigator ul li a,.navigator ul li a:visited {/*这里设定text-decoration是以便避免a标识自身的款式*/
display: block;
text-align: center;
text-decoration: none;/*不对文字设定实际效果 */
width: 184px;/*每块的宽度*/
height: 50px;/*每块的高宽比*/
color: black;/*文本色调 */
border: 1px solid #fff;/*边框尺寸和色调 */
border-width: 1px 1px 0 0;/*4个边框的宽度 ,留意,上下边框沒有像素哦,细心看导航栏栏上下有间隙*/
background: #CCCCCC;/*情况色调 */
line-height: 50px;/*这是1个技能,这里将height和line-height设定为1样的高宽比文本就会水平垂直垂直居中 */
font-size: 17px;
}
.navigator ul li:hover a {/*这是1个css伪类,将电脑鼠标移上去的情况下字体样式和情况都会变色,移开又会变回家 */
color: #fff;
background: #CCCCFF;
}
.navigator ul li ul {/*这里是以便将导航栏栏里的內容掩藏*/
display: none;
}
.navigator ul li:hover ul {/*这里便是弹出的往下拉菜单了*/
display: block;
position: absolute;
top: 51px;
left: 0;
width: 185px;
}
.navigator ul li:hover ul li a {/*这里自然是界定往下拉菜单里的a标识了*/
display: block;
background: #CCFFFF;
color: #000;
}
.navigator ul li:hover ul li a:hover {/*这个是伪类,上面有说*/
background: #dfc184;
color: #000;
}

把css文档和html文档放在1个文件目录下便可以看了,有不当之处的地区还请纠正
上一篇:法宁格智能化武器装备 返回下一篇:没有了