内容栏_2

 

运行效果:

内容栏_2_第1张图片

 

div布局图:

内容栏_2_第2张图片

 

下面是前台代码:

  1 <div class ="content_1">
  2 
  3             <div class ="top">
  4                 <div class ="top_left">
  5                     <h2><a href ="#">互联网</a></h2>
  6                     <span>&nbsp;/&nbsp;Internet</span>
  7                     <p><a href ="#">搜索引擎</a></p>
  8                     <p><a href ="#">电子商务</a></p>
  9                     <p><a href ="#">传闻爆料</a></p>
 10                     <p><a href ="#">互联网评论</a></p>
 11                 </div><!--top_left end.-->
 12                 <div class ="top_right">
 13                     <p><a href ="#">More&gt;&gt;</a></p>
 14                 </div><!--top_right end.-->
 15             </div><!--top end.-->
 16 
 17             <div class ="bottom">
 18                 <div class ="bottom_left">
 19                     <div class ="bottom_left_top">
 20                         <div class ="bottom_left_top_title">
 21                             <h4><a href ="#">谷歌咨询委员会:“被遗忘权”应仅限于欧洲</a></h4>
 22                         </div><!--bottom_left_top_title end.-->
 23                         <div class ="bottom_left_top_content">
 24                             <ul>
 25                                 <li><a href ="#">创业也分帮派? 没错他们是“清华帮”</a></li>
 26                                 <li><a href ="#">营收和利润超预期 Twitter开盘后大涨12%</a></li>
 27                                 <li><a href ="#">骆驼:从设计阶段就开始和用户交朋友</a></li>
 28                                 <li><a href ="#">快递“春节模式”如何 宿迁的“剁手族”们造吗?</a></li>
 29                                 <li><a href ="#">基因技术日趋成熟,预测癌症SO EASY</a></li>
 30                             </ul>
 31                         </div><!--bottom_left_top_content end.-->
 32                     </div><!--bottom_left_top end.-->
 33 
 34                     <div class ="bottom_left_bottom">
 35                         <div class ="bottom_left_bottom_title">
 36                             <h4><a href ="#">名片天下:用工业4.0颠覆名片制造业</a></h4>
 37                         </div><!--bottom_left_bottom_title end.-->
 38                         <div class ="bottom_left_bottom_content">
 39                             <ul>
 40                                 <li><a href ="#">创业也分帮派? 没错他们是“清华帮”</a></li>
 41                                 <li><a href ="#">营收和利润超预期 Twitter开盘后大涨12%</a></li>
 42                                 <li><a href ="#">骆驼:从设计阶段就开始和用户交朋友</a></li>
 43                                 <li><a href ="#">快递“春节模式”如何 宿迁的“剁手族”们造吗?</a></li>
 44                                 <li><a href ="#">基因技术日趋成熟,预测癌症SO EASY</a></li>
 45                             </ul>
 46                         </div><!--bottom_left_bottom_content end.-->
 47                     </div><!--bottom_left_bottom end.-->
 48                 </div><!--bottom_left end.-->
 49 
 50 
 51                 <div class ="bottom_zhong">
 52                     <div class ="bottom_zhong_top">
 53                         <h4>&nbsp;互联网图片</h4>
 54                     </div><!--bottom_zhong_top end.-->
 55                     <div class ="bootom_zhong_bottom">
 56                         <div class ="bootom_zhong_bottom_top">
 57                             <img src ="images/1.png"/>
 58                             <p>北京朝阳区2014年“凤凰计划”认定仪式今</p>
 59                         </div>
 60                         <div class ="bootom_zhong_bottom_bottom">
 61                             <div class ="bootom_zhong_bottom_bottom_left">
 62                                 <img src ="images/2.png"/>
 63                                 <p>肖明超:媒体行业5</p>
 64                             </div>
 65                             <div class ="bootom_zhong_bottom_bottom_right">
 66                                 <img src ="images/3.png"/>
 67                                 <p>谷歌遭遇史上最严s</p>
 68                             </div>
 69                         </div>
 70                     </div><!--bootom_zhong_bottom end.-->
 71                 </div><!--bottom_zhong end.-->
 72 
 73 
 74                 <div class ="bottom_right">
 75                     <div class ="bottom_right_top">
 76                         <div class ="bottom_right_top_title">
 77                             <h4>&nbsp;<a href ="#">公司动态</a></h4>
 78                             <span><a href ="#">More&gt;&gt;</a></span>
 79                         </div><!--bottom_right_top_title end.-->
 80                         <div class ="bottom_right_top_content">
 81                            <ul>
 82                                <li><a href ="#">Facebook收购硅谷21层办公大楼 价值4亿美元</a></li>
 83                                <li><a href ="#">不走寻常路 康佳SLED“硬件+内容”产品战略</a></li>
 84                                <li><a href ="#">亚马逊云服务或保持对微软和谷歌的优势</a></li>
 85                                <li><a href ="#">人人网又活了?花亿美元重手笔投资车易拍</a></li>
 86                                <li><a href ="#">传Twitter将推付费加V服务 收费每年约1美元</a></li>
 87                                <li><a href ="#">网络中立制度:微信封杀闹剧的解药</a></li>
 88                            </ul>
 89                         </div>
 90                     </div><!--bottom_right_top_content end.-->
 91 
 92                     <div class ="bottom_right_bottom">
 93                         <div class ="bottom_right_bottom_title">
 94                             <h4>&nbsp;<a href ="#">人物动态</a></h4>
 95                             <span><a href ="#">More&gt;&gt;</a></span>
 96                         </div><!--bottom_right_bottom_title end.-->
 97                         <div class ="bottom_right_bottom_content">
 98                             <ul>
 99                                <li><a href ="#">Facebook收购硅谷21层办公大楼 价值4亿美元</a></li>
