1、padding的运用:子div继承父div的宽,子div的padding-left值是不会撑大的。

2、背景图片的运用:不平铺、定位

3、ul本身就是一个盒子,它的高度是li中的字体的默认高度撑起来的。

4、li是ul中的子盒子,padding-left可以控制他们的左边距离。

5、li与li之间的距离可以用字体的行高来控制。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.news{
width: 238px;
height: 166px;
border:1px solid #D9E0EE;
border-top: 3px solid #FF8400;
margin: 0 auto; }
.news-title{
height: 35px;
border-bottom: 1px solid #D9E0EE;
line-height: 35px;
padding-left: 12px;
}
ul,li{
list-style:none;
margin: 0;
padding: 0; }
ul{
margin-top: 14px;
}
li{
padding-left:19px;
height: 23px;
background: url("li_bg.jpg") no-repeat 9px 7px;
font-size:14px; }
</style>
</head>
<body>
<div class="news">
<div class="news-title">行业动态</div>
<ul>
<li>气质不错气质不错</li>
<li>气质不错气质不错</li>
<li>气质不错气质不错</li>
<li>气质不错气质不错</li>
<li>气质不错气质不错</li>
</ul>
</div>
</body>
</html>

效果:

CSS——行业动态demo的更多相关文章

  1. CSS居中demo

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  2. 时间轴CSS的Demo

    一.CSS代码(HTML5支持) /*time-line.css*/ .timeline { position: relative; padding: 20px 0 20px; list-style: ...

  3. css小demo

    span{ color: #ccc; float: right; font-weight: bold; display: inline-block; border-right: solid 1px # ...

  4. css sprite demo

    一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-h ...

  5. CSS——宠物demo

    注意:ul中自带padding值,需要清除. <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. 在线前端 JS 或 HTML 或 CSS 编写 Demo 处 JSbin 与 jsFiddle 比较

    JSBin 该编辑器的特点是编写可直接编写 HTML.CSS.JavaScript 并且可以在 output 中实时观察编写效果:可设置自动运行 JavasScript 代码,其中最大的好处是有一个 ...

  7. css样式DEMO

    <!-- 导入框 --> <div id="importWin" class="easyui-window" title="服务封装 ...

  8. 用CSS制作带图标的按钮

    先上一张效果图

  9. CSS float

    我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:float属性的特性     2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮 ...

随机推荐

  1. [codeVS1404] 字符串匹配

    时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master         题目描述 Description 给你两个串A,B,可以得到从A的任意位开始的子串和B匹配的长度. ...

  2. Oops, 'Microsoft.ACE.OLEDB.12.0' provider is not registered on the local machine error

    环境: Win7 64位 + VS2005 + Office2013 64位 现象:程序为一个Excel导入程序,导入时报「'Microsoft.ACE.OLEDB.12.0' provider is ...

  3. ci 传参

    ci框架 方法上传参 public function index($cataid,$payeid,$per){ echo $cataid; echo $payeid; echo $per; } 直接就 ...

  4. ArcGIS 10.1 for Server安装教程系列—— Linux下的单机安装

    http://www.oschina.net/question/565065_81231      因为Linux具有稳定,功能强大等特性,因此常常被用来做为企业内部的服务器,我们的很多用户也是将Ar ...

  5. Lua的面向对象程序设计

    Account={balance=} function Account.withdraw(self,v) self.balance=self.balance-v end a={balance=,wit ...

  6. C/C++ Threads): Creating worker threads that will be listening to jobs and executing them concurrently when wanted

    Suppose we have two workers. Each worker has an id of 0 and 1. Also suppose that we have jobs arrivi ...

  7. Mac OS忘记password怎么办?无光盘破解Mac OS的管理员password

    mac系统10.8.5升级10.10 出现故障,重新启动系统无法登陆,降级系统10.9 后更新10.9.3 finder无法打开,root权限没了,又再一次覆盖安装10.9(为了保护原系统文件.所以覆 ...

  8. 一致性哈希server的数据维护

    本文是实例说明一致性哈希server的数据维护用途. 理论说明參考:http://blog.csdn.net/chenjiayi_yun/article/details/41624603 例如以下图所 ...

  9. iOS 打开扬声器以及插入耳机的操作

    废话不多说说一下现状 网上好多关于扬声器的操作,可是问题多多.SDK7.X 和SDK7.X以上版本号有点诧异 #import <Foundation/Foundation.h> #impo ...

  10. POJ-3268-最短路(dijkstra算法)

    Silver Cow Party Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 12494   Accepted: 5568 ...