[翻译]标记语言和样式手册 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
投稿猜你喜欢
- 本文实例为大家分享了python实现网上购物系统的具体代码，供大家参考，具体内容如下1.购物商城的需求分析：1、输出欢迎界面还有登录注册菜单
- 因为写js经常需要用到访问样式，我们常用的做法是通过 DOM.style.XXX来读写样式信息的。可是DOM.style这种写法只能访问&l
- 说明1. 使用google翻译服务获得翻译和语音;2. 使用mplayer播放获得的声音文件，因此，如果要播放语音，请确保PATH中能够找到
2008年，对于JavaScript来说是非常振奋人心的一年，很多高人加入到JavaScript和Web开发的阵营中来，浏览器厂商在技术上互- -- begin auth.inc -- <?php $
- 在python2.x中 ，异常是这样的处理的，异常基类后面加一个逗号“ ，” 然后跟着异常类型import tracebackt
- 前言说到如何用Python执行线性回归，大部分人会立刻想到用sklearn的linear_model，但事实是，Python至少有8种执行线
- mysql中用命令行复制表结构的方法主要有一下几种: 1.只复制表结构到新表CREATE TABLE 新表 SELECT * FR
- 1.字符串的驻留机制字符串：在Python中字符串是基本的数据类型，是一个不可变的字符序列2.什么叫字符串的驻留机制仅保存一份相同且不可变字
- 前言lambda是表达式，用于创建匿名函数，可以和filter、map、reduce配合使用。本文环境Python3.7。一、lambda表
- 第一招、mysql服务的启动和停止net stop mysqlnet start mysql第二招、登陆mysql语法如下： mysql -
- 前言这篇来学习正则表达式的替换和分组功能，替换很好理解，分组有点复杂，特别是如何写有效的分组的正则表达式。这篇通过几个练习，简单了解下替换和
- 前言：在 Go 语言中，同时声明多个常量、变量，或者导入多个包时，可采用分组的方式进行声明。例如下面的代码：import "fmt
- 在使用SQL Server 的过程中,由于经常需要从多个不同地点将数据集中起来或向多个地点复制数据,所以数据的导出,导入是极为常见的操作.我
- 类的定义 类定义有三种基本方法，1、创建并能返回特定类型的对象的函数（工厂函数），例如：function Co(){ var o = new
- 一、json_encode()该函数主要用来将数组和对象，转换为json格式。先看一个数组转换的例子：$arr = array ('
- 如果存储姓名的字段采用的是GBK字符集，那就好办了，因为GBK内码编码时本身就采用了拼音排序的方法（常用一级汉字3755个采用拼音排序，二级
- 用户日活百万级，注册用户千万级，而且若还没有进行分库分表，则该DB里的用户表可能就一张，单表上千万的用户数据。某系统专门通过各种条件筛选大量
- 阅读上一篇：FrontPage XP设计教程2——网页的编辑 制作一个漂亮的网页，离不开网页整体布局的设计，网页布局设计的合理与否，直接影响
- 最近在网上看到了一些测试，感觉不是很准确，今天亲自测试了一番。得出了结论，测试过程在个人计算机上，可能不够全面，仅供参考。测试过程：准备一张
