abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS-box</title> <style type="text/css"> *{ paddin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-box</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-size: 14px;
}
a{
text-decoration: none;
}
.clear{
clear: both;
}
.banner{
background: #000;
height: 60px;
}
.ban_left{
left: 20px;
position: relative;
}
.logo{
display: block;
height: 60px;
width: 140px;
background: url(http://www.php.cn/static/images/logo.png) no-repeat center center;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 100%;
}
ul{
display: inline-block;
line-height: 60px;
position: absolute;
left: 160px;
top: 0;
}
li{
list-style: none;
height: 55px;
line-height: 55px;
margin:0 10px;
text-align: center;
border-bottom:#000 solid 5px;
float: left;
position: relative;
display: inline-block;
}
li:hover,li:first-child:hover{
border-bottom:greenyellow solid 5px;
}
li:first-child{
background: #363c41;
border-bottom:#363c41 solid 5px;
}
li a{
color: #ccc;
padding: 0 20px;
}
li:hover a{
color: #FFF;
}
span{
border-style: solid dashed dashed;
border-color: #fff transparent transparent;
border-width: 6px;
top:50%;
right: 3px;
position: absolute;
}
.more:hover span{
border-style: dashed dashed solid;
border-color: transparent transparent #fff ;
top:30%;
right: 3px;
position: absolute;
}
.more dl{
display: none;
}
.more:hover dl{
width: 200px;
display:block;
position: absolute;
left: 0;
top: 65px;
line-height: 36px;
padding: 5px 0;
border: 1px solid #d2d2d2;
background-color: #fff;
border-radius: 2px;
white-space: nowrap;
margin: 0;
}
.more:hover dd{
float: left;
position: relative;
width: 100px;
}
.more:hover dd a{
width: 60px;
color: #333;
}
.more:hover dd:hover{
background: #CCC;
}
.more:hover dd:hover a{
color: #fff;
}
</style>
</head>
<body>
<div class="banner">
<div class="ban_left">
<div class="logo">
</div>
<ul>
<li><a href="">首页</a></li>
<li><a href="">视频教程</a></li>
<li><a href="">社区问答</a></li>
<li class="more"><a href="">编程词典<span></span></a>
<dl>
<dd><a href="">php词典</a></dd>
<dd><a href="">技术文章</a></dd>
<dd><a href="">jquery词典</a></dd>
<dd><a href="">PHP教程</a></dd>
<dd><a href="">html词典</a></dd>
<dd><a href="">小程序开发</a></dd>
</dl>
</li>
<li><a href="">手册下载</a></li>
<li><a href="">工具下载</a></li>
<li><a href="">类库下载</a></li>
<li><a href="">菜鸟学堂</a></li>
</ul>
</div>
</div>
</body>
</html>
Correcting teacher：灭绝师太Correction time：2018-11-20 09:02:55
Teacher's summary：完成的不错，代码有自己的风格 ，没有一味按照老师布局，继续加油！