我们将使用 HTML5 和 CSS3 制作一个简单的静态主页 Simply，下面是最终效果图

理解设计

我们能看到上面的图看到，Simply 是一个全宽度的主页设计，分为 7 个部分。我们要把他切成一些列的可以管理的模块，方便处理，结构如下图

设置文件加结构

首先，我们要为这个项目创建一个文件夹里，目录里包括一个 HTML 文件，一个 images 文件夹(里面包含所需图片资源)，一个 CSS 文件夹。目录结构如图

点击下载 images 图片资源: images，里面图片清单如下

  • hero.jpg - 2000 x 697 px
  • features-icon-1.png - 100 x 100 px
  • features-icon-2.png - 100 x 100 px
  • features-icon-3.png - 100 x 100 px
  • video-placeholder.jpg - 940 x 527 px
  • article-image-1.jpg - 460 x 270 px
  • article-image-2.jpg - 460 x 270 px

    设置 HTML 文件

    打开 index.html 文件，输入一下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Simply</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
 
<body>
    
</body>
</html>

上面这段代码是所有 HTML 文件的基本框架。它定义了文件类型（HTML5），编码方式(UTF-8)和页面的头部信息。除了这个基本框架，我们还要用条件注释加上一个脚本 「if it IE9.」这个脚本能够使用 HTML5 标签，比如

,
能兼容老的 IE版本。

分解页面

上面我们已经把页面分解成了 7 部分，再近一步分解成基本的结构，方便编码，如下图。

注意到没，没有把所有的元素都标记上，只是一些最重要的部分。剩下的在内容里添加。我们把这个结构放到 HTML 文件的 标签里，代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Simply</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
 
<body>
	<header>
		<h1></h1>
		<nav></nav>
	</header>
	
	<div id="hero-image">
		<h2></h2>
		<a></a>
	</div>
	
	<div id="features">
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	
	<div id="primary-content">
		<article></article>
	</div>
	
	<div id="secondary-content">
		<article></article>
		<article></article>
	</div>
	
	<div id="cta">
	</div>
	
	<footer>
		<div id="footer-info"></div>
		<div id="footer-links">
			<ul></ul>
			<ul></ul>
			<ul></ul>
		</div>
	</footer>
    
</body>
</html>

因为设计的宽度是 960px，我们需要在每一部分都插入一个 wrapper，使用 div 容器加上一个 wrapper 类来实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Simply</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
 
<body>
	<header>
		<div class="wrapper">
			<h1></h1>
			<nav></nav>
		</div>
	</header>
	
	<div id="hero-image">
		<div class="wrapper">
			<h2></h2>
			<a></a>
		</div>
	</div>
	
	<div id="features">
		<div class="wrapper">
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>
	
	<div id="primary-content">
		<div class="wrapper">
			<article></article>
		</div>
	</div>
	
	<div id="secondary-content">
		<div class="wrapper">
			<article></article>
			<article></article>
		</div>
	</div>
	
	<div id="cta">
		<div class="wrapper">
		</div>
	</div>
	
	<footer>
		<div class="wrapper">
			<div id="footer-info"></div>
			<div id="footer-links">
				<ul></ul>
				<ul></ul>
				<ul></ul>
			</div>
		</div>
	</footer>
    
</body>
</html>

添加内容

这一部分我们要往 HTML 文件里添加文件了，之前没有的标签，像 paragraphs, headers, links, list items 等等都要加进去

第一部分： Header

Header 部分包括一个 logo 和 一个导航栏. logo 使用一号标题 标签和一个行内颜色类，我们可以在后面根据 CSS 设置不同的颜色。导航栏就是一个简单的无序列表 ul 和 4 个 li，放在 nav 标签里。

1
2
3
4
5
6
7
8
9
10
11
12
13
<header>
	<div class="wrapper">
		<h1>Simply<span class="color">.</span></h1>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Blog</a></li>
			</ul>
		</nav>
	</div>
</header>

第二部分： Hero 图片

一个 Hero banner 图片加上一个二号标题标签和一个 button 链接。

1
2
3
4
5
6
7
<div id="hero-image">
	<div class="wrapper">
		<h2><strong>A Minimal, clean</strong><br/>
		layout for web design.</h2>
		<a href="#" class="button-1">Get Started</a>
	</div>
</div>

第三部分：Feature

第三部分里有一个无序列表，使用 CSS 这些列表会向左水平浮动显示。为了不让元素浮动，我们需要一个 「clear」 的 div 类。并且，这个在后面的 CSS 中的属性是 「clear:both」。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="features">
	<div class="wrapper">
		<ul>
			<li class="feature-1">
				<h4>Easy to Edit</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis turpis ac libero interdum, id fringilla purus feugiat. Etiam malesuada mattis nibh at bibendum.</p>
			</li>
			<li class="feature-2">
				<h4>Layered PSD</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis turpis ac libero interdum, id fringilla purus feugiat. Etiam malesuada mattis nibh at bibendum.</p>
			</li>
			<li class="feature-3">
				<h4>Ready to Go</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis turpis ac libero interdum, id fringilla purus feugiat. Etiam malesuada mattis nibh at bibendum.</p>
			</li>
			<div class="clear"></div>
		</ul>
	</div>
