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列表式布局（同意图片的应用）相关推荐

html中怎么写排行榜,div css列表布局排行榜代码
特效描述:div css列表布局排行榜代码.div css列表布局排行榜代码代码结构 1. 引入CSS 2. HTML代码问问专家问问专家在社区问问最专业的知识贡献用户委婉小小闻道有先后 ...
CSS - 响应式布局（二）响应式栅格系统
目录响应式栅格系统栅格栅格系统响应式栅格系统 BootStrap响应式栅格系统简单说明利用SCSS实现BootStrap的响应式栅格系统响应式栅格系统栅格在弄清楚响应式栅格系统前,我 ...
美工效果图大小 html,六、DIV CSS实战之布局美工图分析与切图
DIV CSS实战之布局分析与切图美工图到DIV CSS制作成HTML中间必不可少的步骤为对美工图的分析和美工图的切图.平时大家说切图也是从这个步骤捡取的一个词语来代表css完整制作的代名词,就像d ...
CSS响应式布局（自适应布局）
CSS 响应式布局也称自适应布局,是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念,简单来讲就是一个网站能够兼容多个不同的终端(设备),而不是为每个终端做一个特定的版本.这个 ...
java 自适应屏幕_自适应屏幕的CSS响应式布局设计技巧总结
摘要:这篇CSS教程栏目下的"自适应屏幕的CSS响应式布局设计技巧总结",介绍的技术点是"css响应式.响应式布局.响应式.自适应.CSS.设计",希望对大家开 ...
div css表单布局的五个小技巧
div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. 1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加 ...
css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
Divbrush 网页Div css画板定位布局系统 v1.8
Divbrush 网页Div css画板定位布局系统软件是一款专业制作DIV+CSS的切图与样式布局的网页前期设计软件. Divbrushv1.0基本上实现了可视化DIV容器布局的画板辅助功能,通过图 ...
android的文本框内容居中显示图片,DIV+CSS中让布局居中_背景图片居中_文字内容居中...
在DIV CSS布局的页面里,从布局内容到页面里文章文字居中都是非常重要的,而 1.首先介绍使用css属性让整体布局的居中: 设置对象的父级内容居中,这里一个页面的为父级是什么呢?我们可以想象整个页面 ...

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

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

最新文章

热门文章