abstract：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS-box</title> <style type="text/css"> *{ padding: 0; margin: 0;
<!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;
}
.search:hover{
border-bottom: none;
}
input{
height: 26px;
border: none;
border-bottom: 1px solid #CCC;
width: 100%;
}
.layui-icon{
color: #adaaaa;
position: absolute;
right: 23px;
top: 5px;
}
</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>
<li class="search">
<input type="text" id="key_words" placeholder="输入关键词搜索" style="background:#000" >
<a href="javascript:;" onclick="">
<i class="layui-icon">？</i></a><!--？代替放大镜图标-->
</li>
</ul>
</div>
</div>
</body>
</html>
Correcting teacher：天蓬老师Correction time：2019-01-18 14:18:10
Teacher's summary：*{
padding: 0;
margin: 0;这样的样式重置,并不推荐, 你的页面中用到了哪个标签 , 就重置哪个, 写出标签名好些