做一个整体的网页，先入手的应该是整体的布局而不是去扣细节，只有大体构架明晰，才能不慌不乱。
1.页头、内容、页脚：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Document</title>
</head>
<body>
<header> <!-- 页头 -->
<nav></nav>
<div id="banner"></div>
</header>
<div class="content"> <!-- 内容 -->
</div>
<footer> <!-- 页脚 -->
</footer>
</body>
</html>在web项目中新建一个main.css放在css文件下，设置自己想要的css样式，在主代码中引用：
<head>
<meta charset="utf-8" />
<title>Document</title>
<link rel="stylesheet" href="css/main.css"> <!--引用自己设定的CSS样式-->
</head>2.页头结构分析及布局
块级元素nav，如果没有内容撑起nav的高度，默认为0，可以指定高度，指定高度后没内容也可显示。
用CSS实现nav和banner的整体布局：
nav
{
background: #ccc;
height:50px;
}
#banner
{
background: #777;
height: 700px;
}
导航栏<ul><li>......</li></ul> 不想要前面的默认样式圆点并使其同行排列：
nav ul
{
list-style: none; <!--列表样式都清空不要-->
margin: 0;
}
nav ul li
{
display: inline-block; <!--使li里面的元素横向排列-->
line-height: 50px; <!--行高-->
}
nav ul li a
{
line-height: 50px;
text-decoration: none; <!--文字装饰(下划线..)清空不要-->
}在设置了左右浮动分开导航栏时发现文字并不居中了，这时之前设置的line-height是没有意义的， <a> 是行内标签 是无法设置宽高的 包括行高 也就是说一开始写的lh50px 是没有任何作用的 文字居中是受到了<li>下lh50px的影响
<a> 标签在d-b以后是由内容自动撑开高度的，也就是说此处不管设line-height还是height,inherit都是没有意义的
nav ul li
{
float:right;
margin: 20px;
display: inline-block; <!--使li里面的元素横向排列-->
}
nav ul li a
{
text-decoration: none; <!--文字装饰(下划线..)清空不要-->
}
nav ul li.logo
{
float: left;
}
div的默认样式就是占母元素宽度的100%
页头的源代码：
<header><!--页头开始-->
<nav>
<div class="logo"><a href="#">CBAT</a></div>
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
<div id="banner">
<div class="inner">
<h1>小可爱</h1>
<p class="sub-heading">爱吃零食的孩子都是好孩子</p>
<button id="main-btn">了解我</button>
<div class="more">
更多
</div>
</div>
</div>
</header><!--页头结束-->页头的CSS样式源代码：
ul
{
margin: 0;
}
header
{
background: rgba(0, 0, 0, 0.4);
}
nav
{
height: 50px;
background-color: transparent;
}
#banner
{
height: 700px;
background-color: transparent;
}
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;
color: #fff;
}
#banner .inner h1
{
margin: 0;
}
button
{
border: none;
background-color: #333;
color: #eee;
padding: 10px;
}
#banner button
{
padding: 14px 60px;
}
#banner .inner .more
{
margin-top: 220px;
}
.sub-heading
{
line-height: 30px;
margin: 30px 0;
}
.logo
{
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
}
.logo a
{
color: #fff;
}
使div小正方形旋转45°成为菱形：transform rotate（45deg）
指定背景固定不移动，实现背景为底页面向上滑动的效果：background-attachment：fixed；
背景不重复：background-repeat：no-repeat； 图片伸展：background-size：cover； 居中background-position：center center；
整体的源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="main-wrapper">
<header><!--页头开始-->
<nav>
<div class="logo"><a href="#">CBAT</a></div>
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
<div id="banner">
<div class="inner">
<h1>小可爱</h1>
<p class="sub-heading">爱吃零食的孩子都是好孩子</p>
<button id="main-btn">了解我</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">爱吃零食的孩子都是好孩子 爱吃零食的孩子都是好孩子 爱吃零食的孩子都是好孩子</p>
</div>
<div class="icon-group">
<span class="icon"><img src="img/item2.jpg"></span>
<span class="icon"><img src="img/item2.jpg"></span>
<span class="icon"><img src="img/item2.jpg"></span>
</div>
</div>
</section>
<section class="gray-section">
<div class="article-preview">
<div class="img-section">
<img src="img/pic1.jpg">
</div>
<div class="text-section">
<h2>爱吃零食的孩子都是好孩子</h2>
<div class="sub-heading">
好吃鬼
</div>
<p>爱吃零食的孩子都是好孩子 爱吃零食的孩子都是好孩子 爱吃零食的孩子都是好孩子</p>
</div>
</div>
<div class="article-preview">
<div class="text-section">
<h2>一袋零食顶两戴</h2>
<div class="sub-heading">
爱吃零食的孩子都是好孩子
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="img-section">
<img src="img/pic2.jpg">
</div>
</div>
<div class="article-preview">
<div class="img-section">
<img src="img/pic03.jpg">
</div>
<div class="text-section">
<h2>冰棒好吃不好吃</h2>
<div class="sub-heading">
爱吃零食的孩子
</div>
<p>Locia deserunt mollit anim id est laborum.Locia deserunt mollit anim id est laborum.Locia deserunt mollit anim id est laborum.</p>
</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, sed nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="card-group clearfix">
<div class="card">
<h3>冰冰棒</h3>
<p>Loreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="card">
<h3>棒冰冰</h3>
<p>Loreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="card">
<h3>可比克</h3>
<p>Loreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="card">
<h3>比克比</h3>
<p>Loreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="card">
<h3>旺旺雪饼</h3>
<p>Loreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="card">
<h3>旺旺仙贝</h3>
<p>Loreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</section>
</div><!--内容结束-->
<footer><!--页脚开始-->
<ul class="share-group">
<li>零食</li>
<li>小孩</li>
<li>旺旺</li>
<li>可比克</li>
<li>冰冰棒</li>
</ul>
<div class="copy">
© CBAT - 2018
</div>
</footer><!--页脚结束-->
</div>
</body>
</html>CSS源代码：
.clearfix:after
{
content: '';
display: block;
clear: both;
}
ul
{
margin: 0;
}
header
{
background: rgba(0, 0, 0, 0.4);
}
nav
{
height: 50px;
background-color: transparent;
}
#banner
{
height: 700px;
background-color: transparent;
}
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;
color: #fff;
}
#banner .inner h1
{
margin: 0;
}
button
{
border: none;
background-color: #333;
color: #eee;
padding: 10px;
}
#banner button
{
padding: 14px 60px;
}
#banner .inner .more
{
margin-top: 220px;
}
.sub-heading
{
line-height: 30px;
margin: 30px 0;
}
.logo
{
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
}
.logo a
{
color: #fff;
}
.active
{
border-bottom: 4px solid #fff;
}
h1
{
padding: 12px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
h2
{
margin-top: 0px;
font-size: 30px;
}
h3
{
font-size: 24px;
}
p
{
font-size: 18px;
letter-spacing: 1px;
}
.hr
{
width: 100%;
height: 2px;
margin: 0 auto;
margin: 20px auto;
}
.sub-heading
{
font-size: 18px;
}
#main-btn
{
padding: 14px 28px;
font-size: 20px;
letter-spacing: 4px;
border-radius: 6px;
background: #18a;
}
.green-section
{
background: #089DB0;
color: #fff;
text-align: center;
padding: 100px 0;
}
.green-section .hr
{
background: #098E9F;
width: 60%;
}
.green-section .icon-group .icon
{
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid #0D6F7C;
transform: rotate(45deg); /*旋转45度*/
margin: 20px;
}
.icon-group
{
margin-top: 60px;
}
.wrapper
{
max-width: 1080px;
margin: 0 auto;
}
.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:nth-child(odd) /*article-preview奇数设置*/
{
background-color: rgba(255,255,255,0.05);
}
.article-preview > div
{
float: left;
font-size: 0;
}
.article-preview:after
{
content: '';
display: block;
clear: both;
}
.text-section
{
position: relative;
top: 68px;
left: 50px;
}
.text-section h2
{
margin-bottom: 20px;
}
.text-section .sub-heading
{
font-size: 22px;
margin-top: 0px;
}
.text-section p
{
font-size: 18px;
letter-spacing: 1px;
}
.text-section > * {
max-width: 90%;
}
.purple-section
{
padding: 80px;
background-color: #3F3965;
color: #fff;
}
.purple-section .heading-wrapper
{
text-align: center;
}
.purple-section .hr
{
background-color: #373259;
width: 60px;
}
.card
{
float: left;
width: 50%;
min-height: 300px;
padding: 50px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
/*border: 1px solid #fff;*/
}
.card:first-child
{
background-color: rgba(0,0,0,0.04);
}
.card:nth-child(2)
{
background-color: rgba(0,0,0,0.08);
}
.card:nth-child(3)
{
background-color: rgba(0,0,0,0.12);
}
.card:nth-child(4)
{
background-color: rgba(0,0,0,0.16);
}
.card:nth-child(5)
{
background-color: rgba(0,0,0,0.20);
}
.card:nth-child(6)
{
background-color: rgba(0,0,0,0.24);
}
footer
{
background-color: #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;
}