老师。这样写可以吗？
来源：4-2 侧边栏导航跟随案例
慕村602346
2019-03-09 14:42:08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.page {
background: url(mooc.png) no-repeat center top;
width: 100%;
height: 4000px;
}
.nav {
width: 200px;
height: 258px;
left: 0;
top: 50%;
margin-top: -129px;
position: fixed;
}
.nav-li {
width: 200px;
height: auto;
line-height: 50px;
text-align: center;
background: black;
color: white;
font-size: 14px;
border-bottom: 1px solid white;
}
.nav-li ul {
width: 200px;
height: auto;
display: none;
}
.nav-li:hover ul {
display: block;
}
.nav-li ul li {
width: 200px;
height: 40px;
background: white;
color: black;
font-size: 14px;
border-bottom: 1px dashed black;
text-align: center;
line-height: 40px;
position: relative;
}
.tit {
width: 200px;
height: 40px;
}
.list-3 {
width: 200px;
height: auto;
position: absolute;
left: 200px;
top: 0px;
border: 1px solid gray;
display: none;
}
.list-3dom {
width: 200px;
height: 40px;
background: gray;
color: white;
text-align: center;
line-height: 40px;
border: 1px solid white;
}
.nav-li ul li:hover .list-3 {
display: block;
}
</style>
</head>
<body>
<div class="page"></div>
<div class="nav">
<div class="nav-li">
<div class="tit">慕课网的标题</div>
<ul>
<li>二级栏目
<div class="list-3">
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
</div>
</li>
<li>二级栏目
<div class="list-3">
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
</div>
</li>
<li>二级栏目<div class="list-3">
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">慕课网的标题
<ul>
<li>二级栏目<div class="list-3">
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
</div>
</li>
<li>二级栏目<div class="list-3">
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
</div>
</li>
<li>二级栏目<div class="list-3">
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">慕课网的标题
<ul>
<li>二级栏目<div class="list-3">
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
</div>
</li>
<li>二级栏目<div class="list-3">
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
</div>
</li>
<li>二级栏目<div class="list-3">
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">慕课网的标题
<ul>
<li>二级栏目<div class="list-3">
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
</div>
</li>
<li>二级栏目<div class="list-3">
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
</div>
</li>
<li>二级栏目<div class="list-3">
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">慕课网的标题
<ul>
<li>二级栏目<div class="list-3">
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
</div>
</li>
<li>二级栏目<div class="list-3">
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
</div>
</li>
<li>二级栏目<div class="list-3">
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
<div class="list-3dom">三级栏目</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>有没有什么错误？有哪些需要改进的地方吗？
写回答
1回答
-
Steve007
2019-03-10
同学，你好。这样写是可以的，效果实现的不错，加油，继续努力。
祝学习愉快！
0
相似问题