[翻译]标记语言和样式手册 Chapter 1 清单（5）
作者：zhaozy 来源：3user.com 发布时间：2008-01-15 10:26:00
标签：样式,标记,css,手册
使用自定义圆点符号来完成自己的想象
或许你想要在清单里保留小圆点符号,但是不想用浏览器无趣的默认设置,更像用自己的小圆点图案.有两种方法可以达成你想要的 — 而我更推崇第二种方法,因为它可以在各种浏览器之间更好的兼容.
第一种方法是用 list-style-image 属性来指定用来替代默认小圆点的图片名称.
ul{
list-style-image:url(i_hot.gif)
}
这是最简单的方法,但是它会在不同浏览器之间的图片垂直对齐位置上有所不同,有些浏览器会把图片和项目文字中线对齐,也有的会把图片放得稍微高一点,它们之间有一点不一致.
为了避免 list-style-image 造成的几个流行浏览器之间的对齐问题,我比较喜欢用一种替代方法:把图片作为每个<li>元素的背景.
首先,我们要去掉默认的圆点,然后再加上我们自己的背景图片:
ul{
list-style:none;
}
li{
background-image:url(i_hot.gif) no-repeat 0 50％;
padding-left:25px;
}
no-repeat 会告诉浏览器不把背景图片进行平铺操作(默认会平铺),而0 50％会告诉浏览器把背景图片放置在距离左边 0 像素,距离上面 50％ 的地方,让背景图片 i_hot.gif 根据中线对齐.我们也可以用精确的像素来指定位置,比如说 0 6px 会让图片放置在距离左边0像素,距离上面 6 像素的位置上.
我们还要在清单项目的左边加上17像素的内补丁(padding),以便我们把宽20像素高11像素的图片能够完整显示出来,同时又留有一点空白,而不会和文字有重叠.这些数据应该根据你所使用的图片尺寸进行调整( 图 1 - 6 )
图 1 - 6 自定义圆点图片的清单
0
投稿猜你喜欢
原文：http://research.microsoft.com/~helenw/papers/subspace.pdfwindow.nam- 概要：Oracle关系数据库系统以其卓越的性能获得了广泛的应用，而保证数据库的安全性 是数据库管理工作的重要内容。本文是笔者在总结Oracl
- 代码如下:<input name="file" type="file"> formsiz
- 在印刷排版中“point”是一个绝对的单位，它等于 1/72 英寸。可以用尺子丈量的，物理的英寸。但在CSS中pt的含义
- 就服务器端处理而言，ASP是产生动态Web网页的一种相对较新的技术。动态页意味着什么呢？先暂时不考虑客户端相关功能上的进展，也不讨论客户端脚
- 如何在线更改密码？<％id = Request("id")newpassword =
- 年前帮manager 招GUI设计实习生 (PS. 这个实习生职位依然open，欢迎有兴趣的同学来投，邮箱jj.ying [at] hp.c
- 前一阵看到一篇文章《使用css3仿造window7的开始菜单》，文中仅使用CSS3 实现了Windows 7 开始菜单的动态效果，很久以来一
- Linux Journal 发表了一篇优化 Oracle 数据库的文章，感觉十分的有用。简要介绍其摘要和大家共同分享 Linux 在企业级数
- 一些MySQL发布对MySQL数据库中的系统表的结构进行了更改，添加了新权限或特性。当你更新到新版本MySQL，你应同时更新系统表，以确保它
- 和YSlow一样，“Page Speed”也是一个基于firebug附加组件的FireFox插件。虽然听起来有点拗口，但是意思很容易理解：如
- 如何在Access数据库中立即得到所插入记录的自动编号？首先，我们要保证获得记录集的方式支持bookmark属性，如在1、3插入一条有自动编
- 作者：Lachlan Hunt概要网络是不断的进化的. 新的和有创意的网站每天都在出现, 从各方面都在冲击着HTML的边界. HTML 4来
- 你可能在使用MySQL过程中，各种意外导致数据库表的损坏，而且这些数据往往是最新的数据，通常不可能在备份数据中找到。本章将讲述如何检测MyS
- 晚上突然间看到大猫的头像在闪动，速度打开一看，发现他问，以前我写button标签的时候有没有写type属性，老实的我只有诚实地告诉他，我没写
- 如何在第10000名来访者访问时显示中奖页面？看看下面的代码：< SCRIPT LANGUAGE=VBScript
- 一个改进的仿google页面拖拽效果，移植方便。web2.0网站经常会用有这个拖拽页面布局的功能，如果你也想给你的网站加上这个有趣的功能，不
- 学习目的 接触验证控件 昨天介绍了SQL SERVER插入数据，但是我们省略了验证输入这一步。以前的做法是用语句逐个判断输入的正确性，如是否
- asp无组件上传VBS编写的大家见的多了，这个是纯javascript实现的上传,原来unicode可以解决读取位置的问题，这次真的是纯JS
- 在 玉伯 的文章 《一道大题目，嘿嘿》 中有这样一段代码：[] == ![]也许很多同学迷惑：咦，这个如何转换呢？首先，我们了解下逻辑 NO
