质量更好的tags标签效果

作者:快乐笛子 来源:快乐笛子博客 时间:2008-06-04 12:24:00 

以前写过一个标签效果,外观虽然好看,但代码不太规范,实现的方法比较繁冗。

需要注意的是标签的背景图,两种状态,激活的标签背景为蓝色,反之为灰色,两种背景高度不同,蓝色背景高度比灰色高出2个象素,为了保持同高度,激活的标签需要设置相对定位,再把高出的2个象素高度用margin-bottom:-2px下拉2个象素,这两个象素刚刚好挡住内容部分的上边框,使激活的标签与内容连在一起。

效果图:

演示及下载:css-tags.htm

标签:标签,css,tag
0
投稿

猜你喜欢

  • 将数组中指定数量的元素移动数组后面的实现代码

    2023-11-16 22:07:56
  • 细化解析:Mysql数据库对文件操作的封装

    2008-11-27 16:32:00
  • 对Python中内置异常层次结构详解

    2023-10-18 11:08:49
  • mysql存储过程如何利用临时表返回结果集

    2024-01-13 07:39:05
  • Python+Matplotlib实现给图像添加文本标签与注释

    2022-05-02 12:40:16
  • MySQL分区之KEY分区详解

    2024-01-26 16:24:54
  • 对acronym、abbr标签的理解

    2008-05-29 13:03:00
  • Python3.6日志Logging模块简单用法示例

    2021-03-18 06:47:38
  • JavaScript利用多彩线条摆出心形效果的示例代码

    2024-04-16 10:29:49
  • Python动态导入模块的方法实例分析

    2022-06-08 17:56:45
  • vue2.x el-table二次封装实现编辑修改

    2023-07-02 16:29:17
  • 通过实例了解python__slots__使用方法

    2023-03-16 13:24:50
  • MySQL进阶之索引

    2024-01-23 11:54:09
  • 使用Python和xlwt向Excel文件中写入中文的实例

    2023-08-27 19:18:08
  • 详解pycharm的python包opencv(cv2)无代码提示问题的解决

    2022-01-10 06:45:34
  • python对象及面向对象技术详解

    2023-05-14 00:04:16
  • numpy中np.dstack()、np.hstack()、np.vstack()用法

    2021-08-27 11:47:42
  • Go语言中利用http发起Get和Post请求的方法示例

    2024-04-26 17:33:22
  • Python OpenCV获取视频的方法

    2023-02-13 04:03:23
  • 详解Python 模拟实现生产者消费者模式的实例

    2022-04-17 10:35:51
  • asp之家 网络编程 m.aspxhome.com