portfolio那块不会排布了弄懵了布局不应该这个样子啊

来源：5-2 作业题

qq_浮巷旧人_0

2019-02-24 01:08:24

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>h5项目作业</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header>
<div class="container">
<a href="#"><img src="img/logo.jpg"></a>
<nav>
<a href="index.html" class="home">HOME</a>
<a href="index.html" class="portfolio">PORTFOLIO</a>
<a href="index.html" class="team">TEAM</a>
<a href="index.html" class="contact">CONTACT US</a>
</nav>
</div>
</header>

<section class="banner">
<dl>
<dt>Welcome to Website</dt>
<dd>Lorem ipsum dolor sit amet,consectetur adipisicing elit</dd>
</dl>
</section>
<section class="portfolio">
<dl>
<dt>Portfolio</dt>
<dd>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmodtempor incididunt ut labore et<br>
dolore magna aliqua.Ut enim ad minim veniam
</dd>
</dl>
<div class="btn">
<button>ALL</button>
<button>WEB</button>
<button>SOFTWARE</button>
<button>WORKS</button>
<button>BRANDS</button>
</div>
<div class="pic"></div>
</section>
<section class="stats">
<h1>Stats</h1>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmodtempor incididunt ut labore et<br>
dolore magna aliqua.Ut enim ad minim veniam</p>
<div class="statsPic first">
<p class="img"><img src="img/stats1.jpg"></p>
<p class="Word">Margins</p>
<p class="num">12,000</p>
</div>
<div class="statsPic">
<p class="img"><img src="img/stats2.jpg"></p>
<p class="Word">Completed</p>
<p class="num">5,681</p>
</div>
<div class="statsPic">
<p class="img"><img src="img/stats3.jpg"></p>
<p class="Word">Projects</p>
<p class="num">432</p>
</div>
<div class="statsPic">
<p class="img"><img src="img/stats4.jpg"></p>
<p class="Word">Customers</p>
<p class="num">86</p>
</div>
</section>
<section class="team">
<h1>Team</h1>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmodtempor incididunt ut labore et<br>
dolore magna aliqua.Ut enim ad minim veniam</p>
<div class="teamPic first">
<p class="img"><img src="img/team1.jpg"></p>
<p class="name">Abigail</p>
<p class="words">Lorem ipsum dolor sit amet, consectetur <br> adipisic </p>
</div>
<div class="teamPic">
<p class="img"><img src="img/team2.jpg"></p>
<p class="name">Andy</p>
<p class="words">5Lorem ipsum dolor sit amet, <br> consectetur adipisic </p>
</div>
<div class="teamPic">
<p class="img"><img src="img/team3.jpg"></p>
<p class="name">Jacqueline</p>
<p class="words">Lorem ipsum dolor sit amet, consectetur <br> adipisic </p>
</div>
</section>
<section class="contactus">
<h1>Contact Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et<br>
dolore magna aliqua. Ut enim ad minim veniam</p>
<form>
<input type="text" placeholder=" Full Name" class="username">
<input type="email" placeholder=" Email" class="email">
<textarea placeholder=" Message" cols="30" rows="10"></textarea>
</form>
<input type="submit" value="Submit Message" class="submit">
</section>
<footer>
<div>Copyright © 2016.Company name</div>
</footer>
* {
padding: 0;
margin: 0;
border: 0;
font-family: Microsoft YaHei UI;
font-size: 14px;
}

a {
text-decoration: none;
color: #ffffff;
}

/*顶部*/
header {
height: 80px;
background: #2e2e2e;
}

header .container {
width: 1200px;
margin: 0 auto;
}

header > .container > a {
display: block;
float: left;
margin: 25px 15px;
}

header > .container > nav {
float: right;
}

header > .container > nav > a {
display: block;
float: left;
width: 110px;
height: 80px;
line-height: 80px;
text-align: center;
margin-left: 10px;
}

header > .container > nav > a:hover {
color: #f46208;
}

/*banner区*/
.banner {
height: 800px;
background: url(../img/banner.jpg) no-repeat;
background-size: 100% 100%;
color: #ffffff;
text-align: center;
position: relative;
}

.banner > dl {
height: 200px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto auto;
text-align: center;
}

.banner > dl > dt {
font-size: 75px;
word-spacing: 30px;
}

.banner > dl > dd {
font-size: 20px;
}

.portfolio {
height: 1000px;
position: relative;
}

.portfolio > dl {
height: 200px;
position: absolute;
left: 0;
right: 0;
margin: 100px auto;
text-align: center;
}

.portfolio > dl > dt {
font-size: 48px;
color: #f46208;
margin-bottom: 30px;
letter-spacing: 10px;
}

.portfolio > .btn {
position: absolute;
left: 0;
right: 0;
margin: 300px auto;
text-align: center;
}

.portfolio > div > button {
border: 1px solid #f46208;
color: #f46208;
background-color: transparent;
padding: 5px;
margin-left: 10px;
}
.portfolio > div > button:hover{
background-color:#f46208;
color:#fff;
}
.portfolio > .pic {
height: 500px;
background: url(../img/portfolio-nav-img.jpg) no-repeat;
background-size: 100% 100%;
margin-top: 400px;
}

.stats {
height: 500px;
text-align: center;
}

.stats h1 {
color: #f46208;
font-size: 48px;
letter-spacing: 10px;
font-weight: normal;
}

.stats p {
margin-top: 30px;
}

.stats > .statsPic {
float: left;
width: 250px;
margin-top: 30px;
}

.stats > .first {
margin-left: 280px;

}

.stats > .statsPic > p.Word {
font-size: 20px;
font-weight: bold;
}

.stats > .statsPic > p.num {
color: #f46208;
letter-spacing: 5px;
font-size: 30px;
}

.team {
height: 700px;
background-color: #2e2e2e;
color: #ffffff;
text-align: center;
}

.team h1 {
color: #f46208;
font-size: 48px;
letter-spacing: 10px;
font-weight: normal;
padding-top: 100px;
margin-bottom: 30px;
}

.team p.img {
margin-top: 70px;
}

.team .teamPic {
float: left;
width: 250px;
margin-left: 70px;
}

.team .first {
margin-left: 350px;
}

.contactus {
height: 800px;
text-align: center;
position: relative;
}

.contactus h1 {
color: #f46208;
font-size: 48px;
letter-spacing: 10px;
font-weight: normal;
padding-top: 100px;
margin-bottom: 40px;
}

form {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 150px;
width: 800px;
height: 380px;
}

input {
width: 385px;
height: 60px;
border: 1px solid rgba(0, 0, 0, 0.5);
}

.username {
float: left;
}

.email {
float: right;
}

textarea {
width: 798px;
height: 290px;
margin-top: 25px;
border: 1px solid rgba(0, 0, 0, 0.5);
resize: none;
}

textarea::-webkit-input-placeholder {
height: 290px;
line-height: 290px
}

textarea:-moz-placeholder {
height: 290px;
line-height: 290px
}

textarea::-moz-placeholder {
height: 290px;
line-height: 290px
}

textarea:-ms-input-placeholder {
height: 290px;
line-height: 290px
}

.submit {
width: 170px;
height: 50px;
border: none;
background-color: #f46208;
color: #fff;
font-size: 17px;
position: absolute;
bottom: 50px;
left: 50%;
margin-left: -85px;
cursor: pointer;
}

footer {
height: 80px;
background-color: #000;
line-height: 80px;
text-align: center;
color: white;
}