直接贴代码吧，需要的图片另存为下载到自己电脑上，给需要的同学作为参考：
效果图：
网页用图：
邹小胖的主页
一个标题
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
item1
item2
item3
又一个标题
我是副标题你好
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam commodi nulla, blanditiis itaque veritatis. Voluptas ratione optio sint enim non, sapiente, odio, assumenda porro rerum deserunt a libero officia unde.
又一个标题
我是副标题你好
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam commodi nulla, blanditiis itaque veritatis. Voluptas ratione optio sint enim non, sapiente, odio, assumenda porro rerum deserunt a libero officia unde.
又一个标题
我是副标题你好
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam commodi nulla, blanditiis itaque veritatis. Voluptas ratione optio sint enim non, sapiente, odio, assumenda porro rerum deserunt a libero officia unde.
又一个标题
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quo placeat, magni. Debitis numquam sunt odit nisi quo officiis dolores expedita, distinctio quos neque molestiae ducimus iure commodi optio provident?
标题三
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero facere, consectetur corporis? Illo blanditiis perferendis atque laudantium quisquam et delectus ut, quos, iure tempora dolor error quis debitis eligendi.
标题三
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero facere, consectetur corporis? Illo blanditiis perferendis atque laudantium quisquam et delectus ut, quos, iure tempora dolor error quis debitis eligendi.
标题三
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero facere, consectetur corporis? Illo blanditiis perferendis atque laudantium quisquam et delectus ut, quos, iure tempora dolor error quis debitis eligendi.
标题三
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero facere, consectetur corporis? Illo blanditiis perferendis atque laudantium quisquam et delectus ut, quos, iure tempora dolor error quis debitis eligendi.
标题三
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero facere, consectetur corporis? Illo blanditiis perferendis atque laudantium quisquam et delectus ut, quos, iure tempora dolor error quis debitis eligendi.
标题三
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero facere, consectetur corporis? Illo blanditiis perferendis atque laudantium quisquam et delectus ut, quos, iure tempora dolor error quis debitis eligendi.
h1 {
padding: 12px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
h2 {
font-size: 25px;
margin: 0;
}
h3 {
font-size: 22px;
}
p {
font-size: 18px;
letter-spacing: 1px;
}
.hr {
height: 2px;
width: 100%;
margin: 20px auto;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
ul {
margin: 0;
}
header {
background: rgba(0, 0, 0, 0.4);
}
nav {
background: transparent;
height: 50px;
position: fixed;
left:0;
right: 0;
}
nav ul {
list-style: none;
float: right;
margin-right: 30px;
}
nav ul li, nav .logo {
display: inline-block;
line-height: 50px;
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
line-height: 50px;
display: inline-block;
height: inherit;
color: #fff;
}
nav .logo {
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
float: left;
margin-left: 30px;
}
nav .logo a {
color: #fff;
text-decoration: none;
}
.active {
border-bottom: 4px solid #fff;
}
#banner {
background: transparent;
height: 700px;
color: #fff;
}
#banner .inner {
max-width: 300px;
text-align: center;
margin: 0 auto;
position: relative;
top: 160px;
}
#banner .inner h1 {
margin: 0;
}
#banner .inner .more {
margin-top: 230px;
}
.sub-heading {
line-height: 30px;
margin: 30px 0;
}
button {
border: none;
background: #333;
color: #eee;
padding: 10px;
}
#main-btn {
padding: 14px 28px;
font-size: 20px;
letter-spacing: 4px;
border-radius: 6px;
background: #18a;
}
.green-section {
text-align: center;
background: #089080;
color: #fff;
padding: 100px 0;
}
.green-section .hr {
background: #fff;
width: 60%;
}
.green-section .icon-group .icon {
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid #0D6F7C;
transform: rotate(45deg);
margin: 20px;
}
.icon-group {
margin-top: 30px;
}
.wrapper {
max-width: 1080px;
margin: 0 auto;
}
.sub-heading {
font-size: 18px;
}
.gray-section {
background: #252F34;
color: #fff;
}
.gray-section .img-section {
width: 45%;
}
.img-section img {
width: 100%;
}
.gray-section .text-section {
width: 55%;
}
.article-preview > div {
float: left;
font-size: 0;
}
.article-preview:nth-child(odd) {
background-color: rgba(255,255,255,0.05);
}
.text-section {
position: relative;
top: 68px;
left: 50px;
}
.text-section > * {
max-width: 90%;
}
.text-section h2 {
margin-bottom: 20px;
}
.text-section .sub-heading {
font-size: 20px;
}
.purple-section {
background: #3F3965;
color: #fff;
padding: 80px;
}
.purple-section .heading-wrapper {
text-align: center;
}
.purple-section .hr {
background: #373259;
width: 50%;
}
.card {
float: left;
width: 50%;
min-height: 300px;
padding: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card:first-child {
background: rgba(0, 0, 0, 0.04);
}
.card:nth-child(2) {
background: rgba(0, 0, 0, 0.08);
}
.card:nth-child(3) {
background: rgba(0, 0, 0, 0.12);
}
.card:nth-child(4) {
background: rgba(0, 0, 0, 0.16);
}
.card:nth-child(5) {
background: rgba(0, 0, 0, 0.20);
}
.card:nth-child(6) {
background: rgba(0, 0, 0, 0.24);
}
footer {
background: #333;
color: #fff;
min-height: 200px;
text-align: center;
}
ul.share-group {
display: block;
width: 1080px;
margin: 0 auto;
padding: 50px;
}
.share-group li {
display: inline-block;
padding: 10px;
}
.copy {
padding-bottom: 20px;
}
.main-wrapper {
background: #444 url(../img/banner.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}