DIV+CSS列表式布局（同意图片的应用）

最新推荐文章于 2022-08-30 15:37:26 发布

weixin_34355881

最新推荐文章于 2022-08-30 15:37:26 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/ChineseMoonGod/p/5203688.html

本文介绍了一个使用DIV和CSS实现的列表式布局案例，通过定义样式和使用特定的HTML结构，展示了如何创建一个包含多种功能项的美观且响应式的布局。每个列表项都配有一个图标和相应的说明文字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 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 <!--gbk,gb2312 中文-->
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 <!--页面三要素-->
 7 <title>DIV+CSS列表式布局</title>
 8 <meta name="keywords" content="关键字,关键字" />
 9 <meta name="description" content="描述" />
10 <!--js css-->
11 <style type="text/css">
12 body{background:#E6E6E6;font-family:"微软雅黑";font-size:12px;}
13 ul,li,h4,p{margin:0;padding:0;}
14 
15 .box{width:960px;height:500px;margin:0 auto;}
16 .box li{width:170px;float:left;list-style:none;background:url(images/icon.png) no-repeat;padding-left:100px;padding-top:10px;margin-bottom:50px;}
17 .box li h4{font-size:28px;font-weight:normal;}
18  p{font-size:14px;margin-top:3px;color:#666;}
19 .box li.i1{background-position:0 -10px;}
20 .box li.i2{background-position:0 -158px;}
21 .box li.i3{background-position:0 -310px;}
22 .box li.i4{background-position:0 -460px;}
23 .box li.i5{background-position:0 -610px;}
24 .box li.i6{background-position:0 -765px;}
25 
26 
27 </style>
28 </head>
29 
30 <body>
31 <ul class="box">
32 <li class="i1">
33     <h4>防骚扰</h4>
34     <p>智能拦截垃圾短信和骚扰电话，云识别陌生号码</p>
35 </li>
36 <li class="i2">
37     <h4>防吸费</h4>
38     <p>扫描并清理吸费应用，时刻管理流量和话费</p>
39 </li>
40 <li class="i3">
41     <h4>防病毒</h4>
42     <p>国际先进的杀毒引擎，安全防护你的手机</p>
43 </li>
44 <li class="i4">
45     <h4>一键加速</h4>
46     <p>深度研究拖慢手机应用，让手机提速30%</p>
47 </li>
48 <li class="i5">
49     <h4>清理垃圾</h4>
50     <p>精细分析系统残留垃圾，每日释放空间1MB</p>
51 </li>
52 <li class="i6">
53     <h4>应用管理</h4>
54     <p>卸载系统预装应用， 360°管理每一个应用</p>
55 </li>
56 
57 
58 </ul>
59 
60 
61 
62 </body>
63 </html>