</div>

第四部分：Primary Content

这部分很简单，用 标签引入一个视频封面

1
2
3
4
5
6
7
8
9
<div id="primary-content">
	<div class="wrapper">
		<article>
			<h3>Featured Content</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo a nibh dignissim tincidunt. Nam ultricies odio ac neque suscipit volutpat. Ut dictum adipiscing felis sed malesuada. Integer porta sem nec nibh hendrerit imperdiet. </p>
			<a href="#"><img src="images/video-placeholder.jpg" alt="video placeholder" /></a>
		</article>
	</div>
</div>

第五部分：Secondary Content

跟 feature 那部分类似，我们让

水平显示。你或许注意到我们使用了内联样式，一般来说不建议这么用。但在这里，背景图片是被当作内容，属于 HTML 而不是 CSS 的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="secondary-content">
	<div class="wrapper">
		<article style="background-image: url('images/article-image-1.jpg');">
			<div class="overlay">
				<h4>Secondary Content</h4>
				<p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo a nibh dignissim tincidunt nam.</small></p>
				<a href="#" class="more-link">View more</a>
			</div>
		</article>
		<article style="background-image: url('images/article-image-2.jpg');">
			<div class="overlay">
				<h4>Secondary Content</h4>
				<p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo a nibh dignissim tincidunt nam.</small></p>
				<a href="#" class="more-link">View more</a>
			</div>
		</article><div class="clear"></div>
	</div>
</div>

第六部分：Call to Action

也是非长简单直接，标题，段落和一个 button 链接。

1
2
3
4
5
6
7
<div id="cta">
	<div class="wrapper">
		<h3>Heard Enough?</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo a nibh dignissim tincidunt. Nam ultricies odio ac neque suscipit volutpat. Ut dictum adipiscing felis sed malesuada. Integer porta sem nec nibh hendrerit imperdiet. </p>
		<a href="#" class="button-2">Get Started</a>
	</div>
</div>

第七部分：Footer

Footer 部分被分为两列，「footer-info」和「footer-link」，后者又用列表项分成了 3 列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<footer>
	<div class="wrapper">
		<div id="footer-info">
			<p>Copyright 2014 CompanyName. All rights reserved.</p>
			<p><a href="#">Terms of Service</a> I <a href="#">Privacy</a></p>
		</div>
		<div id="footer-links">
			<ul>
				<li><h5>Company</h5></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Meet The Team</a></li>
				<li><a href="#">What We Do</a></li>
				<li><a href="#">Careers</a></li>
			</ul>
			<ul>
				<li><h5>Company</h5></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Meet The Team</a></li>
				<li><a href="#">What We Do</a></li>
				<li><a href="#">Careers</a></li>
			</ul>
			<ul>
				<li><h5>Company</h5></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Meet The Team</a></li>
				<li><a href="#">What We Do</a></li>
				<li><a href="#">Careers</a></li>
			</ul>
		</div>
		<div class="clear"></div>
	</div>
</footer>

下一步引用我们用到 CSS 文件。第一个就是 css reset，可以到这里下载 CSS Reset，把他放到 css 文件夹里，并且在 HTML 引用。
<link rel="stylesheet" type="text/css" href="css/reset.css">
同时也引用一下我们自定义的 CSS
<link rel="stylesheet" type="text/css" href="css/home.css">我们的 logo 字体「Crete」从 Google 字体库里引用来的，也要引用进来才能使用。
<link href='http://fonts.googleapis.com/css?family=Crete+Round' rel='stylesheet' type='text/css'>

添加样式

全局样式

