（纯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>
时间： 2024-08-08 21:56:37