CSS实例:用ul+li打造图书目录效果
来源:互联网 发布:linux snmp安装与配置 编辑:程序博客网 时间:2024/06/05 11:59
ul无序列表是一个非常重要的HTML标签,页面中许多元素都用它来组织。就此问题,我们形成了下面的实例。
图书目录往往由章节标题,页次,以及破折虚线组成。我们将章节标题建立链接以a标签组织。页次用行内元素span标签组织。这两部分内容分别处于一个独立的列表项li中。虚线的效果以li的背景图片来实现。
下面开始HTML编码:
<ul>
<li><a href="http://www.52css.com/article.asp?id=947">杂谈24则CSS网页布局开发小技巧 </a><span>9</span></li>
<li><a href="http://www.52css.com/article.asp?id=946">css expression属性将javascript与css结合起来 </a><span>719</span></li>
<li><a href="http://www.52css.com/article.asp?id=945">CSS网页布局及网站开发常犯的几种错误 </a><span>329</span></li>
<li><a href="http://www.52css.com/article.asp?id=941">CSS控制字符宽度省略号效果 兼容浏览器 </a><span>152</span></li>
<li><a href="http://www.52css.com/article.asp?id=939">一个IE6在no-repeat情况下依然重复背景图片的BUG </a><span>1000</span></li>
<li><a href="http://www.52css.com/article.asp?id=938">完善IE中伪类:hover的使用及BUG 续 </a><span>10</span></li>
</ul>
这就是一个典型的UL无序列表。在列表项LI中存在着A和SPAN两种元素。以CSS对其进行样式定义。
ul {
width:480px;
margin:0 auto;
padding:8px 0;
border:1px solid #ccc;
}
对UL进行总体样式定义。整体水平居中对齐。
ul li {
width:450px;
height:28px;
margin:0 auto;
list-style-type:none;
background:url(line_bg.gif) repeat-x 0 13px;
}
设置列表项的宽高,定义背景图片为水平方向重复,垂直方向居于13px的位置。
ul li a {
float:left;
height:28px;
padding:0 5px 0 0;
line-height:28px;
font-size:14px;
color:#00f;
text-decoration:none;
background:#fff;
}
定义A元素的CSS样式。设置向左浮动后自动转换为块元素,定义高度与右内边距。特别注意需要设置背景色为白色#fff。避免了文字下面出现LI的背景虚线。
ul li span {
float:right;
height:28px;
padding:0 0 0 5px;
line-height:28px;
font-size:14px;
color:#666;
background:#fff;
}
定义SPAN元素的CSS样式。其原理与A元素类似。最终以CSS实现了用ul+li打造图书目录的效果。
本文转自诺库技术网
- CSS实例:用ul+li打造图书目录效果
- css ul li 换行
- ul li CSS 样式
- css ul li问题
- css中的ul>li
- ul li 实例
- css中的ul li ul li ul li ul li 实现四级菜单
- ul li实现table效果
- ul li css 的表格
- css+ul+li制作导航
- ul li+ css 实线表格
- CSS ul li 样式详解
- css子选择器 ul>li
- Css <ul><li>列表的样式的控制</li></ul>
- 用ul、li标签 创建css横向导航菜单?
- 用ul、li标签创建css横向导航菜单示例
- <ul><li>标签实现<select>标签效果
- 【自制】ul、li模拟select效果
- 获取表中的字段名
- 洗牌算法
- 如何在GridView中使用RadioButtons单选列,并且获取所选定RadioButton的值。
- TCP三次握手/四次挥手详解
- gvim的菜单乱码解决方法
- CSS实例:用ul+li打造图书目录效果
- arm+linux下调试串口切换成普通串口
- 有关王爽课程设计二的源代码。呵呵,我可是花了一星期才做出来的。
- Lua游戏脚本语言入门
- java使用MySQL学习
- CString及Char指针和数组的问题 (1)
- websphere性能优化
- Ext.grid.ColumnModel renderer 参数介绍
- 【转】 Oracle并行服务器(OPS) Oracle Parallel Server