100                                <li><a href ="#">不走寻常路 康佳SLED“硬件+内容”产品战略</a></li>
101                                <li><a href ="#">亚马逊云服务或保持对微软和谷歌的优势</a></li>
102                                <li><a href ="#">人人网又活了?花亿美元重手笔投资车易拍</a></li>
103                                <li><a href ="#">传Twitter将推付费加V服务 收费每年约1美元</a></li>
104                                <li><a href ="#">网络中立制度:微信封杀闹剧的解药</a></li>
105                            </ul>
106                         </div><!--bottom_right_bottom_content end.-->
107                     </div>
108                 </div><!--bottom_right end.-->
109 
110             </div><!--bottom end.-->
111 
112         </div><!--content_1 end.-->
View Code

 

下面是其所用到的CSS样式:

  1 /*总体设置*/
  2 *{
  3     margin:0px;
  4     padding:0px;
  5 
  6     font-family:"微软雅黑";
  7 }
  8 
  9 /*主题内容的设置*/
 10 body {
 11     background-color:#ffffff;
 12 }
 13 
 14 /*总体布局设置*/
 15 .wrap {
 16     width:1000px;
 17     margin:0 auto;
 18 }
 19 
 20 /*总体上对 a标签 进行设置*/
 21 a:link, a:visited {
 22     text-decoration:none;
 23     color:#202020;
 24 }
 25 a:hover, a:active {
 26     text-decoration:none;
 27     color:#B81D18;
 28 }
 29 
 30 /*内容块*/
 31 .content_1, .content_2, .content_3, .content_4, .content_5, .content_6 {
 32     margin:0 auto;
 33     margin-top:30px;
 34     
 35     width:985px;
 36     height:455px;
 37     border-top:2px solid #202020;
 38 }
 39 
 40 /*头部*/
 41 .top {
 42     height:50px;
 43     border-bottom:1px solid #004687;
 44 }
 45 
 46 /*头部-左侧*/
 47 .top_left {
 48     width:800px;
 49     height:50px;
 50     float:left;
 51 }
 52 
 53 /*头部-左侧-大标题及其之后的 a 标签*/
 54 .top_left a:link, .top_left a:visited {
 55     color:#004687;
 56     text-decoration:none;
 57 }
 58 .top_left a:hover, .top_left a:active {
 59     color:#B81D18;
 60     text-decoration:none;
 61 }
 62 
 63 /*头部-左侧内容的 H2 标签*/
 64 .top_left H2 {
 65     line-height:50px;
 66     float:left;
 67 }
 68 
 69 /*头部-左侧内容的 span 标签*/
 70 .top_left span {
 71     font-size:16px;
 72     line-height:55px;
 73     float:left;
 74 }
 75 
 76 /*头部-左侧内容的 p 标签*/
 77 .top_left p {
 78     float:left;
 79     line-height:55px;
 80     font-size:17px;
 81     margin-left:20px;
 82 }
 83 
 84 /*头部-右侧*/
 85 .top_right {
 86     width:185px;
 87     height:50px;
 88     float:left;
 89 }
 90 
 91 /*头部-右侧内容后的 p 标签*/
 92 .top_right p{
 93     float:right;
 94     line-height:55px;
 95     font-size:13px;
 96     color:#B6B6B6;
 97 }
 98 
 99 
