前言
周一离职并且入职了，于是开始了做新项目，那天我问了下前端大哥，我们做的项目需要兼容哪些浏览器，他说需要兼容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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="pics/aside01.png" />50 <h3>51 创业者法律课堂--创投法务后花园</h3>52 创业者法律课堂由商律师事务所推出，和创业者分享创业法律... </li>53 <li class="split ">54 <h3>55 商场无姐妹，一场忽视“敬业竟...</h3>56 肥而缺乏实际经营管理能力，在一次酒会上认识了静，静的虚情假意让菲儿放下了戒备，合约过于疏忽各种细节，叔叔确实不想抄了。。。</li>57 <li>58 <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="pics/01.png" />84 </div>85 <div class="mtb4 textr pdlr10">86 标签：<a href="javascript:'">头条</a>,<a href="javascript:'">投稿</a>,<a href="javascript:'">电商</a>,<a87 href="javascript:'">虚拟运营商</a> 评论：（<a href="javascript:'">12</a>） 2013年04月18日8:3188 <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
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