[翻译]标记语言和样式手册 Chapter 1 清单(7)
作者:zhaozy 来源:3user.com 发布时间:2008-01-15 10:26:00
标签:样式,标记,css,手册
迷你分页标签的外观
如果你想要和平常的,方方正正的css边框不太一样的效果的话,只需要作出一点点小修改,我们就可以使用图片来创建有趣的导航条了.
我们使用和之前完全一样的无序清单,以及十分类似的css:
#minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a {
float: left;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}
#minitabs a.active, #minitabs a:hover {
color: #000;
background: url(tab_pyra.gif) no-repeat bottom center;
}
这段css大概看起来和上一个示例中的几乎一样,最主要的区别在我们用 background-image 定义了在鼠标划过或选中的时候显示在链接底部中间的图片来代替了原本的4个像素高的底部边框.(图 1 - 8)
图 1 - 8: 使用背景图的迷你分页标签导航
这里的技巧在于选择一个足够窄的图片,必须能够塞进最短的导航条项目下,这样一来我们只需要一张图片来强调导航链接而不必为各种不同宽度准备不同的图片,当然,在你自己的项目中,你可以选择各种图片使用(图 1 - 9):
图 1 - 9: 使用其他图片的例子
这些迷你分页标签的源码和示例都可以在www.simplebits.com/tips/ 找到,更多的为清单添加样式的方法可以参考 Mark Newhouse在A List Apart杂志上发表的"Taming Lists"的文章(www.alistpart.com/stories/taminglists/)
接着阅读:Chapter 2 标题


猜你喜欢
- 大数据一般是在“云”上玩的,但“云”都是要钱的,而且数据上上下下的也比较麻烦。所以,在本地电脑上快速处理数据的技能还是要的。pandas在比
- Tensorboard详解该类在存放在keras.callbacks模块中。拥有许多参数,主要的参数如下:1、log_dir: 用来保存Te
- 本文实例为大家分享了python实现超市管理系统的具体代码,供大家参考,具体内容如下这个相比上个程序简单很多,首先他没有太过复杂的逻辑关系,
- 前言最近这两天在看自己之前写的代码,所以正好把用过的东西整理一下,单例模式,在日常的代码工作中也是经常被用到,所以这里把之前用过的不同方式实
- 首先我们知道这个效果应该是一个老话题了。今天整理文件的时候,发现自己以前的一些布局的解决方法躺在文件夹里很长时间了,翻翻老底吧。需要说明的是
- 一、matplotlib库1、基本绘图命令import matplotlib.pyplot as pltplt.figure(figsize
- PIL:Python Imaging Library,已经是Python平台事实上的图像处理标准库了。PIL功能非常强大,但API却非常简单
- 1. 概述到目前为止,程序的API对任何人都可以编辑或删除,没有任何限制。我们希望有一些更高级的行为,进行身份验证和权限分配,以确保:数据始
- 本文实例讲述了Python 进程操作之进程间通过队列共享数据,队列Queue。分享给大家供大家参考,具体如下:队列中的数据是放在内存中的,可
- 我就废话不多说了,大家还是直接看代码吧!#先定义两个矩阵X=np.array([[1,2104,5,1,45],[1,1416,3,2,40
- 原始数据如下:['e3cd', 'e547', 'e63d', '0ffd'
- 语法:replace(self, to_replace=None, value=None, inplace=False, limit=Non
- 使用mysql二进制方式启动连接您可以使用MySQL二进制方式进入到mysql命令提示符下来连接MySQL数据库。实例以下是从命令行中连接m
- Flask-SQLAlchemy安装和建表操作请参考这里。 # Role表class Role(db.Model):
- 本文实例讲述了Python多重继承的方法解析执行顺序。分享给大家供大家参考,具体如下:任何实现多重继承的语言都要处理潜在的命名冲突, 这种冲
- RegExp对象的语义和使用:检查字符串匹配获取字符串中的部分内容在原字符串的基础上构建一个新的字符串(包括添加、删除和修改)构建一个Reg
- 大家好,我是不学前端的前端程序员,事情是这个样子的,前几天不是双十一预购秒杀嘛由于我女朋友比较笨,手速比较慢,就一直抢不到,她没抢到特价商品
- 一、Oracle 下载注意Oracle分成两个文件,下载完后,将两个文件解压到同一目录下即可。 路径名称中,最好不要出现中文,也不要出现空格
- 前言因为Python的水平目前一直是处于能用阶段,平时写的脚本使用的Python的写法也比较的简单,没有写过稍微大一点的项目。对Python
- // 添加function col_add() { var selObj = $("#mySelect");&