原文

前言

周一离职并且入职了，于是开始了做新项目，那天我问了下前端大哥，我们做的项目需要兼容哪些浏览器，他说需要兼容IE9以上与chrome，ff，我一下就诡异的笑了。。。。

这不是HTML5与CSS3项目的温床吗？这次真的捡到宝了，再也不用担心IE678的问题了，可以肆意的使用最新的技术了。

紧接着问题也来了，我现在需要切图了，对于我这种前端，css一直是短板，更何况切图！！！说实话我还真没有完整的切一张图来试试，于是今天让我们来试试吧！！！

原型图

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

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

开始切图

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

第二步，将logo剪切了

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

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

开始布局

第一步，重设浏览器样式

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  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 

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算了。。。于是就这个样子啦：

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

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

 

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;}

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                 
            
81                     身处一个移动电话渗透率高达180%以上的成熟市场，美工零售巨头Tesco（乐购）的电信子公司，却通过零售商特有优势实现了持续的逆势增长...
82                 
            
             83                     
             84                 
            
85                 
            
             86                     标签：
             头条,
             投稿,
             电商,
             
              虚拟运营商 评论：（
              12） 2013年04月18日8:3188                     
              【前往头条】
             
            
89             
           
90         
          
91     
         
92     
         
          93     
         
94 95 

结语

好了，今天时间不早了，暂时做到这个程度，明天将它结束吧。

源码下载：