html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="fontawesome-4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="main-wrapper">
<header><!--页头开始-->
<nav>
<div class="logo"><a href="">王小窝</a></li></div>
<ul>
<li><a href="" class="active">首页</a></li>
<li><a href="">链接3</a></li>
<li><a href="">链接4</a></li>
</ul>
</nav>
<div id="banner">
<div class="inner">
<h1>王小窝</h1>
<p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam numquam in, qui. Ex, tempora velit dolor molestias rerum, ipsum praesentium. Excepturi, commodi. Accusantium praesentium provident, assumenda commodi odit, delectus facilis!
</p>
<button>了解我</button>
<div class="more">
更多
</div>
</div>
</div>
</header><!--页头结束-->
<div class="content"><!--内容开始-->
<section class="green-section">
<div class="wrapper">
<div>
<h2>标题</h2>
<div class="hr"></div>
<p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum culpa rerum doloremque beatae, molestiae totam, ea atque rem corporis sed fuga nesciunt, impedit ab et, fugiat ipsa! Id, autem?</p>
</div>
<div class="icon-grop">
<span class="icon">items2</span>
<span class="icon">items2</span>
<span class="icon">items3</span>
</div>
</div>
</section>
<section class="gray-section">
<div class="article-preview clearfix">
<div class="text-section">
<h2>又一个标题</h2>
<div class="sub-heading">我是副标题</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat sunt praesentium, magni, architecto numquam nam id quis eaque quidem, adipisci porro hic beatae reprehenderit! Ab eum natus, similique in ut.</p>
</div>
<div class="img-section">
<img src="img/pic01.jpg" alt="">
</div>
</div>
<div class="article-preview clearfix">
<div class="img-section">
<img src="img/pic02.jpg" alt="">
</div>
<div class="text-section">
<h2>又一个标题</h2>
<div class="sub-heading">我是副标题</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nam, rem sed fugiat quia impedit reprehenderit dolorem voluptate aperiam alias harum saepe! Molestiae, repellendus! Magni mollitia neque, dicta similique amet.</p>
</div>
</div>
<div class="article-preview clearfix">
<div class="text-section">
<h2>又一个标题</h2>
<div class="sub-heading">我是副标题</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis illum blanditiis possimus unde aperiam at praesentium sapiente, nemo iste? Placeat quidem libero similique architecto cupiditate dolorum expedita temporibus harum asperiores.</p>
</div>
<div class="img-section">
<img src="img/pic03.jpg" alt="">
</div>
</div>
</section>
<section class="purple-section">
<div class="wrapper">
<div class="heading-wrapper">
<h2>又一个标题</h2>
<div class="hr"></div>
<div class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam tenetur corporis iste sit nesciunt reprehenderit sed neque recusandae ducimus, laudantium, assumenda totam architecto, blanditiis est veritatis aspernatur perferendis nulla qui.</div>
</div>
<div class="card-group clearfix">
<div class="card">
<h3>标题</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim fugiat repellendus, harum aliquam provident aut commodi. Nam, cumque veritatis magni sapiente earum! Excepturi necessitatibus soluta modi. Ut rerum eveniet veniam.</p>
</div>
<div class="card">
<h3>标题</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ratione atque, dolores odio, eligendi totam eveniet quo minus fugiat obcaecati, labore delectus? Officiis vitae aliquid sequi culpa, sunt rem odio.</p>
</div>
<div class="card">
<h3>标题</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic at, vitae veniam labore, quis fugit, sequi enim error tempora, nulla ipsam quae harum praesentium fuga tenetur tempore. Dolore, molestiae, repellat?</p>
</div>
<div class="card">
<h3>标题</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi deleniti nobis perferendis nostrum. Natus molestiae magnam eligendi totam, aperiam fugiat earum quisquam ratione, tempore expedita aliquam sequi culpa delectus doloremque.</p>
</div>
<div class="card">
<h3>标题</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ad consectetur voluptatem explicabo rerum perferendis quae alias, dicta tenetur. Quis, eius, voluptates. Incidunt molestiae saepe voluptates odio alias et quam.</p>
</div>
<div class="card">
<h3>标题</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore harum dolorum at molestiae iure, quisquam officiis suscipit laudantium voluptatum inventore similique, consectetur nobis totam, dicta veritatis tenetur quasi expedita ad.</p>
</div>
</div>
</div>
</section>
</div><!--内容结束-->
<footer><!--页脚开始-->
<ul class="share-group">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<div class="copy">
© 王小窝 - 2017
</div>
</footer><!--页脚结束-->
</div>
</body>
</html>
css部分:
.clearfix:after { content: ''; display: block; clear: both; }
ul {
margin: 0;
}
nav {
background-color: transparent;
height: 50px;
}
a {
text-decoration: none;
}
header {
background-color: rgba(0,0,0,0.4);
}
#banner {
background-color: rgba(0,0,0,0.2);
height: 700px;
}
nav ul {
list-style: none;
margin:0;
float: right;
}
nav ul li,nav .logo {
display: inline-block;
line-height: 50px;
margin-right: 20px;
}
nav ul li a {
line-height: inherit;
text-decoration: none;
display: inline-block;
height: inherit;
color: #fff;
}
nav ul li.logo {
float: left;
padding: 10px;
}
#banner .inner {
max-width: 300px;
text-align: center;
margin: 0 auto;
position: relative;
top:160px;
}
#banner .inner h1{
margin: 0;
}
button {
border: none;
background-color: #333;
color: #eee;
padding: 10px;
border-radius: 5px;
}
#banner button {
padding: 14px 60px;
}
#banner .inner .more {
margin-top: 280px;
color: #fff;
font-size: 12px;
}
.sub-heading{
line-height: 30px;
margin: 30px 0;
/*font-size: 18px;*/
}
.logo {
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
}
.logo a{
color: #fff;
}
h1 {
padding: 12px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
h2{
font-size: 30px;
}
h3 {
font-size: 24px;
}
p {
font-size: 18px;
letter-spacing: 1px;
}
.hr{
width: 100px;
height: 2px;
margin: 20px auto;
}
.green-section {
background-color: #089DB0;
text-align: center;
color: #fff;
padding: 100px 0;
}
.green-section .hr {
background-color: #028e94;
width: 60%;
}
.green-section .icon-grop .icon{
display: inline-block;width: 80px;
height: 80px;
border: 1px solid #0D6F74;
transform: rotate(45deg);
margin: 20px;
}
.icon-grop {
margin-top: 60px;
}
.wrapper {
max-width: 1080px;
margin: 0 auto;
}
.gray-section {
background-color: #252F34;
}
.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,25,255,0.05);
}
.text-section{
position: relative;
top:68px;
left:50px;
}
.text-section > * {
max-width: 90%;
color: #fff;
}
.text-section h2 {
margin-bottom: 20px;
}
.text-section .sub-heading {
font-size: 22px;
}
.text-section p {
font-size: 18px;
letter-spacing: 1px;
}
.purple-section {
padding: 80px;
background-color: #3F3965;
color: #fff;
}
.purple-section .heading-wrapper {
text-align: center;
}
.purple-section .hr {
background: #373259;
width: 60%;
}
.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: 20px;
}
.main-wrapper {
background: #444 url(../img/banner.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
浏览器默认设置reset.css,一开始我用的是它,但使用后h1的标题大小失效,有点暴力。用normalize.css还是比较温和的,如果前端了解很深的可以,自己写默认设置。
选择器:nth-child()和nth-of-type()选择器匹配属于其父元素的第n个元素,n可以是数字和关键字或公式。odd和even是比较常见的。
本人初学者,如有错误请勿怪。