5-2编程问题
来源：5-2 作业题
我和猫都想你
2017-11-03 22:30:13
1.为啥每个区域的内容都不再我所设置的容器内呢。。。虽然效果做出来了 但是觉得好像有问题不知道怎么改。。（我已经用border标出来了）
2.stats、team区的内容用dl dt dd标签怎样让他们居中呢，我是用margin试出来的大概距离，或者有没有其他的方法来做这一部分
3.team区的背景颜色，我设置了高度，宽度为100%，然后内容无法把大的容器撑开也就是说除了图片那里有背景颜色，其余地方都没有，这个怎么做呢。。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/HTML5 5-2作业.css"/>
</head>
<body>
<header>
<div class="container ">
<a href="HTML5 5-2作业.html"><img src="img/HTML5 5-2作业/logo.jpg"/></a>
<nav>
<a href="#">HOME</a>
<a href="#">PROTFOLIO</a>
<a href="#">TEAM</a>
<a href="#">CONTACT US</a>
</nav>
</div>
</header>
<setion class="banner">
<img src="img/HTML5 5-2作业/banner.jpg"/>
<span class="text">Welcome To Website</span>
</setion>
<setion class="protflio">
<div class="pro-content">
<h1>Protfolio</h1>
<p>I have no text!</p>
<nav>
<a href="">ALL</a>
<a href="">WEB</a>
<a href="">SOFTWARE</a>
<a href="">WORKS</a>
<a href="">BRANDS</a>
</nav>
</div>
<img src="img/HTML5 5-2作业/portfolio-nav-img.jpg"/>
</setion>
<setion class="stats">
<h1>Stats</h1>
<p>I have no text!</p>
<dl>
<dt><img src="img/HTML5 5-2作业/stats1.jpg"/></dt>
<dd>Margins</dd>
<dd>12,000</dd>
</dl>
<dl>
<dt><img src="img/HTML5 5-2作业/stats2.jpg"/></dt>
<dd>Completed</dd>
<dd>5,681</dd>
</dl>
<dl>
<dt><img src="img/HTML5 5-2作业/stats3.jpg"/></dt>
<dd>Projects</dd>
<dd>432</dd>
</dl>
<dl>
<dt><img src="img/HTML5 5-2作业/stats4.jpg"/></dt>
<dd>Customers</dd>
<dd>86</dd>
</dl>
</setion>
<setion class="team">
<h1>Team</h1>
<p>I have no text!</p>
<dl>
<dt><img src="img/HTML5 5-2作业/team1.jpg"/></dt>
<dd>Abigail</dd>
<dd>I have no text!</dd>
</dl>
<dl>
<dt><img src="img/HTML5 5-2作业/team2.jpg"/></dt>
<dd>Andy</dd>
<dd>I have no text!</dd>
</dl>
<dl>
<dt><img src="img/HTML5 5-2作业/team3.jpg"/></dt>
<dd>Jacqueline</dd>
<dd>I have no text!</dd>
</dl>
</setion>
<setion class="contact_us">
<h1>Contact Us</h1>
<p>jklmkldassd</p>
<input type="text" placeholder="Full Name" />
<input type="email" placeholder="Email" />
<textarea name="" rows="5" cols="5" placeholder="Message"></textarea>
<input type="submit" id="" value="Submit message" />
</setion>
<footer>
<div>Copyright 2016.Company name</div>
</footer>
</body>
</html>
*{
margin: 0;
padding: 0;
font-family: "microsoft yahei"
}
a{
text-decoration: none;
}
.clearfix:after{
content: " ";
display: block;
height: 0;
line-height: 0;
clear: both;
zoom:1;
}
/*头部区域*/
header{
height: 80px;
background: #2e2e2e;
}
header > .container{
width: 1200px;
height: 80px;
margin: 0 auto;
}
header > .container > a{
display: block;
float: left;
margin-top: 25px;
}
header > .container > nav{
float: right;
}
header > .container > nav > a{
display: block;
height: 80px;
line-height: 80px;
float: left;
width: 100px;
text-align: center;
color: #fff;
font-size: 15px;
}
header > .container > nav > a:hover{
background: red;
color: #2e2e2e;
}
/*banner区域*/
.banner{
width: 100%;
border: 10px solid red;
}
.banner img{
width: 100%;
height: 400px;
}
.banner .text{
position: absolute;
top: 50%;
left: 50%;
font-size: 48px;
color: #fff;
text-align: center;
display:block;
width:800px;
height:100px;
line-height:100px;
margin-top: -100px;
margin-left: -400px;
}
/*protfolio区域*/
.protflio{
border: 10px solid yellow;
}
.protflio .pro-content{
height: 300px;
text-align: center;
}
.protflio .pro-content > h1{
font-size: 48px;
color: #f46208;
margin-bottom: 50px;
}
.protflio .pro-content > p{
font-size: 14px;
margin-bottom: 100px;
}
.protflio .pro-content nav{
}
.protflio .pro-content nav >a{
display: inline-block;
border: 1px solid #F46208;
width: auto;
height: 14px;
line-height: 14px;
font-weight: bold;
color: #F46208;
font-size: 14px;
text-align: center;
padding: 10px;
margin: 0 5px;
}
.protflio img{
width: 100%;
height: 400px;
}
/*stats区域*/
.stats{
height: 500px;
text-align: center;
border: 10px solid green;
}
.stats > h1{
font-size: 48px;
color: #F46208;
margin-top: 80px;
}
.stats > p{
font-size: 14px;
margin: 50px 0;
}
.stats > dl{
display: inline-block;
text-align: center;
margin: 0 50px;
}
.stats > dl:first-of-type{
margin-left: 360px;
}
.stats > dl > dd:first-of-type{
font-size: 14px;
margin: 30px 0;
}
.stats > dl > dd:last-of-type{
color: #F46208;
font-size: 30px;
}
/*team区域*/
.team{
height: 500px;
background: #000;
text-align: center;
width: 100%;
border: 10px solid blue;
}
.team > h1{
font-size: 48px;
color: #f46208;
margin-top: 80px;
}
.team > p{
font-size: 14px;
margin: 50px 0 ;
}
.team > dl >img{
width: 100%;
}
.team > dl{
display: inline-block;
/*margin: 0 100px;*/
}
图片就不知道咋传了，这是css和html的代码 麻烦各位老师呢！
1回答
-
1、可以给每个区域设置相应的高度，比如头部100px，banner区域500px，下面的以此类推。只要区域有内容，建议就给大区域设置高度，以免里面有浮动的元素，影响下面的元素。
2、可以给需要居中的元素，外层套一个大盒子，给这个大盒子设置一个定宽，然后再设置margin：0 auto；就可以实现居中的效果。
3、代码拼写错误：section。
祝学习愉快！
0
