【实战HTML5与CSS3】免费制作威客页面啦（附源码）

前言

接着昨天的写，居然有圆友找到了网站原网址，这里也一并弄出来了，发现他们做出来其实和原型图还有一点差异呢：

http://www.tmtpost.com/

原型图

今天我们要做的是这张图，我在威客上面找了好久，终于找到一张较合适的图呀，今天我们就来无偿奉献下吧，有图有真相，先上图吧！！

这里也对自己提出要求，希望做出来的页面与设计图完全一致，但估计有点玄，希望大致一致吧，于是我们开始动手吧！

开始切图

第一步，让我们先把背景图给搞下来吧，这个尺寸与大小我感觉应该合适吧。

第二步，将logo剪切了

第三步，我们看看会用到哪些小图标，先全部给抠下来吧，暂时只弄了这么多需要再弄吧：

我PS水平更加水到没边了，完全初学水平，暂时就这样吧。。。

开始布局

第一步，重设浏览器样式

简单css

 1 body, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea, select { margin: 0; padding: 0; }
 2 body { background: #e5e5e5 url("../images/bg_body.gif") ; font: 12px "宋体","Arial Narrow",HELVETICA; }
 3 a { color: #2D374B; text-decoration: none; }
 4 a:hover { color: #CD0200; text-decoration: underline; }
 5 em { font-style: normal; }
 6 li { list-style: none outside none; }
 7 img { border: 0 none; vertical-align: middle; }
 8 table { border-collapse: collapse; border-spacing: 0; }
 9 p { word-wrap: break-word; }
10 .block { display: block; }
11 .noborder { border: 0 none; }
12 .clear { clear: both; }
13 .fl { float: left; }
14 .fr { float: right; }
15 .fn { float: none; }
16 .mt8 { margin-top: 8px; }
17 .mt12 { margin-top: 12px; }
18 .mt15 { margin-top: 15px; }
19 .mb10 { margin-bottom: 10px; }
20 .pd10 { padding: 10px;}
21 .pdtb5 { padding-top: 5px; padding-bottom: 5px; }
22 .pdtb10 { padding-top: 10px; padding-bottom: 10px; }
23 .pdlr5 { padding-left: 5px; padding-right: 5px; }
24 .pdlr10 { padding-left: 10px; padding-right: 10px; }

于是我们的界面变成了这个样子了：

第二步，开始布局头部

他这个是典型的两栏布局，所以我们先做头好了。

头部代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <link href="css/style.css" rel="stylesheet" type="text/css" />
 6 </head>
 7 <body>
 8     <header id="header">
 9         <h1 class="logo">
10             <img src="images/logo.gif" />
11         </h1>
12         <div class="header_tools">
13             <a href="javascript:'">登陆</a> / <a href="javascript:'">注册</a> <span><i class="rss"></i> 订阅</span>
14             <span><i class="save"></i> 收藏</span> <span><i class="like"></i> 投稿通道</span>
15         </div>
16         <div class="search">
17             <input type="text" placeholder="请输入关键字" class="noborder" />
18             <span class="search_bt">搜索</span>
19         </div>
20         <nav class="nav">
21             <ul>
22                 <li><a href="javascript:'">首 页</a><i></i></li>
23                 <li><a href="javascript:'">观 点</a><i></i></li>
24                 <li><a href="javascript:'">深 度</a><i></i></li>
25                 <li><a href="javascript:'">作 者</a><i></i></li>
26                 <li><a href="javascript:'">标 签</a><i></i></li>
27                 <li><a href="javascript:'">钛爱铂</a><i></i></li>
28                 <li><a href="javascript:'">我的钛度</a><i></i></li>
29             </ul>
30         </nav>
31         <div class="top_show">
32             <div class="fl">当前位置：<a href="javascript:'">首 页</a></div>
33             <div class="fr">热门：<a href="javascript:'">新媒体</a> <a href="javascript:'">一周策划</a> <a href="javascript:'">新创业者说</a> <a href="javascript:'">妙史</a> <a href="javascript:'">钛能吐槽</a></div>
34             <div class="clear"></div>
35         </div>
36     </header>
37     <div id="main">
38     </div>
39     <aside id="aside">
40     </aside>
41     <footer id="footer">
42     </footer>
43 </body>
44 </html>

css代码

 1 body, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea, select { margin: 0; padding: 0; }
 2 body { background: #e5e5e5 url("../images/bg_body.gif") ; font: 12px "宋体","Arial Narrow",HELVETICA; color: #8c8b8b; }
 3 a { color: #2D374B; text-decoration: none; }
 4 a:hover { color: #CD0200; text-decoration: underline; }
 5 em { font-style: normal; }
 6 li { list-style: none outside none; }
 7 img { border: 0 none; vertical-align: middle; }
 8 table { border-collapse: collapse; border-spacing: 0; }
 9 p { word-wrap: break-word; }
10 .block { display: block; }
11 .noborder { border: 0 none; }
12 .clear { clear: both; }
13 .fl { float: left; }
14 .fr { float: right; }
15 .fn { float: none; }
16 .mt8 { margin-top: 8px; }
17 .mt12 { margin-top: 12px; }
18 .mt15 { margin-top: 15px; }
19 .mb10 { margin-bottom: 10px; }
20 .pd10 { padding: 10px;}
21 .pdtb5 { padding-top: 5px; padding-bottom: 5px; }
22 .pdtb10 { padding-top: 10px; padding-bottom: 10px; }
23 .pdlr5 { padding-left: 5px; padding-right: 5px; }
24 .pdlr10 { padding-left: 10px; padding-right: 10px; }
25 
26 #header { width: 1000px; margin: 0 auto; height: 160px; position: relative;  }
27 .logo { display: inline-block; margin-top: 14px; }
28 .header_tools { display: inline-block; position: absolute; top: 10px; right: 0; }
29 .header_tools a { color: #8c8b8b; }
30 .header_tools span { display: inline-block; padding-left: 22px;   position: relative; }
31 
32 .header_tools i { display: inline-block; width: 20px; height: 20px; position: absolute; background: url("../images/icons.gif") no-repeat; left: 0; top: -4px; }
33 .header_tools .rss { background-position: -2px -2px;}
34 .header_tools .save { background-position: -22px -1px;}
35 .header_tools .like { background-position: -42px 0;}
36 
37 .search { position: absolute; right: 0; top: 55px; }
38 .search input { width: 175px; height: 25px; line-height: 25px; background-color: #b6b6b6; }
39 .search_bt { text-indent: -99999px; display: inline-block; background: #5f5f5f url("../images/icons.gif") -2px -34px; width: 27px; height: 25px; float: right; cursor: pointer;  margin-left: -2px; }
40 .nav { height: 38px; background: #707070 url("../images/bg_title.gif"); margin-top: 10px; }
41 .nav li{ display: inline-block; width: 92px; text-align: center; position: relative; }
42 .nav a{ color: White; font-size: 14px; font-weight: bold; line-height: 38px; }
43 .nav i{ display: inline-block; height: 38px; width: 2px; line-height: 38px; position: absolute; right: 0; background: -moz-linear-gradient(left, #acabab, #686868); }
44 .top_show { margin: 7px 0 14px;}
45 .top_show a{ color: #308ddb;}

PS：背景我本来想用渐变的，但是米有成功。。。。导航上的分割符就用了渐变啦。。。

第三步布局主体部分

我们看到主体部分还是很长的，主体是个标准的两列布局，我们还是使用float算了。。。于是就这个样子啦：

我们这里先做左边的东西，先来一个框吧：

光是左边还是不好，我们在右边也来一个呗，我们注意到左边有个比较通用的盒子模型，于是我们上手吧：

CSS

 1 body, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea, select { margin: 0; padding: 0; }
 2 body { background: #e5e5e5 url("../images/bg_body.gif") ; font: 12px "宋体","Arial Narrow",HELVETICA; color: #666666; }
 3 a { color: #2D374B; text-decoration: none; }
 4 a:hover { color: #CD0200; text-decoration: underline; }
 5 em { font-style: normal; }
 6 li { list-style: none outside none; }
 7 img { border: 0 none; vertical-align: middle; }
 8 table { border-collapse: collapse; border-spacing: 0; }
 9 p { word-wrap: break-word; }
10 .block { display: block; }
11 .noborder { border: 0 none; }
12 .clear { clear: both; }
13 .fl { float: left; }
14 .fr { float: right; }
15 .fn { float: none; }
16 .fontb { font-weight: bold; }
17 .textl { text-align: left;}
18 .textr { text-align: right;}
19 .mtb2 { margin: 2px 0;}
20 .mtb4 { margin: 4px 0;}
21 .mtb6 { margin: 6px 0;}
22 
23 .mt8 { margin-top: 8px; }
24 .mt12 { margin-top: 12px; }
25 .mt15 { margin-top: 15px; }
26 .mb10 { margin-bottom: 10px; }
27 .pd10 { padding: 10px;}
28 .pdtb5 { padding-top: 5px; padding-bottom: 5px; }
29 .pdtb10 { padding-top: 10px; padding-bottom: 10px; }
30 .pdlr5 { padding-left: 5px; padding-right: 5px; }
31 .pdlr10 { padding-left: 10px; padding-right: 10px; }
32 
33 .wraper { width: 960px; margin: 0 auto;}
34 
35 #header { position: relative;  }
36 .logo { display: inline-block; margin-top: 14px; }
37 .header_tools { display: inline-block; position: absolute; top: 10px; right: 0; }
38 .header_tools a { color: #8c8b8b; }
39 .header_tools span { display: inline-block; padding-left: 22px;   position: relative; }
40 
41 .header_tools i { display: inline-block; width: 20px; height: 20px; position: absolute; background: url("../images/icons.gif") no-repeat; left: 0; top: -4px; }
42 .header_tools .rss { background-position: -2px -2px;}
43 .header_tools .save { background-position: -22px -1px;}
44 .header_tools .like { background-position: -42px 0;}
45 
46 .search { position: absolute; right: 0; top: 55px; }
47 .search input { width: 175px; height: 25px; line-height: 25px; background-color: #b6b6b6; }
48 .search_bt { text-indent: -99999px; display: inline-block; background: #5f5f5f url("../images/icons.gif") -2px -34px; width: 27px; height: 25px; float: right; cursor: pointer;  margin-left: -2px; }
49 .nav { height: 38px; background: #707070 url("../images/bg_title.gif"); margin-top: 10px; }
50 .nav li{ display: inline-block; width: 88px; text-align: center; position: relative; }
51 .nav a{ color: White; font-size: 14px; font-weight: bold; line-height: 38px; }
52 .nav i{ display: inline-block; height: 38px; width: 2px; line-height: 38px; position: absolute; right: 0; background: -moz-linear-gradient(left, #acabab, #686868); }
53 .top_show { margin: 7px 0 14px;}
54 .top_show a{ color: #308ddb;}
55 
56 #main { width: 650px; } 
57 .box_top { background:white; padding: 20px 16px; }
58 .box_top h2 { color: #636f76; font-size: 22px;  }
59 .box_top p { margin: 10px 0 10px;}
60 .box_top .img { width: 612px; height: 318px;}
61 .box_top a { color: #308DDB; }
62 
63 
64 #aside { float: right; width: 290px;  } 
65 .box { background:white; }
66 .box .header{ background: #707070 url("../images/bg_title.gif"); height: 36px; line-height: 36px; color: White; font-size: 14px; padding: 0 10px; }
67 .box .main{ padding: 0 10px; }
68 .box .list { line-height: 20px; padding: 1px; }
69 .box .list li{ margin-bottom: 6px; }
70 .box .split { border-bottom: 1px dotted #cccccc; padding-bottom: 5px; }
71 .box .list h3 { line-height: 26px; }
72 .box .list img { float: left; padding: 0 12px 0 0; }
73 .box .pager { text-align: center; padding-bottom: 10px;  }
74 .box .pager a { background: -moz-linear-gradient(top, #fafafa, #e7e7e7) ; display: inline-block; border: 1px solid #cdcdcd; padding: 6px 10px; border-radius: 5px;   }
75 
76 
77 #footer { height: 100px;}

HTML

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head>

 4     <title></title>

 5     <link href="css/style.css" rel="stylesheet" type="text/css" />

 6 </head>

 7 <body>

 8     <div class="wraper">

 9         <header id="header">

10             <h1 class="logo">

11                 <img src="images/logo.gif" />

12             </h1>

13             <div class="header_tools">

14                 <a href="javascript:'">登陆</a> / <a href="javascript:'">注册</a> <span><i class="rss"></i>

15                     订阅</span> <span><i class="save"></i>收藏</span> <span><i class="like"></i>投稿通道</span>

16             </div>

17             <div class="search">

18                 <input type="text" placeholder="请输入关键字" class="noborder" />

19                 <span class="search_bt">搜索</span>

20             </div>

21             <nav class="nav">

22                 <ul>

23                     <li><a href="javascript:'">首 页</a><i></i></li>

24                     <li><a href="javascript:'">观 点</a><i></i></li>

25                     <li><a href="javascript:'">深 度</a><i></i></li>

26                     <li><a href="javascript:'">作 者</a><i></i></li>

27                     <li><a href="javascript:'">标 签</a><i></i></li>

28                     <li><a href="javascript:'">钛爱铂</a><i></i></li>

29                     <li><a href="javascript:'">我的钛度</a><i></i></li>

30                 </ul>

31             </nav>

32             <div class="top_show clear">

33                 <div class="fl">

34                     当前位置：<a href="javascript:'">首 页</a></div>

35                 <div class="fr">

36                     热门：<a href="javascript:'">新媒体</a> <a href="javascript:'">一周策划</a> <a href="javascript:'">

37                         新创业者说</a> <a href="javascript:'">妙史</a> <a href="javascript:'">钛能吐槽</a></div>

38                 <div class="clear">

39                 </div>

40             </div>

41         </header>

42         <aside id="aside">

43             <div class="box">

44                 <h2 class="header">

45                     特色专栏</h2>

46                 <div class="main">

47                     <ul class="list">

48                         <li>

49                             <img src="pics/aside01.png" />

50                             <h3>

51                                 创业者法律课堂--创投法务后花园</h3>

52                             创业者法律课堂由商律师事务所推出，和创业者分享创业法律... </li>

53                         <li class="split ">

54                             <h3>

55                                 商场无姐妹，一场忽视“敬业竟...</h3>

56                             肥而缺乏实际经营管理能力，在一次酒会上认识了静，静的虚情假意让菲儿放下了戒备，合约过于疏忽各种细节，叔叔确实不想抄了。。。</li>

57                              <li>

58                             <img src="pics/aside02.png" />

59                             <h3>

60                                 创业者法律课堂</h3>

61                             创业者法律课堂由商律师事务所推出，和创业者分享创业法律... </li>

62                         <li class="split ">

63                             <h3>

64                                 商场无姐妹，一场忽视“敬业竟...</h3>

65                             肥而缺乏实际经营管理能力，在一次酒会上认识了静，静的虚情假意让菲儿放下了戒备，合约过于疏忽各种细节，叔叔确实不想抄了。。。</li>

66                     </ul>

67                     <div class="pager">

68                         <a href="javascript:'"><-->

69                         <a href="javascript:'"></a>

70                     </div>

71                 </div>

72             </div>

73             <div class="clear">

74             </div>

75         </aside>

76         <div id="main">

77             <div class="box_top">

78                 <h2>

79                     "虚拟运营商"英国样板解剖：乐购乐购！</h2>

80                 <p>

81                     身处一个移动电话渗透率高达180%以上的成熟市场，美工零售巨头Tesco（乐购）的电信子公司，却通过零售商特有优势实现了持续的逆势增长...</p>

82                 <div class="img">

83                     <img src="pics/01.png" />

84                 </div>

85                 <div class="mtb4 textr pdlr10">

86<a href="javascript:'">头条</a>,<a href="javascript:'">投稿</a>,<a href="javascript:'">电商</a>,<a

87                         href="javascript:'">虚拟运营商</a> 评论：（<a href="javascript:'">12</a>） 2013年04月18日8:31

88                     <a class="fontb" href="javascript:'">

前言

原型图

开始切图

开始布局

相关文章：

你感兴趣的文章：

标签云：