【实战HTML5与CSS3】免费制作威客页面啦（附源码）
原文 http://www.cnblogs.com/yexiaochai/archive/2013/05/05/3060770.html
前言
接着昨天的写，居然有圆友找到了网站原网址，这里也一并弄出来了，发现他们做出来其实和原型图还有一点差异呢：
原型图
今天我们要做的是这张图，我在威客上面找了好久，终于找到一张较合适的图呀，今天我们就来无偿奉献下吧，有图有真相，先上图吧！！
这里也对自己提出要求，希望做出来的页面与设计图完全一致，但估计有点玄，希望大致一致吧，于是我们开始动手吧！
开始切图
第一步，让我们先把背景图给搞下来吧，这个尺寸与大小我感觉应该合适吧。
第二步，将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>
上面右边小图标还没加上呢，于是我们给他加上吧，应该是绝对定位了。
好，接着左边往下做吧，最后写着写着，居然就写完了。。。。
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; font-family: "微软雅黑",Tahoma,Verdana,Geneva,sans-serif; color: #666666; word-break: break-all; word-wrap: break-word; } 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 .poa { position: absolute; } 12 .por { position: relative; } 13 .noborder { border: 0 none; } 14 .clear { clear: both; } 15 .fl { float: left; } 16 .fr { float: right; } 17 .fn { float: none; } 18 .fontb { font-weight: bold; } 19 .textl { text-align: left;} 20 .textc { text-align: center;} 21 22 .textr { text-align: right;} 23 .mtb2 { margin: 2px 0;} 24 .mtb4 { margin: 4px 0;} 25 .mtb6 { margin: 6px 0;} 26 27 .mt8 { margin-top: 8px; } 28 .mt12 { margin-top: 12px; } 29 .mt15 { margin-top: 15px; } 30 .mt10 { margin-top: 10px; } 31 32 .mb10 { margin-bottom: 10px; } 33 .pd10 { padding: 10px;} 34 .pdb10 { padding-bottom: 10px;} 35 36 .pdtb5 { padding-top: 5px; padding-bottom: 5px; } 37 .pdtb10 { padding-top: 10px; padding-bottom: 10px; } 38 .pdlr5 { padding-left: 5px; padding-right: 5px; } 39 .pdlr10 { padding-left: 10px; padding-right: 10px; } 40 .backwhite { background-color: White; } 41 .boxborder { border: 1px solid #c9c9c9;} 42 .bordersolid { border-style: solid;} 43 .button { background: -moz-linear-gradient(top, #fafafa, #e7e7e7); background: -webkit-linear-gradient(top, #fafafa, #e7e7e7); background: -o-linear-gradient(top, #fafafa, #e7e7e7); background: linear-gradient(top, #fafafa, #e7e7e7); display: inline-block; border: 1px solid #cdcdcd; padding: 4px 10px; border-radius: 5px;} 44 45 46 .wraper { width: 960px; margin: 0 auto;} 47 48 #header { position: relative; } 49 .logo { display: inline-block; margin-top: 14px; } 50 .header_tools { display: inline-block; position: absolute; top: 10px; right: 0; } 51 .header_tools a { color: #8c8b8b; } 52 .header_tools span { display: inline-block; padding-left: 22px; position: relative; } 53 54 .header_tools i { display: inline-block; width: 20px; height: 20px; position: absolute; background: url("../images/icons.gif") no-repeat; left: 0; top: -4px; } 55 .header_tools .rss { background-position: -2px -2px;} 56 .header_tools .save { background-position: -22px -1px;} 57 .header_tools .like { background-position: -42px 0;} 58 59 .search { position: absolute; right: 0; top: 55px; } 60 .search input { width: 175px; height: 25px; line-height: 25px; background-color: #b6b6b6; } 61 .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; } 62 .nav { height: 38px; background: #707070 url("../images/bg_title.gif"); margin-top: 10px; } 63 .nav li{ display: inline-block; width: 88px; text-align: center; position: relative; } 64 .nav a{ color: White; font-size: 14px; font-weight: bold; line-height: 38px; } 65 .nav i{ display: inline-block; height: 38px; width: 2px; line-height: 38px; position: absolute; right: 0; background: -moz-linear-gradient(left, #acabab, #686868); background: linear-gradient(left, #acabab, #686868); background: -webkit-linear-gradient(left, #acabab, #686868); background: -o-linear-gradient(left, #acabab, #686868);} 66 .top_show { margin: 7px 0 14px;} 67 .top_show a{ color: #308ddb;} 68 69 #main { width: 650px; float: left; } 70 .box_top { background: white; padding: 20px 16px; border: 1px solid #c9c9c9;} 71 .box_top h2 { color: #636f76; font-size: 22px; } 72 .box_top p { margin: 10px 0 10px;} 73 .box_top .img { width: 612px; height: 318px;} 74 .box_top a { color: #308DDB; } 75 76 .box_img { background: white; padding: 20px 16px 15px; margin-top: 15px; border: 1px solid #c9c9c9;} 77 .box_img li{ display: inline-block; width: 188px; vertical-align: top; margin: 0 7px; } 78 .box_img li a { display: inline-block; text-align: left; } 79 .box_img li span { display: block; padding: 4px 0; font-weight: bold; font-size: 13px; } 80 .box_img .pager { margin: 10px 0 0 0; text-align: center; } 81 .box_img .pager li { width: 0; height: 0; border: 4px solid #c5c4c4; border-radius: 4px; cursor: pointer; margin: 0 5px; } 82 .box_img .pager li.sec { border-color: #636f76; } 83 84 .article_list article { background: white; padding: 20px 16px 15px; margin-top: 15px; line-height: 22px; border: 1px solid #c9c9c9; position: relative; } 85 .article_list article img { float: left; border: 1px solid #cccccc; padding: 4px; margin: 0 15px 0 5px; max-width: 204px; max-height: 154px;} 86 .article_list article h2 { color: #636F76; font-size: 18px; padding: 0 0 10px; } 87 .article_list article footer { position: relative; } 88 .article_list article footer .fl { float: none; left: 0; } 89 .article_list article footer .fr { float: none; right: 0; } 90 91 .article_list article footer a { color: #308DDB; } 92 .article_list .icon { background: url("../images/icons.gif") -2px -237px; position: absolute; top: -7px; right: 0; width: 52px; height: 28px; } 93 .article_list .icon span { text-align: center; color: White; font-weight:bold; font-style: normal; font-size: 14px; line-height: 26px; padding-left: 34px;} 94 95 .article_list .pager { margin: 15px auto; text-align: center; } 96 .article_list .pager li { display: inline-block; } 97 .article_list .pager a{ background: -moz-linear-gradient(top, #fafafa, #e7e7e7); background: -webkit-linear-gradient(top, #fafafa, #e7e7e7); background: -o-linear-gradient(top, #fafafa, #e7e7e7); background: linear-gradient(top, #fafafa, #e7e7e7); display: inline-block; border: 1px solid #cdcdcd; padding: 4px 10px; border-radius: 5px;} 98 99 100 101 #aside { float: right; width: 290px; } 102 .box { background:white; border: 1px solid #c9c9c9;} 103 .box .header{ background: #707070 url("../images/bg_title.gif"); height: 36px; line-height: 36px; color: White; font-size: 14px; padding: 0 10px; } 104 .box .main{ padding: 0 10px; } 105 .box .list { line-height: 20px; padding: 1px; } 106 .box .list li{ margin-bottom: 6px; border: none; } 107 .box .list .split { border-bottom: 1px dotted #cccccc; padding-bottom: 5px; } 108 .box .list h3 { line-height: 26px; } 109 .box .list img { float: left; padding: 0 12px 0 0; } 110 .box .pager { text-align: center; padding-bottom: 10px; } 111 .box .pager a { background: -moz-linear-gradient(top, #fafafa, #e7e7e7) ; background: -o-linear-gradient(top, #fafafa, #e7e7e7) ; background: -webkit-linear-gradient(top, #fafafa, #e7e7e7) ; border: 1px solid #cdcdcd; padding: 4px 10px; border-radius: 5px; } 112 .box .ts_tag { position: absolute; top: 10px; right: -32px; } 113 .box .ts_tag a { background: url("../images/icons.gif") -2px -78px; display: inline-block; width: 34px; height: 150px; } 114 115 .comment .list img { max-height: 45px; max-width: 45px; border: 1px solid #999999; padding: 1px; margin: 5px; } 116 .comment .list a { color: #308DDB; font-weight: bold; display: block; padding: 3px 0; } 117 .comment .list .end a { display: inline; font-weight: normal; } 118 119 .hot_news { border: 1px solid #C9C9C9; background-color: White; margin-top: 15px; border-radius: 4px; position: relative; vertical-align: top; } 120 .hot_news ul { margin-top: 10px; } 121 .hot_news li { text-align: left; padding: 8px; border-top: 1px dotted #CCCCCC; overflow: hidden; height: 28px; margin: 0 4px; } 122 .hot_news .hot{ background-color: White; padding: 5px; display: inline-block; width: 172px; border-radius: 4px 0 0 4px; text-align: center; } 123 .hot_news .button { padding: 4px 20px;} 124 .hot_news .hot .button { padding: 4px 30px;} 125 126 .hot_news .recent{ background-color: #ededed; padding: 5px; display: inline-block; width: 91px; border-left: 1px solid #C9C9C9; border-radius: 0 4px 4px 0; text-align: center; } 127 128 .hot_news .icon { width: 9px; height: 22px; position: absolute; border: 1px solid #9b9a9a; left: 177px; top: 120px; border-radius: 5px 0 0 5px; border-width: 1px 0 1px 1px; background-color: #ededed; } 129 .triangle { display: inline-block; border: 6px solid #9b9a9a; border-color: #ededed #9b9a9a #ededed #ededed ; position: absolute; top: 126px; left: 181px; border-left: 0; } 130 131 .triangle2 { display: inline-block; border: 3px solid #9b9a9a; border-color: #9b9a9a #ededed #9b9a9a #9b9a9a; position: absolute; border-left: 0; top: 129px; left: 184px;} 132 133 .partner { border: 1px solid #C9C9C9; padding: 10px; } 134 .partner li { display: inline-block; width: 85px; line-height: 22px;} 135 136 #footer { background-color: #ACABAB; padding: 15px 10px 10px 10px; color: White; font-size: 14px; } 137 138 #footer a{ color: White; } 139 #footer p{ color: #777777; font-size: 12px; padding: 5px 0; } 140 #footer .aliyun { float: right; margin-right: 150px; }
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 <section id="main"> 43 <div class="box_top"> 44 <h2> 45 "虚拟运营商"英国样板解剖：乐购乐购！</h2> 46 <p> 47 身处一个移动电话渗透率高达180%以上的成熟市场，美工零售巨头Tesco（乐购）的电信子公司，却通过零售商特有优势实现了持续的逆势增长...</p> 48 <div class="img"> 49 <img src="pics/01.png" /> 50 </div> 51 <div class="mtb4 textr pdlr10"> 52 标签：<a href="javascript:'">头条</a>,<a href="javascript:'">投稿</a>,<a href="javascript:'">电商</a>,<a 53 href="javascript:'">虚拟运营商</a> 评论：（<a href="javascript:'">12</a>） 2013年04月18日8:31 54 <a class="fontb" href="javascript:'">【前往头条】</a></div> 55 </div> 56 <div class="box_img"> 57 <ul> 58 <li><a href="http://www.tmtpost.com/34495.html"> 59 <img src="pics/img01.jpg" /> 60 <span>一个IT奶爸的移动医疗随想</span></a></li> 61 <li><a href="http://www.tmtpost.com/34515.html"> 62 <img src="pics/img02.jpg" /> 63 <span>知乎安卓版客户端推“一个”模式：慢有慢的理由</span></a></li> 64 <li><a href="http://www.tmtpost.com/34276.html"> 65 <img src="pics/img03.jpg" /> 66 <span>任正非抵抗危机</span></a></li> 67 </ul> 68 <ul class="pager"> 69 <li class="sec"></li> 70 <li></li> 71 <li></li> 72 </ul> 73 </div> 74 <section class="article_list"> 75 <article> 76 <i class="icon"><span>0</span></i> 77 <img src="pics/ar01.jpg" /> 78 <h2> 79 谷歌眼镜的商业模式：风险转嫁给开发者 80 </h2> 81 <p> 82 谷歌眼镜目前已成科技领域热议的话题，从某种程度上，谷歌眼镜项目的商业模式已经获得初步成功，这个项目在规避风险方面做的极好。 83 </p> 84 <footer> 85 <span class="fl"><a rel="tag" href="http://www.tmtpost.com/tag/structure-of-business"> 86 商业模式</a>, <a rel="tag" href="http://www.tmtpost.com/tag/%e8%b0%b7%e6%ad%8c">谷歌</a> 87 </span><span class=" fr"><a href="http://www.tmtpost.com/author/sohu">搜狐IT</a> | 2013-05-05 88 11:11 </span> 89 <div class="clear"> 90 </div> 91 </footer> 92 </article> 93 <article> 94 <i class="icon"><span>0</span></i> 95 <img src="pics/ar02.jpg" /> 96 <h2> 97 为何众筹模式无法逆袭好莱坞娱乐工业帝国 98 </h2> 99 <p> 100 独立制作、众筹集资，美剧制作者和独立艺术家看似建立起了全新的传媒生态系统，威胁到娱乐产业内容生产的传统模式，但仍无法逆袭，《纸牌屋》和《权利游戏》代表的“大制作”远未终结。 101 </p> 102 <footer> 103 <span class=" fl"><a rel="tag" href="http://www.tmtpost.com/tag/structure-of-business"> 104 商业模式</a>, <a rel="tag" href="http://www.tmtpost.com/tag/%e8%b0%b7%e6%ad%8c">谷歌</a> 105 </span><span class=" fr"><a href="http://www.tmtpost.com/author/sohu">搜狐IT</a> | 2013-05-05 106 11:11 </span> 107 <div class="clear"> 108 </div> 109 </footer> 110 </article> 111 <article> 112 <i class="icon"><span>0</span></i> 113 <img src="pics/ar01.jpg" /> 114 <h2> 115 谷歌眼镜的商业模式：风险转嫁给开发者 116 </h2> 117 <p> 118 谷歌眼镜目前已成科技领域热议的话题，从某种程度上，谷歌眼镜项目的商业模式已经获得初步成功，这个项目在规避风险方面做的极好。 119 </p> 120 <footer> 121 <span class="fl"><a rel="tag" href="http://www.tmtpost.com/tag/structure-of-business"> 122 商业模式</a>, <a rel="tag" href="http://www.tmtpost.com/tag/%e8%b0%b7%e6%ad%8c">谷歌</a> 123 </span><span class=" fr"><a href="http://www.tmtpost.com/author/sohu">搜狐IT</a> | 2013-05-05 124 11:11 </span> 125 <div class="clear"> 126 </div> 127 </footer> 128 </article> 129 <article> 130 <i class="icon"><span>0</span></i> 131 <img src="pics/ar02.jpg" /> 132 <h2> 133 为何众筹模式无法逆袭好莱坞娱乐工业帝国 134 </h2> 135 <p> 136 独立制作、众筹集资，美剧制作者和独立艺术家看似建立起了全新的传媒生态系统，威胁到娱乐产业内容生产的传统模式，但仍无法逆袭，《纸牌屋》和《权利游戏》代表的“大制作”远未终结。 137 </p> 138 <footer> 139 <span class=" fl"><a rel="tag" href="http://www.tmtpost.com/tag/structure-of-business"> 140 商业模式</a>, <a rel="tag" href="http://www.tmtpost.com/tag/%e8%b0%b7%e6%ad%8c">谷歌</a> 141 </span><span class=" fr"><a href="http://www.tmtpost.com/author/sohu">搜狐IT</a> | 2013-05-05 142 11:11 </span> 143 <div class="clear"> 144 </div> 145 </footer> 146 </article> 147 <article> 148 <i class="icon"><span>0</span></i> 149 <img src="pics/ar01.jpg" /> 150 <h2> 151 谷歌眼镜的商业模式：风险转嫁给开发者 152 </h2> 153 <p> 154 谷歌眼镜目前已成科技领域热议的话题，从某种程度上，谷歌眼镜项目的商业模式已经获得初步成功，这个项目在规避风险方面做的极好。 155 </p> 156 <footer> 157 <span class="fl"><a rel="tag" href="http://www.tmtpost.com/tag/structure-of-business"> 158 商业模式</a>, <a rel="tag" href="http://www.tmtpost.com/tag/%e8%b0%b7%e6%ad%8c">谷歌</a> 159 </span><span class=" fr"><a href="http://www.tmtpost.com/author/sohu">搜狐IT</a> | 2013-05-05 160 11:11 </span> 161 <div class="clear"> 162 </div> 163 </footer> 164 </article> 165 <article> 166 <i class="icon"><span>0</span></i> 167 <img src="pics/ar02.jpg" /> 168 <h2> 169 为何众筹模式无法逆袭好莱坞娱乐工业帝国 170 </h2> 171 <p> 172 独立制作、众筹集资，美剧制作者和独立艺术家看似建立起了全新的传媒生态系统，威胁到娱乐产业内容生产的传统模式，但仍无法逆袭，《纸牌屋》和《权利游戏》代表的“大制作”远未终结。 173 </p> 174 <footer> 175 <span class=" fl"><a rel="tag" href="http://www.tmtpost.com/tag/structure-of-business"> 176 商业模式</a>, <a rel="tag" href="http://www.tmtpost.com/tag/%e8%b0%b7%e6%ad%8c">谷歌</a> 177 </span><span class=" fr"><a href="http://www.tmtpost.com/author/sohu">搜狐IT</a> | 2013-05-05 178 11:11 </span> 179 <div class="clear"> 180 </div> 181 </footer> 182 </article> 183 <article> 184 <i class="icon"><span>0</span></i> 185 <img src="pics/ar03.jpg" /> 186 <h2> 187 谷歌眼镜的商业模式：风险转嫁给开发者 188 </h2> 189 <p> 190 谷歌眼镜目前已成科技领域热议的话题，从某种程度上，谷歌眼镜项目的商业模式已经获得初步成功，这个项目在规避风险方面做的极好。 191 </p> 192 <footer> 193 <span class=" fl"><a rel="tag" href="http://www.tmtpost.com/tag/structure-of-business"> 194 商业模式</a>, <a rel="tag" href="http://www.tmtpost.com/tag/%e8%b0%b7%e6%ad%8c">谷歌</a> 195 </span><span class=" fr"><a href="http://www.tmtpost.com/author/sohu">搜狐IT</a> | 2013-05-05 196 11:11 </span> 197 <div class="clear"> 198 </div> 199 </footer> 200 </article> 201 <article> 202 <i class="icon"><span>0</span></i> 203 <img src="pics/ar04.jpg" /> 204 <h2> 205 谷歌眼镜的商业模式：风险转嫁给开发者 206 </h2> 207 <p> 208 谷歌眼镜目前已成科技领域热议的话题，从某种程度上，谷歌眼镜项目的商业模式已经获得初步成功，这个项目在规避风险方面做的极好。 209 </p> 210 <footer> 211 <span class=" fl"><a rel="tag" href="http://www.tmtpost.com/tag/structure-of-business"> 212 商业模式</a>, <a rel="tag" href="http://www.tmtpost.com/tag/%e8%b0%b7%e6%ad%8c">谷歌</a> 213 </span><span class=" fr"><a href="http://www.tmtpost.com/author/sohu">搜狐IT</a> | 2013-05-05 214 11:11 </span> 215 <div class="clear"> 216 </div> 217 </footer> 218 </article> 219 <article> 220 <i class="icon"><span>0</span></i> 221 <img src="pics/ar05.jpg" /> 222 <h2> 223 谷歌眼镜的商业模式：风险转嫁给开发者 224 </h2> 225 <p> 226 谷歌眼镜目前已成科技领域热议的话题，从某种程度上，谷歌眼镜项目的商业模式已经获得初步成功，这个项目在规避风险方面做的极好。 227 </p> 228 <footer> 229 <span class=" fl"><a rel="tag" href="http://www.tmtpost.com/tag/structure-of-business"> 230 商业模式</a>, <a rel="tag" href="http://www.tmtpost.com/tag/%e8%b0%b7%e6%ad%8c">谷歌</a> 231 </span><span class=" fr"><a href="http://www.tmtpost.com/author/sohu">搜狐IT</a> | 2013-05-05 232 11:11 </span> 233 <div class="clear"> 234 </div> 235 </footer> 236 </article> 237 <article> 238 <i class="icon"><span>0</span></i> 239 <img src="pics/ar02.jpg" /> 240 <h2> 241 为何众筹模式无法逆袭好莱坞娱乐工业帝国 242 </h2> 243 <p> 244 独立制作、众筹集资，美剧制作者和独立艺术家看似建立起了全新的传媒生态系统，威胁到娱乐产业内容生产的传统模式，但仍无法逆袭，《纸牌屋》和《权利游戏》代表的“大制作”远未终结。 245 </p> 246 <footer> 247 <span class=" fl"><a rel="tag" href="http://www.tmtpost.com/tag/structure-of-business"> 248 商业模式</a>, <a rel="tag" href="http://www.tmtpost.com/tag/%e8%b0%b7%e6%ad%8c">谷歌</a> 249 </span><span class=" fr"><a href="http://www.tmtpost.com/author/sohu">搜狐IT</a> | 2013-05-05 250 11:11 </span> 251 <div class="clear"> 252 </div> 253 </footer> 254 </article> 255 <article> 256 <i class="icon"><span>0</span></i> 257 <img src="pics/ar03.jpg" /> 258 <h2> 259 谷歌眼镜的商业模式：风险转嫁给开发者 260 </h2> 261 <p> 262 谷歌眼镜目前已成科技领域热议的话题，从某种程度上，谷歌眼镜项目的商业模式已经获得初步成功，这个项目在规避风险方面做的极好。 263 </p> 264 <footer> 265 <span class=" fl"><a rel="tag" href="http://www.tmtpost.com/tag/structure-of-business"> 266 商业模式</a>, <a rel="tag" href="http://www.tmtpost.com/tag/%e8%b0%b7%e6%ad%8c">谷歌</a> 267 </span><span class=" fr"><a href="http://www.tmtpost.com/author/sohu">搜狐IT</a> | 2013-05-05 268 11:11 </span> 269 <div class="clear"> 270 </div> 271 </footer> 272 </article> 273 <article> 274 <i class="icon"><span>0</span></i> 275 <img src="pics/ar04.jpg" /> 276 <h2> 277 谷歌眼镜的商业模式：风险转嫁给开发者 278 </h2> 279 <p> 280 谷歌眼镜目前已成科技领域热议的话题，从某种程度上，谷歌眼镜项目的商业模式已经获得初步成功，这个项目在规避风险方面做的极好。 281 </p> 282 <footer> 283 <span class=" fl"><a rel="tag" href="http://www.tmtpost.com/tag/structure-of-business"> 284 商业模式</a>, <a rel="tag" href="http://www.tmtpost.com/tag/%e8%b0%b7%e6%ad%8c">谷歌</a> 285 </span><span class=" fr"><a href="http://www.tmtpost.com/author/sohu">搜狐IT</a> | 2013-05-05 286 11:11 </span> 287 <div class="clear"> 288 </div> 289 </footer> 290 </article> 291 <article> 292 <i class="icon"><span>0</span></i> 293 <img src="pics/ar05.jpg" /> 294 <h2> 295 谷歌眼镜的商业模式：风险转嫁给开发者 296 </h2> 297 <p> 298 谷歌眼镜目前已成科技领域热议的话题，从某种程度上，谷歌眼镜项目的商业模式已经获得初步成功，这个项目在规避风险方面做的极好。 299 </p> 300 <footer> 301 <span class=" fl"><a rel="tag" href="http://www.tmtpost.com/tag/structure-of-business"> 302 商业模式</a>, <a rel="tag" href="http://www.tmtpost.com/tag/%e8%b0%b7%e6%ad%8c">谷歌</a> 303 </span><span class=" fr"><a href="http://www.tmtpost.com/author/sohu">搜狐IT</a> | 2013-05-05 304 11:11 </span> 305 <div class="clear"> 306 </div> 307 </footer> 308 </article> 309 <footer> 310 <ul class="pager"> 311 <li class="total"><a href="javascript:'">页数:1/68</a></li> 312 <li><a href="javascript:'">1</a></li> 313 <li><a href="javascript:'">2</a></li> 314 <li><a href="javascript:'">3</a></li> 315 <li><a href="javascript:'">4</a></li> 316 <li><a href="javascript:'">5</a></li> 317 <li><a href="javascript:'">6</a></li> 318 <li><a href="javascript:'">7</a></li> 319 <li>...</li> 320 <li><a href="javascript:'">68</a></li> 321 </ul> 322 </footer> 323 </section> 324 <div class="clear"> 325 </div> 326 </section> 327 <aside id="aside"> 328 <div class="box"> 329 <h2 class="header"> 330 特色专栏</h2> 331 <div class="main por"> 332 <div class="ts_tag"> 333 <a href="javascript:'"></a> 334 </div> 335 <ul class="list"> 336 <li> 337 <img src="pics/aside01.png" /> 338 <h3> 339 创业者法律课堂--创投法务后花园</h3> 340 创业者法律课堂由商律师事务所推出，和创业者分享创业法律... </li> 341 <li class="split "> 342 <h3> 343 商场无姐妹，一场忽视“敬业竟...</h3> 344 肥而缺乏实际经营管理能力，在一次酒会上认识了静，静的虚情假意让菲儿放下了戒备，合约过于疏忽各种细节，叔叔确实不想抄了。。。</li> 345 <li> 346 <img src="pics/aside02.png" /> 347 <h3> 348 创业者法律课堂</h3> 349 创业者法律课堂由商律师事务所推出，和创业者分享创业法律... </li> 350 <li class="split "> 351 <h3> 352 商场无姐妹，一场忽视“敬业竟...</h3> 353 肥而缺乏实际经营管理能力，在一次酒会上认识了静，静的虚情假意让菲儿放下了戒备，合约过于疏忽各种细节，叔叔确实不想抄了。。。</li> 354 </ul> 355 <div class="pager"> 356 <a href="javascript:'"><--上一篇</a> <a href="javascript:'">下一篇--></a> 357 </div> 358 </div> 359 </div> 360 <div class="mt15 backwhite textc pdtb10 boxborder"> 361 <a title="移动端的媒体未来" href="/tag/mediafuture"> 362 <img src="pics/event.jpg" /> 363 </a> 364 </div> 365 <div class="box mt15"> 366 <h2 class="header"> 367 最新金牌</h2> 368 <div class="main por"> 369 <ul class="list"> 370 <li> 371 <img src="pics/aside01.png" /> 372 <h3> 373 创业者法律课堂--创投法务后花园</h3> 374 创业者法律课堂由商律师事务所推出，和创业者分享创业法律... </li> 375 <li class="split "> 376 <h3> 377 商场无姐妹，一场忽视“敬业竟...</h3> 378 肥而缺乏实际经营管理能力，在一次酒会上认识了静，静的虚情假意让菲儿放下了戒备，合约过于疏忽各种细节，叔叔确实不想抄了。。。</li> 379 <li> 380 <img src="pics/aside02.png" /> 381 <h3> 382 创业者法律课堂</h3> 383 创业者法律课堂由商律师事务所推出，和创业者分享创业法律... </li> 384 <li class="split "> 385 <h3> 386 商场无姐妹，一场忽视“敬业竟...</h3> 387 肥而缺乏实际经营管理能力，在一次酒会上认识了静，静的虚情假意让菲儿放下了戒备，合约过于疏忽各种细节，叔叔确实不想抄了。。。</li> 388 <li> 389 <img src="pics/aside01.png" /> 390 <h3> 391 创业者法律课堂--创投法务后花园</h3> 392 创业者法律课堂由商律师事务所推出，和创业者分享创业法律... </li> 393 <li class="split "> 394 <h3> 395 商场无姐妹，一场忽视“敬业竟...</h3> 396 肥而缺乏实际经营管理能力，在一次酒会上认识了静，静的虚情假意让菲儿放下了戒备，合约过于疏忽各种细节，叔叔确实不想抄了。。。</li> 397 <li> 398 <img src="pics/aside02.png" /> 399 <h3> 400 创业者法律课堂</h3> 401 创业者法律课堂由商律师事务所推出，和创业者分享创业法律... </li> 402 <li class="split "> 403 <h3> 404 商场无姐妹，一场忽视“敬业竟...</h3> 405 肥而缺乏实际经营管理能力，在一次酒会上认识了静，静的虚情假意让菲儿放下了戒备，合约过于疏忽各种细节，叔叔确实不想抄了。。。</li> 406 </ul> 407 <div class="pdb10"> 408 <a href="javascript:;">查看更多竞拍好文</a> 409 </div> 410 </div> 411 </div> 412 <div class="hot_news "> 413 <div class="hot"> 414 <a href="javascript:l" class="button">热门</a> 415 <ul> 416 <li><a title="机会只此一次！“狙击京东IPO”，苏宁的救命稻草" href="http://www.tmtpost.com/33819.html">机会只此一次！“狙击京东IPO”，</a></li><li> 417 <a title="阿里入股新浪微博，5.86亿美元，18％，值了！" href="http://www.tmtpost.com/34016.html">阿里入股新浪微博，5.86亿美元，18％</a></li><li> 418 <a title="都错了！阿里要用新浪微博的数据干这个" href="http://www.tmtpost.com/34413.html">都错了！阿里要用新浪微博的数据干这</a></li><li> 419 <a title="为什么客户提起占了他50％单子的华为，仍然评价为屌丝" href="http://www.tmtpost.com/33847.html">为什么客户提起占了他50％单子的华为</a></li><li> 420 <a title="一件让薛蛮子、徐新、靳海涛三位投资大佬同时感动的事" href="http://www.tmtpost.com/33765.html">一件让薛蛮子、徐新、靳海涛三位投资</a></li> 421 </ul> 422 </div> 423 <div class="recent"> 424 <a href="javascript:l" class="button">近期</a> 425 <ul> 426 <li><a title="60家企业争食虚拟运营市场：看上去很美？" href="http://www.tmtpost.com/34914.html">60家企业争食虚拟运营市场：看上去很</a></li><li> 427 <a title="一周投融资小结（2013.4.29-5.5）" href="http://www.tmtpost.com/34862.html">一周投融资小结（2013.4.29-5.5）</a></li><li> 428 <a title="谷歌眼镜的商业模式：风险转嫁给开发者" href="http://www.tmtpost.com/34885.html">谷歌眼镜的商业模式：风险转嫁给开发</a></li><li> 429 <a title="不要Made in China！我们要Mark in China" href="http://www.tmtpost.com/34837.html"> 430 不要Made in China！我们要Mark i</a></li><li><a title="暴发户与社会名流之间的交易，谁来Hold住谁？" href="http://www.tmtpost.com/34860.html"> 431 暴发户与社会名流之间的交易，谁来H</a></li> 432 </ul> 433 </div> 434 <div class="icon"> 435 </div> 436 <span class="triangle"></span><i class="triangle2"></i> 437 </div> 438 <div class="box mt15 comment"> 439 <h2 class="header"> 440 经常评论</h2> 441 <div class="main por"> 442 <ul class="list"> 443 <li class="split "> 444 <img src="pics/p01.jpg" /> 445 <a href="http://www.tmtpost.com/author/yangjin" rel="nofollow external" class="rc-reviewer"> 446 葱葱</a> 嘿嘿作者说的很形象，这就是各种圈子里“皇上不急太监急”的写照。不过，观点无价值的问题我不同意，观点不一定“对了”才有价值，我相信从实证延伸出来的探讨，属于社会科学的范畴，而社会科学的研究不是用实验说话的，这个产品死了？就没意义了？反倒在互联网发展的历史上意义重大。社会科学，就是通过一个一个实证去探讨，众多博客就为此做出了贡献。 447 <div class="end mtb6"> 448 原文：<a href="http://www.tmtpost.com/34430.html" rel="nofollow" class="rc-post">你的观点是什么，重要吗？</a> 449 </div> 450 </li> 451 <li class="split "> 452 <img src="pics/p02.jpg" /> 453 <a href="http://www.tmtpost.com/author/yangjin" rel="nofollow external" class="rc-reviewer"> 454 一个卖脑子的人</a> 企业真正的危机往往来自内部而不是外部，在走向不断成功的路上胜利往往被一场突来的危机打败而走向落寞，根本原因在于企业失去了激情，创新，危机感的企业文化，而被小富即安的文化所代替。推荐朋友们认真阅读此文，审视在此多事之秋时期，我们应如何应对？ 455 <div class="end mtb6"> 456 原文：<a href="http://www.tmtpost.com/34430.html" rel="nofollow" class="rc-post">任正非抵抗危机</a> 457 </div> 458 </li> 459 <li class="split "> 460 <img src="pics/p01.jpg" /> 461 <a href="http://www.tmtpost.com/author/yangjin" rel="nofollow external" class="rc-reviewer"> 462 葱葱</a> 嘿嘿作者说的很形象，这就是各种圈子里“皇上不急太监急”的写照。不过，观点无价值的问题我不同意，观点不一定“对了”才有价值，我相信从实证延伸出来的探讨，属于社会科学的范畴，而社会科学的研究不是用实验说话的，这个产品死了？就没意义了？反倒在互联网发展的历史上意义重大。社会科学，就是通过一个一个实证去探讨，众多博客就为此做出了贡献。 463 <div class="end mtb6"> 464 原文：<a href="http://www.tmtpost.com/34430.html" rel="nofollow" class="rc-post">你的观点是什么，重要吗？</a> 465 </div> 466 </li> 467 <li class="split "> 468 <img src="pics/p02.jpg" /> 469 <a href="http://www.tmtpost.com/author/yangjin" rel="nofollow external" class="rc-reviewer"> 470 一个卖脑子的人</a> 企业真正的危机往往来自内部而不是外部，在走向不断成功的路上胜利往往被一场突来的危机打败而走向落寞，根本原因在于企业失去了激情，创新，危机感的企业文化，而被小富即安的文化所代替。推荐朋友们认真阅读此文，审视在此多事之秋时期，我们应如何应对？ 471 <div class="end mtb6"> 472 原文：<a href="http://www.tmtpost.com/34430.html" rel="nofollow" class="rc-post">任正非抵抗危机</a> 473 </div> 474 </li> 475 <li class="split "> 476 <img src="pics/p01.jpg" /> 477 <a href="http://www.tmtpost.com/author/yangjin" rel="nofollow external" class="rc-reviewer"> 478 葱葱</a> 嘿嘿作者说的很形象，这就是各种圈子里“皇上不急太监急”的写照。不过，观点无价值的问题我不同意，观点不一定“对了”才有价值，我相信从实证延伸出来的探讨，属于社会科学的范畴，而社会科学的研究不是用实验说话的，这个产品死了？就没意义了？反倒在互联网发展的历史上意义重大。社会科学，就是通过一个一个实证去探讨，众多博客就为此做出了贡献。 479 <div class="end mtb6"> 480 原文：<a href="http://www.tmtpost.com/34430.html" rel="nofollow" class="rc-post">你的观点是什么，重要吗？</a> 481 </div> 482 </li> 483 <li class="split "> 484 <img src="pics/p02.jpg" /> 485 <a href="http://www.tmtpost.com/author/yangjin" rel="nofollow external" class="rc-reviewer"> 486 一个卖脑子的人</a> 企业真正的危机往往来自内部而不是外部，在走向不断成功的路上胜利往往被一场突来的危机打败而走向落寞，根本原因在于企业失去了激情，创新，危机感的企业文化，而被小富即安的文化所代替。推荐朋友们认真阅读此文，审视在此多事之秋时期，我们应如何应对？ 487 <div class="end mtb6"> 488 原文：<a href="http://www.tmtpost.com/34430.html" rel="nofollow" class="rc-post">任正非抵抗危机</a> 489 </div> 490 </li> 491 </ul> 492 </div> 493 </div> 494 <div class="clear"> 495 </div> 496 </aside> 497 <div class="clear"> 498 </div> 499 <div class="partner"> 500 <h3> 501 合作伙伴</h3> 502 <ul> 503 <li><a target="_blank" title="新浪科技" href="http://tech.sina.com.cn/">新浪科技</a></li> 504 <li><a target="_blank" title="腾讯科技" href="http://tech.qq.com/">腾讯科技</a></li> 505 <li><a target="_blank" title="网易科技" href="http://tech.163.com/">网易科技</a></li> 506 <li><a target="_blank" title="搜狐IT" href="http://it.sohu.com/">搜狐IT</a></li> 507 <li><a target="_blank" title="凤凰科技" href="http://tech.ifeng.com/">凤凰科技</a></li> 508 <li><a target="_blank" title="阿里云" href="http://cnrdn.com/uGj5">阿里云</a></li> 509 <li><a target="_blank" title="DoNews" href="http://www.donews.com">DoNews</a></li> 510 <li><a target="_blank" title="经理人分享" href="http://www.managershare.com/">经理人分享</a></li> 511 <li><a target="_blank" title="创业家" href="http://www.iheima.com">i黑马</a></li> 512 <li><a target="_blank" title="i天下网商" href="http://i.wshang.com/">i天下网商</a></li> 513 <li><a target="_blank" title="鲜果网" href="http://www.xianguo.com/">鲜果网</a></li> 514 <li><a target="_blank" title="中国网科技" href="http://tech.china.com.cn/">中国网科技</a></li> 515 <li><a target="_blank" title="站长之家" href="http://www.chinaz.com/">站长之家</a></li> 516 <li><a target="_blank" title="和讯科技" href="http://tech.hexun.com/">和讯科技</a></li> 517 <li><a target="_blank" title="新华网科技" href="http://www.news.cn/tech/">新华网科技</a></li> 518 <li><a target="_blank" title="CNET科技资讯" href="http://www.cnetnews.com.cn/">CNET科技资讯</a></li> 519 <li><a target="_blank" title="财新网" href="http://www.caixin.com/">财新网</a></li> 520 <li><a target="_blank" title="网易云阅读" href="http://yuedu.163.com/contentcenter">网易云阅读</a></li> 521 <li><a target="_blank" title="天地互联" href="http://wwwconferencecn">天地互联</a></li> 522 <li><a target="_blank" title="光明网科技" href="http://it.gmw.cn/">光明网科技</a></li> 523 <li><a target="_blank" title="通信产业网" href="http://www.ccidcom.com/">通信产业网</a></li> 524 <li><a target="_blank" href="http://www.itdalao.com">IT大佬网</a></li> 525 <li><a target="_blank" title="搜课网" href="http://zxx.sooker.com/">搜课网</a></li> 526 </ul> 527 </div> 528 </div> 529 <footer id="footer"> 530 <div class="wraper"> 531 <a class="aliyun" target="_blank" href="http://cnrdn.com/3pe5"> 532 <img title="阿里云计算" alt="" src="http://www.tmtpost.com/wp-content/themes/newskin/images/ali-logo.gif"> 533 </a><a href="/about_tmtpost">关于我们</a> | <a href="/jobs" rel="nofollow">加入我们</a> 534 | <a href="/contact" rel="nofollow">联系我们</a> | <a href="/report" rel="nofollow">寻求报道</a> 535 | <a href="/tougao1" rel="nofollow">投稿通道</a> 536 <p> 537 Copyright © 2011-2013 <a href="http://www.tmtpost.com/" target="_blank">钛媒体 TMTpost.com</a>. 538 All Rights Reserved. 京ICP备12042878号 | 539 </p> 540 </div> 541 </footer> 542 </body> 543 </html>
图片较长，这里就不截图了。
结语
嗯，就这样，我第一次完整切图形成HTML结束。
源码下载：http://files.cnblogs.com/yexiaochai/16%E5%B8%83%E5%B1%80.zip
若是您觉得此篇文章不错，请不要吝啬顶哟！