100 
101 /*底部*/
102 .bottom {
103     height:405px;
104 }
105 
106 /*底部-左侧*/
107 .bottom_left {
108     height:405px;
109     width:385px;
110     float:left;
111 }
112 
113 /*底部-左侧-上半部分*/
114 .bottom_left_top {
115     height:173px;
116     width:385px;
117     margin-top:20px;
118     border-bottom:1px dashed #B6B6B6;
119 }
120 
121 /*底部-左侧-上半部分-标题*/
122 .bottom_left_top_title {
123     height:18px;
124     width:385px;
125 }
126 
127 /*底部-左侧-上半部分-标题下的 H4 标签*/
128 .bottom_left_top_title h4 {
129     line-height:18px;
130     float:left;
131 }
132 
133 /*底部-左侧-上半部分-内容*/
134 .bottom_left_top_content {
135     height:155px;
136     width:385px;
137 }
138 
139 /*底部-左侧-上半部分-内容下的 ul 标签*/
140 .bottom_left_top_content ul {
141     margin-left:20px;
142     margin-top:10px;
143 }
144 
145 /*底部-左侧-上半部分-内容下的 li 标签*/
146 .bottom_left_top_content li {
147     font-size:15px;
148     line-height:25px;
149 }
150 
151 /*底部-左侧-下半部分*/
152 .bottom_left_bottom {
153     height:172px;
154     width:385px;
155     margin-top:25px;
156     margin-bottom:40px;
157 }
158 
159 /*底部-左侧-下半部分-标题*/
160 .bottom_left_bottom_title {
161     height:18px;
162     width:385px;
163 }
164 
165 /*底部-左侧-下半部分-标题下的 H4 标签*/
166 .bottom_left_bottom_title h4 {
167     line-height:18px;
168     float:left;
169 }
170 
171 /*底部-左侧-下半部分-内容*/
172 .bottom_left_bottom_content {
173     height:154px;
174     width:385px;
175 }
176 
177 /*底部-左侧-下半部分-内容下的 ul 标签*/
178 .bottom_left_bottom_content ul {
179     margin-left:20px;
180     margin-top:10px;
181 }
182 
183 /*底部-左侧-下半部分-内容下的 li 标签*/
184 .bottom_left_bottom_content li {
185     font-size:15px;
186     line-height:25px;
187 }
188 
189 
190 
191 /*底部-中间*/
192 .bottom_zhong {
193     height:405px;
194     width:240px;
195     float:left;
196     margin-left:35px;
197     margin-right:35px;
198 }
199 
200 /*底部-中间-上半部分*/
201 .bottom_zhong_top {
202     height:18px;
203     width:240px;
204     margin-top:20px;
205     border-left:2px solid #202020;
206 }
207 
208 /*底部-中间-上半部分下的p标签*/
209 .bottom_zhong_top h4 {
210     line-height:18px;
211 }
212 
213 /*底部-中间-下半部分*/
214 .bootom_zhong_bottom {
215     height:327px;
216     width:240px;
217     margin-bottom:40px;
218 }
219 
220 /*底部-中间-下半部分- img 标签*/
221 .bootom_zhong_bottom_top img {
222     float:left;
223     margin-top:20px;
224 }
225 
226 /*底部-中间-下半部分- p 标签*/
227 .bootom_zhong_bottom_top p {
228     font-size:12px;
229     text-align:center;
230     padding-top:20px;
231 }
232 
233 /*底部-中间-下半部分-img标签*/
234 .bootom_zhong_bottom_bottom_left {
235     margin-top:25px;
236     float:left;
237 }
238 
239 .bootom_zhong_bottom_bottom_left p {
240     font-size:12px;
241     text-align:center;
242 }
243 
244 /*底部-中间-下半部分-img标签*/
245 .bootom_zhong_bottom_bottom_right {
246     float:right;
247     margin-top:25px;
248 }
249 
250 .bootom_zhong_bottom_bottom_right p {
251     font-size:12px;
252     text-align:center;
253 }
254 
255 
256 
257 /*底部-右侧*/
258 .bottom_right {
259     height:405px;
260     width:290px;
261     float:left;
262 }
263 
264 /*底部-右侧-上半部分*/
265 .bottom_right_top {
266     height:178px;
267     width:290px;
268     margin-top:20px;
269 }
270 
271 /*底部-右侧-上半部分-标题*/
272 .bottom_right_top_title {
273     height:18px;
274     width:290px;
275     border-left:2px solid #202020;
276 }
277 
278 /*底部-右侧-上半部分-标题下的h4标签*/
279 .bottom_right_top_title h4{
280     float:left;
281     line-height:18px;
282 }
283 
284 /*底部-右侧-上半部分-标题下的 span 标签*/
285 .bottom_right_top_title span {
286     float:right;
287     line-height:15px;
288     font-size:12px;
289 }
290 
291 /*底部-右侧-上半部分-内容*/
292 .bottom_right_top_content {
293     height:160px;
294     width:290px;
295 }
296 
297 /*底部-右侧-上半部分-内容下的 ul 标签*/
298 .bottom_right_top_content ul {
299     margin-left:18px;
300     margin-top:5px;
301 }
302 
303 /*底部-右侧-上半部分-内容下的 li 标签*/
304 .bottom_right_top_content li {
305     line-height:26px;
306     font-size:13px;
307 }
308 
309 /*底部-右侧-下半部分*/
310 .bottom_right_bottom {
311     height:167px;
312     width:290px;
313     margin-bottom:40px;
314     margin-top:20px;
315 }
316 
317 /*底部-右侧-下半部分-标题*/
318 .bottom_right_bottom_title {
319     height:18px;
320     width:290px;
321     border-left:2px solid #202020;
322 }
323 
324 /*底部-右侧-下半部分-标题下的 h4 标签*/
325 .bottom_right_bottom_title h4 {
326     line-height:18px;
327     float:left;
328 }
329 
330 /*底部-右侧-下半部分-标题下的 span 标签*/
331 .bottom_right_bottom_title span {
332     line-height:18px;
333     float:right;
334     font-size:12px;
335 }
336 
337 /*底部-右侧-下半部分-内容*/
338 .bottom_right_bottom_content {
339     height:149px;
340     width:290px;
341 }
342 
343 /*底部-右侧-下半部分-内容下的 ul 标签*/
344 .bottom_right_bottom_content ul {
345     margin-left:18px;
346     margin-top:5px;
347 }
348 
349 /*底部-右侧-下半部分-内容下的 li 标签*/
350 .bottom_right_bottom_content li {
351     line-height:26px;
352     font-size:13px;
353 }
354 
355 
356 
357 /*中间的图片以后换成焦点图*/
358 .pic {
359     margin:0 auto;
360     width:985px;
361     margin-top:30px;
362 }
View Code

 

你可能感兴趣的:(内容栏_2)