CSS——行业动态demo
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的更多相关文章
- CSS居中demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- 时间轴CSS的Demo
一.CSS代码(HTML5支持) /*time-line.css*/ .timeline { position: relative; padding: 20px 0 20px; list-style: ...
- css小demo
span{ color: #ccc; float: right; font-weight: bold; display: inline-block; border-right: solid 1px # ...
- css sprite demo
一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-h ...
- CSS——宠物demo
注意:ul中自带padding值,需要清除. <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 在线前端 JS 或 HTML 或 CSS 编写 Demo 处 JSbin 与 jsFiddle 比较
JSBin 该编辑器的特点是编写可直接编写 HTML.CSS.JavaScript 并且可以在 output 中实时观察编写效果:可设置自动运行 JavasScript 代码,其中最大的好处是有一个 ...
- css样式DEMO
<!-- 导入框 --> <div id="importWin" class="easyui-window" title="服务封装 ...
- 用CSS制作带图标的按钮
先上一张效果图
- CSS float
我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:float属性的特性 2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮 ...
随机推荐
- [codeVS1404] 字符串匹配
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 给你两个串A,B,可以得到从A的任意位开始的子串和B匹配的长度. ...
- 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 ...
- ci 传参
ci框架 方法上传参 public function index($cataid,$payeid,$per){ echo $cataid; echo $payeid; echo $per; } 直接就 ...
- ArcGIS 10.1 for Server安装教程系列—— Linux下的单机安装
http://www.oschina.net/question/565065_81231 因为Linux具有稳定,功能强大等特性,因此常常被用来做为企业内部的服务器,我们的很多用户也是将Ar ...
- Lua的面向对象程序设计
Account={balance=} function Account.withdraw(self,v) self.balance=self.balance-v end a={balance=,wit ...
- 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 ...
- Mac OS忘记password怎么办?无光盘破解Mac OS的管理员password
mac系统10.8.5升级10.10 出现故障,重新启动系统无法登陆,降级系统10.9 后更新10.9.3 finder无法打开,root权限没了,又再一次覆盖安装10.9(为了保护原系统文件.所以覆 ...
- 一致性哈希server的数据维护
本文是实例说明一致性哈希server的数据维护用途. 理论说明參考:http://blog.csdn.net/chenjiayi_yun/article/details/41624603 例如以下图所 ...
- iOS 打开扬声器以及插入耳机的操作
废话不多说说一下现状 网上好多关于扬声器的操作,可是问题多多.SDK7.X 和SDK7.X以上版本号有点诧异 #import <Foundation/Foundation.h> #impo ...
- POJ-3268-最短路(dijkstra算法)
Silver Cow Party Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 12494 Accepted: 5568 ...