极客观点
项目管理
HarmonyOS
为什么检查元素时发现ul产生了一个16px的上下margin,ul设置了margin:0;padding:0;
<div class="nav ">
<div class="nav-left"></div>
<div class="nav-mid">
<ul class="nav-mid-left">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">新闻动态</a></li>
<li><a href="#">课程中心</a></li>
<li><a href="#">在线课程</a></li>
<li><a href="#">人才招聘</a></li>
</ul>
<form action="" method="post" class="nav-mid-right">
<input type="text" class="search-txt">
</form>
</div>
<div class="nav-right"></div>
</div>
@charset="utf-8"
html, body, ul, li, img, div, span, input, form,a{
margin: 0;
padding: 0;
font-size: 12%;
}
body{
background: #f5f5f5;
}
ul li{
list-style: none;
}
a{
text-decoration: none;
}
.top{
width: 100%;
height: 27px;
background: url(../images/top_bg.jpg) repeat-x;
}
.top-content{
width: 1000px;
line-height: 27px;
height: 27px;
margin: 0 auto;
}
.top-content li{
float: right;
list-style: url(../images/arrow.jpg);
width: 90px;
}
.top-content a:link, .top-content a:visited {
color: #8E8E8E;
text-decoration: none;
}
.top-content a:hover, .top-content a:active {
color: #C00;
text-decoration: none;
}
.wrap {
width: 1000px;
margin: 0 auto;
}
.logo{
background: #fff;
height: 80px;
}
.logo-left{
float: left;
}
.logo-right {
height: 28px;
margin-top: 30px;
float: right;
display: inline;
color: #8E8E8E;
}
.logo-right img {
vertical-align: middle;
margin-right: 10px;
}
/* nav开始 */
.nav {
height: 40px;
width: 1000px;
margin: 0 auto;
}
.nav-left {
width: 10px;
background: url(../images/nav_left.jpg) no-repeat;
}
.nav-mid {
width: 980px;
background: url(../images/nav_bg.jpg) repeat-x;
}
.nav-right {
width: 10px;
background: url(../images/nav_right.jpg) no-repeat;
}
.nav-left, .nav-mid, .nav-right{
height: 40px;
float: left;
}
.nav-mid-left{
width:680px;
height: 40px;
line-height: 40px;
float: left;
}```
![图片描述][1]
ul的默认样式,直接对ul设置margin:0就好了,假设你的css文件叫index.css,然后引入它,文件内就是你写的那些样式(以下代码的第二部分)
===============================html==========================
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
==============================index.css=========================
html, body, ul, li, img, div, span, input, form,a{
}
body{
}
ul li{
}
a{
}
.top{
}
.top-content{
}
.top-content li{
}
.top-content a:link, .top-content a:visited {
}
.top-content a:hover, .top-content a:active {
}
.wrap {
}
.logo{
}
.logo-left{
}
.logo-right {
}
.logo-right img {
}
/ nav开始 /
.nav {
}
.nav-left {
}
.nav-mid {
}
.nav-right {
}
.nav-left, .nav-mid, .nav-right{
}
.nav-mid-left{
}