• ----:)欢迎访问源码网(:----
    • 首页
    • 博客
    • 学院
    • 下载
    • 论坛
    • 影视
    • 发布源码
    • RSS
    • ITPig
    • 笑话网
    • 百家姓
    • 繁體中文

源码网 - 中国第一源码门户
选择镜像:网通镜像 - 电信主站
  • 首 页
  • 新闻动态
  • 网站运营
  • 网页制作
  • WEB开发
  • 编程开发
  • 图像媒体
  • 操作系统
  • 数据库
  • 服务器
热门搜索 优化 SEO 故事 cms IIS7 MySQL 个人 AdSense 主题推广 | 文章搜索: 高级搜索
会员登录/控制面版您的位置: 学院首页 >> 网页制作 >> CSS 学习 >> 详细内容
 

推荐文章

 
 

热点文章

  • 纯DIV/CSS对联漂浮广告代码(无JS)
  • 绝对经典:DIV+CSS菜单.比flash更逼真
  • DIV+CSS布局入门教程(六) -- 关于ID和CLASS
  • 代码优化之(一)CSS的重要性
  • CSS滤镜参考
  • 配合全国哀悼日网站变灰CSS代码
  • 入门教程:CSS基本语法及用法入门
  • 推荐一些所谓的CSS的“顶级”技巧
  • 基于 CSS 的 ASCII 艺术
  • 代码实例:纯CSS代码实现翻页
  • 修饰之美:CSS在表格边框上的美学应用
  • 学习技巧:动态引入css
 
 

相关文章

  • 阿里搜索业务逻辑分享(offer搜索、类目、筛选、最近搜..
 
 

百度搜索

 
 

CSS技巧 类目之间的横竖线

  • 阅览次数:
  • 文章来源: http://hi.baidu.com/surgefree/blog/item/2f488bee925e412f2df53400.html
  • 原文作者:
  • 整理日期: 2008-09-04
  • 发表评论
  • 字体大小:
  • 小
  • 中
  • 大

类目之间的横竖线

CSS技巧总结 段正淳的css笔记 Ⅰ

从很久很久以前开始,类目间的竖线无非都只有三种。

  1. 背景图
    在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。
    缺点:最后一个还是要用class来隐藏掉背景。
  2. 符号
    在每个a标签之间用”|”符号来填充。
    缺点:html文件变大,文件维护变得很麻烦,而且在html中毫无意义。
  3. a标签右侧的boder。
    同背景图一样,只不过使用border-right来代替。缺点也同上。

看到这里,可能已经有人打开淘宝首页用firebug查看源码来看是怎么做了。

其实现有是利用ul的overflow:hidden 再将li的margin-left:-1px的做法做出来的。这样的做法就可以同时避免以上的缺点了。
为什么之前都没有那么做的,寡人也不知道了。难道寡人是第一个发现这样的做法?
不管是谁先此之前利用了这样的方法实现类目间竖线。
不过在淘宝首页上线后不久就有同行的网站在首页改版中也用了这样的方法。
那个网站不看也罢。class实在是写的有点多。加载html会变得多得多。
反正一个首页需要加载1.17m的网页我的大脑会自动屏蔽。

上一篇:PHP:IP转换整形(ip2long)
下一篇:没有记录
  • 网友评论:
  • 查看所有评论
  • 我要发表评论
您的网名:
留言主题:
你要发表的内容:

 

关于本站 | 广告联系 | 版权声明 | 网站地图 | 发布软件 | 帮助中心 | 源码论坛

Copyright © 2005-2007 CodePub.Com  程序支持:木翼  滇ICP备05005971号