标签：
（纯CSS）效果图：
因为是自学，就自己找到一个格局一点点打出来的，因为还是小白，不知道是否违反了规则或者有错误的地方.请大家多多见谅，看到有错误的地方尽管提！！
代码：
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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 body,ul,h2,h3,h4{margin:0; padding:0;} 8 img{border:0; vertical-align:top;} 9 a{ text-decoration:none; color:#3333;} 10 li{list-style:none;} 11 .clear{zoom:1;} 12 .clear:after{content:""; clear:both; display:block;} 13 .wrap{width:620px;} 14 .head{ background:url(pic7.png) no-repeat 11px 16px;} 15 .head h2{ font-weight:bold; font-size:14px; line-height:26px; padding:22px 0 0 20px;} 16 .head h2 a{ font-style:normal;font-size:12px; line-height:24px; color:#666; padding-left:415px;} 17 .left{width:300px; padding-top:15px; padding-left:10px; padding-bottom:6px; float:left;} 18 .pic{width:290px; height:230px;} 19 .pic a b{ line-height:20px; font-size:14px; padding-top:6px; color:#000;} 20 .title li{padding-top:20px; line-height:20px; font-size:12px;} 21 22 .title li a{padding-right:14px;} 23 .title li b{color:#CCC; font-size:12px; line-height:20px; padding-right:10px;} 24 .leftbotoom{padding-top:5px; } 25 .content{ padding-left:20px;} 26 .content li{font-size:12px; line-height:20px; list-style:square;} 27 .leftbotoom b{ line-height:20px; font-size:12px; color:#999;} 28 .leftbotoom b a{color:#000;} 29 .right{float:right; width:290px; padding-top:15px;} 30 .right img{width:128px; height:80px;} 31 .rightpic li{ width:130px; height:122px; float:left; padding-right:10px; padding-bottom:10px;} 32 .rightpic li b{ font-weight:normal; color:#000; font-size:12px; line-height:24px; padding-right:10px; padding-bottom:0;} 33 .rightpic li .number1{ padding-left:20px;background:url(pic3.png) no-repeat 0 0;font-size:10px; color:#666; line-height:14px;} 34 .rightpic li .number2{background:url(pic4.png) no-repeat 5px 0; padding-left:25px;} 35 36 </style> 37 </head> 38 39 <body> 40 <div class="wrap clear"> 41 <div class="head"> 42 <h2>今日头条<a>热度 深度 青春季</a></h2> 43 44 </div> 45 <div class="left"> 46 <div class="lefttop"> 47 <div class="pic"> 48 <a href="#"> 49 <img src="pic1.png" /> 50 <b>实拍二炮跨区联合演习 千里机动发射导弹</b> 51 </a> 52 </div> 53 <ul class="title"> 54 55 56 <li> 57 <a> 58 <img src="pic2.png" /> 59 <span>安徽卫视</span> 60 </a> 61 62 63 <img src="pic3.png" /> 64 <b>2,974,128</b> 65 66 67 <img src="pic4.png" /> 68 <b>1,804</b> 69 </li> 70 </ul> 71 </div> 72 <div class="leftbotoom"> 73 <ul class="content"> 74 <li> 75 [热点]中国将提交东海划界案 大陆架延伸到冲绳海槽 76 </li> 77 <li> 78 [热点]中国将提交东海划界案 大陆架延伸到冲绳海槽 79 </li> 80 <li> 81 [热点]中国将提交东海划界案 大陆架延伸到冲绳海槽 82 </li> 83 <li> 84 [热点]中国将提交东海划界案 大陆架延伸到冲绳海槽 85 </li> 86 </ul> 87 <b>深度阅读：<a>军演</a></b> 88 </div> 89 </div> 90 91 <div class="right"> 92 <ul class="rightpic"> 93 <li> 94 <a href="#"> 95 <img src="加勒比海盗/pic1.png" /> 96 <b>日本新任驻华大使病逝</b> 97 <span class="number1">234,45<span class="number2">33333,00</span></span> 98 </a> 99 </li> 100 <li> 101 <a href="#"> 102 <img src="加勒比海盗/pic1.png" /> 103 <b>日本新任驻华大使病逝</b> 104 <span class="number1">234,45<span class="number2">33333,00</span></span> 105 </a> 106 </li> 107 <li> 108 <a href="#"> 109 <img src="加勒比海盗/pic1.png" /> 110 <b>日本新任驻华大使病逝</b> 111 <span class="number1">234,45<span class="number2">33333,00</span></span> 112 </a> 113 </li> 114 <li> 115 <a href="#"> 116 <img src="加勒比海盗/pic1.png" /> 117 <b>日本新任驻华大使病逝</b> 118 <span class="number1">234,45<span class="number2">33333,00</span></span> 119 </a> 120 </li> 121 <li> 122 <a href="#"> 123 <img src="加勒比海盗/pic1.png" /> 124 <b>日本新任驻华大使病逝</b> 125 <span class="number1">234,45<span class="number2">33333,00</span></span> 126 </a> 127 </li> 128 <li> 129 <a href="#"> 130 <img src="加勒比海盗/pic1.png" /> 131 <b>日本新任驻华大使病逝</b> 132 <span class="number1">234,45<span class="number2">33333,00</span></span> 133 </a> 134 </li> 135 </ul> 136 137 </div> 138 </div> 139 140 </body> 141 </html>
标签：
原文地址：http://www.cnblogs.com/baoweiluobo/p/5869566.html
