css导航
程序员文章站
2022-07-13 15:58:42
...
css样式
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: rgb(245, 245, 245);
}
li {
list-style: none;
}
/*nav*/
.nav {
background-color: rgba(23, 23, 23, 0.94);
height: 50px;
}
.nav > .nav_1 {
position: absolute;
width: 900px;
height: 50px;
margin-left: 500px;
z-index: 1000;
}
.nav_1 > li {
float: left;
}
.nav_1 > li {
font: 16px/50px '微软雅黑';
width: 80px;
text-align: center;
}
.nav_2 > li {
line-height: 35px;
display: none;
}
.nav_1 > li a:hover {
color: #fd572e;
width: 80px;
}
.nav_1 > li:hover .nav_2 > li {
display: block;
background-color: rgba(8, 8, 16, 0.83);
}页面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>导航</title>
<link rel="stylesheet" href="js/css.css">
</head>
<body>
<div style="height: 50px;"></div>
<div class="nav">
<ul class="nav_1">
<li><a href="" class="c">首页</a></li>
<li><a href="">产品</a>
<ul class="nav_2">
<li><a href="">产品一</a></li>
<li><a href="">产品二</a></li>
<li><a href="">产品三</a></li>
</ul>
</li>
<li><a href="">新闻</a></li>
<li><a href="">关于</a>
<ul class="nav_2">
<li><a href="">简介</a></li>
<li><a href="">历程</a></li>
</ul>
</li>
<li><a href="">帮助</a></li>
</ul>
</div>
<div style="height: 600px;"></div>
</body>
</html>
上一篇： android 调用第三方地图导航
下一篇： 收藏一些tips，仅作学习笔记