5-2项目作业
来源：5-1 课程总结
qq_顺其自然_67
2018-07-18 11:40:36
为什么header标签和section标签会有一个边距，我放一行文字又没有了
<!DOCYPTE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>小网页</title>
<link rel="stylesheet" type="text/css" href="css/index.css" >
</head>
<body>
<header>
<span></span>
<img src="img/logo.jpg" />
<nav>
<a href="#">HOME</a>
<a href="#">PORTFOLIO</a>
<a href="#">TEAM</a>
<a href="#">CONTACTUS</a>
</nav>
</header>
<section class="container">
<p>Welcome to Website</p>
<span>Lorem ipsum dolor sit amet,consectetur adioisicing elit</span>
</section>
<section class="portfolio">
<h3>Portfolio</h3>
<p>Lorem insum dolor sit amet,consectetur adipisicing elit,sed
do eiusmodtempor incididunt ut labore et</p>
<p>dolore magna aliqua.Ut enim ad minim veniam</p>
<ul>
<li>ALL</li>
<li>WEB</li>
<li>SOFTWARE</li>
<li>WORKS</li>
<li>BRANDS</li>
</ul>
</section>
<section class="container">
<img src="img/portfolio-nav-img.jpg" />
</section>
<section class="container">
<div class="stats">
<h3>Stats</h3>
<p>Lorem insum dolor sit amet,consectetur adipisicing elit,sed
do eiusmodtempor incididunt ut labore et</p>
<p>dolore magna aliqua.Ut enim ad minim veniam</p>
<dl>
<dt><img src="img/stats1.jpg"></dt>
<dd>Margins</dd>
<dd>12,000</dd>
</dl>
<dl>
<dt><img src="img/stats2.jpg"></dt>
<dd>Completed</dd>
<dd>5,681</dd>
</dl>
<dl>
<dt><img src="img/stats3.jpg"></dt>
<dd>Projects</dd>
<dd>432</dd>
</dl>
<dl>
<dt><img src="img/stats4.jpg"></dt>
<dd>Customers</dd>
<dd>86</dd>
</dl>
</div>
</section>
<section class="container">
<h3>Team</h3>
<p>Lorem insum dolor sit amet,consectetur adipisicing elit,sed
do eiusmodtempor incididunt ut labore et</p>
<p>dolore magna aliqua.Ut enim ad minim veniam</p>
<dl>
<dt><img src="img/team1.jpg"></dt>
<dd>Abigail</dd>
<dd>Lorem ipsum dolor sit amet, consectetur</dd>
<dd>adipisic</dd>
</dl>
<dl>
<dt><img src="img/team2.jpg"></dt>
<dd>Andy</dd>
<dd>5Lorem ipsum dolor sit amet,</dd>
<dd>consectetur adipisic</dd>
</dl>
<dl>
<dt><img src="img/team3.jpg"></dt>
<dd>Jacqueline</dd>
<dd>Lorem ipsum dolor sit amet, consectetur</dd>
<dd>adipisic</dd>
</dl>
</section>
<section class="container">
<h2>Contact Us</h2>
<p>Lorem insum dolor sit amet,consectetur adipisicing elit,sed
do eiusmodtempor incididunt ut labore et</p>
<p>dolore magna aliqua.Ut enim ad minim veniam</p>
<form action="#" class="forms">
<input type="text" required placeholder="Full Name" />
<input type="email" required placeholder="Email" />
<textarea placeholder="message"></textarea>
<input type="submit" value="Submit Message" class="submitBtn" />
</form>
</section>
<footer>
Copyright © 2016.Company name
</footer>
</body>
</html>
CSS样式部分
body{
margin:0;
padding:0;
}
/*头部*/
header{
width:100%;
height:60px;
line-height:60px;
background-color:#2e2e2e;
}
header img {
margin-left:100px;
width:141px;
height:31px;
vertical-align:middle;
}
header span{
height:100%;
display:inline-block;
vertical-align:middle;
}
header nav{
float:right;
margin-right:100px;
}
header nav a{
text-decoration:none;
color:#fff;
padding-left:15px;
}
/*container-main,banner部分*/
.container{
background:url(../img/banner.jpg) no-repeat center;
width:100%;
height:670px;
}
1回答
-
不是很明白同学描述的问题,运行代码之后发现,因为P标签有默认填充值,导致中间有一条缝隙
建议设置*{margin: 0;padding: 0;}就可以啦~
0
相似问题