body, headings, paragraphs and links 这些都是全局属性，应用在整个文件里，所以先定义好。wrapper 的宽度是 960px，每个边减去 10px padding 值。由于用了 reset css，有些属性需要重新定义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
body {
	background-color: #fff;
	color: #777;
	font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
p {
	line-height: 20px;
	margin-bottom: 20px;
}
h1 {
	font-family: 'Crete Round', serif;
	font-weight: bold;
	color: #444;
	font-size: 45px;
	margin-bottom: 20px;
}
h2 {
	font-weight: 300;
	color: #444;
	font-size: 55px;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 20px;
}
h3 {
	font-size: 30px;
	color: #444;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 20px;
}
h4 {
	font-size: 24px;
	color: #444;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 20px;
}
h5 {
	font-size: 15px;
	color: #444;
	font-weight: bold;
	text-transform: uppercase;
}
a {
	text-decoration: none;
	color: #444;
}
a:hover {
	color: #02b8dd;
}
strong {
	font-weight: bold;
}
small {
	font-size: 13px;
	color: #777;
	font-style: italic;
}
.clear {
	clear: both;
}
.wrapper {
	margin: 0 auto;
	padding: 0 10px;
	width: 940px;
}

第一部分：Header

H1 标签表明了 logo 字体的大小，color 属性定义了 logo 的颜色，ul 里的 li 向左浮动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
header {
	height: 120px;
}
header h1 {
	float: left;
	margin-top: 32px;
}
header h1 .color {
	color: #02b8dd;
}
header nav {
	float: right;
}
header nav ul li {
	float: left;
	display: inline-block;
	margin-top: 50px;
}
header nav ul li a {
	color: #444;
	text-transform: uppercase;
	font-weight: bold;
	display: block;
	margin-right: 20px;
}

第二部分：Hero Image

#hero-image 类的高度要比背景图片小，上下都留了几个像素的空间，一边将来做一些细小的调整或者设计响应式布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#hero-image {
	height: 580px;
	padding-top: 1px;
	background: #e8eced url('../images/hero.jpg') no-repeat center;
}
#hero-image h2 {
	margin: 180px 0 40px 0;
}
.button-1 {
	display: block;
	text-align: center;
	background: #444;
	border-radius: 3px;
	color: #fff;
	width: 180px;
	height: 50px;
	font-size: 20px;
	line-height: 50px;
	margin: 0 auto;
}
.button-1:hover {
	background-color: #02b8dd;
	color: #fff;
}

第三部分：Feature

每个 Feature 的特性共享 #features ul li 属性。但是.feature-1, .feature-2 and .feature-3 这些属性都是彼此不同的，每个属性都定义一个不同的 Icon.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#features ul {
	margin: 80px 0;
}
#features ul li {
	width: 300px;
	padding-top: 140px;
	float: left;
	margin-right: 10px;
	text-align: center;
}
#features ul li.feature-1 {
	background: url('../images/features-icon-1.png') no-repeat top center;
}
#features ul li.feature-2 {
	background: url('../images/features-icon-2.png') no-repeat top center;
}
#features ul li.feature-3 {
	background: url('../images/features-icon-3.png') no-repeat top center;
}

第四部分：Primary Content

heading 3 是有下划线，而且居中对齐的。在全局的样式中已经定义过了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#primary-content {
	background-color: #f8fafa;
	padding: 60px 0;
	text-align: center;
}
#primary-content h3 {
	display: block;
	margin: 0 auto 20px auto;
	width: 400px;
	border-bottom: 1px solid #02b8dd;
	padding: 0 0 20px 0;
}
#primary-content a img {
	margin: 20px 0;
}

第五部分：Secondary Content

第一个子选择器只在第一篇文章的 margin 值为 20px，.overlay 用 rgba 用白色背景加点透明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#secondary-content {
	padding: 60px 0;
	text-align: center;
}
#secondary-content article {
	width: 460px;
	height: 270px;
	float: left;
	background-color: #f5f5f5;
}
#secondary-content article:first-child {
	margin-right: 20px;
}
#secondary-content article .overlay {
	background: rgba(255, 255, 255, .95);
	height: 230px;
	width: 190px;
	padding: 20px;
}
article h4 {
	border-bottom: 1px solid #02b8dd;
	padding-bottom: 20px;
}
.more-link {
	border: 1px solid #02b8dd;
	color: #02b8dd;
	padding: 6px 20px;
	border-radius: 3px;
}
.more-link:hover {
	background-color: #02b8dd;
	color: #fff;
}

第六部分：Call to Action

这里用相同的自定义的 <h3> 的标签。也定义了 button 和 hover 的状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#cta {
	padding: 60px 0;
	text-align: center;
}
#cta h3 {
	display: block;
	margin: 0 auto 20px auto;
	width: 400px;
	border-bottom: 1px solid #02b8dd;
	padding: 0 0 20px 0;
}
.button-2 {
	display: block;
	margin: 0 auto;
	border: 2px solid #02b8dd;
	color: #02b8dd;
	border-radius: 3px;
	width: 180px;
	height: 50px;
	font-size: 20px;
	line-height: 50px;
}
.button-2:hover {
	background-color: #02b8dd;
	color: #fff;
}

第七部分：Footer

我们用浮动把 Footer 分成两列：#footer-info 和 #footer-links，然后用相同的方法把 #footer-links 分成三个水平方向的无序列表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
footer {
	padding: 60px 0;
	background-color: #f8fafa;
}
#footer-info {
	width: 380px;
	float: left;
	margin-top: 10px;
}
#footer-links {
	width: 520px;
	float: right;
}
#footer-links ul {
	width: 150px;
	float: left;
	margin-left: 20px;
}
#footer-links ul li {
	margin: 10px 0;
}

结论

至此，我们就用 HTML5 和 CSS3 制作了一个站点首页。