做一个网页跟随导航栏
1.跟随栏无论随着网页的拖动，始终固定在一个相对位置。
2.跟随栏有4个选择，每个选择有3个选项
3.每个选择开始时是折叠的，并不显示细项内容。如下图
[Css]小成果（层叠跟随导航栏），顺便来看看手绘
4.鼠标在选择上浮动。选项则变成效果如图2
[Css]小成果（层叠跟随导航栏），顺便来看看手绘
代码构思：要用到的元素有div,ul,li
正文：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>followed-nav</title>
<style>
*{
padding: 0px;
margin:0px;
}
body,html{
height: 1500px;
width: 100%;
}
.page{
height: 1500px;
width: 100%;
}
.nav{
width: 160px;
height: auto;
position: fixed;
left: 0px;
top: 50%;
margin-top: -83px;
}
.nav-li{
width: 160px;
height: auto;
border-bottom: 1px solid #fff;
background-color: #798285;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 16px;
}
.nav-li ul{
width: 100%;
height: auto;
background-color: #eef4f7;
display: none;
cursor: pointer;
}
.nav-li:hover ul{
display: block;
}
.nav-li ul li{
width: 160px;
height: 40px;
border-bottom: 1px #666 dashed;
color: #333;
text-align: center;
line-height: 40px;
}
.tit{
width: 160px;
height: 40px;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div class="page">
<div class="nav">
<div class="nav-li">导航1
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
</div>
<div class="nav-li"><div class="tit">导航2</div>
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul></div>
<div class="nav-li"><div class="tit">导航3</div>
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul></div>
<div class="nav-li"><div class="tit">导航4</div>
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
</div>
</div>
</div>
</body>
</html>
效果图：
[Css]小成果（层叠跟随导航栏），顺便来看看手绘
Alert:明天要添加开发期间出现的问题。
网友评论