DIV+CSS列表式布局（同意图片的应用）
生活随笔
收集整理的這篇文章主要介紹了
DIV+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 <!--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>
效果：
轉載于:https://www.cnblogs.com/ChineseMoonGod/p/5203688.html
總結
以上是生活随笔為你收集整理的DIV+CSS列表式布局（同意图片的应用）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： if参数小结
- 下一篇： CSS3选择器(二)--表单