前言

周一離職並且入職了，於是開始了做新項目，那天我問了下前端大哥，我們做的項目需要兼容哪些瀏覽器，他說需要兼容IE9以上與chrome，ff，我一下就詭異的笑了。。。。

這不是HTML5與CSS3項目的溫床嗎？這次真的撿到寶了，再也不用擔心IE678的問題了，可以肆意的使用最新的技術了。

緊接着問題也來了，我現在需要切圖了，對於我這種前端，css一直是短板，更何況切圖！！！說實話我還真沒有完整的切一張圖來試試，於是今天讓我們來試試吧！！！

原型圖

今天我們要做的是這張圖，我在威客上面找了好久，終於找到一張較合適的圖呀，今天我們就來無償奉獻下吧，有圖有真相，先上圖吧！！

這里也對自己提出要求，希望做出來的頁面與設計圖完全一致，但估計有點玄，希望大致一致吧，於是我們開始動手吧！

開始切圖

第一步，讓我們先把背景圖給搞下來吧，這個尺寸與大小我感覺應該合適吧。

第二步，將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     <section id="main">
38     </section>
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:'"><--上一篇</a>
69                         <a href="javascript:'">下一篇--></a>
70                     </div>
71                 </div>
72             </div>
73             <div class="clear">
74             </div>
75         </aside>
76         <section 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:'">【前往頭條】</a></div>
89             </div>
90         </section>
91     </div>
92     <footer id="footer">
93     </footer>
94 </body>
95 </html>

結語

好了，今天時間不早了，暫時做到這個程度，明天將它結束吧。

源碼下載：http://files.cnblogs.com/yexiaochai/16%E5%B8%83%E5%B1%80.zip

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 【實戰HTML5與CSS3】免費制作威客頁面啦（附源碼） HTML5和css3的總結 HTML5和CSS3提高分享9款用HTML5/CSS3制作的動物人物動畫 html5/css3響應式頁面開發總結 [html5/css3] css3 文字和字體樣式 DIV CSS3和html5 CSS3有什么區別 html5和css3的新特性 HTML5實踐 -- CSS3 Media Queries html5與css3面試題（1）