网页设计
搜索
分类

100％点击区的滑动门（2）

作者：blank 来源：怿飞's Blog 时间：2007-06-14 22:00:00　

让我们把CSS代码整理优化一下：


#header li {
  background:url("right.gif") no-repeat right top;
  margin:0 0 0 9px;
}
#header a {
  position:relative;
  left:-9px;
  margin-right:-9px;
  width:.1em;
  background:url("left.gif") no-repeat left top;
  padding:5px 15px 4px;
}
#header > ul a {width:auto;}

#header #current {
  background-image:url("right_on.gif");
}
#header #current a {
  background-image:url("left_on.gif");
  padding-bottom:5px;
}


查看效果：

运行代码框


方法二：添加span标签

这个方法只能说是练习，实验用，真正布局的时候不推荐使用（仅是不推荐使用），毕竟添加了无语义的的span标签。

首先在结构代码中添加<span>标签


<div id="header">
  <ul>
    <li><a href="#"><span>Home</span></a></li>
    <li id="current"><a href="#"><span>News</span></a></li>
    <li><a href="#"><span>Products</span></a></li>
    <li><a href="#"><span>About</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
  </ul>
</div>


有朋友或许问为什么要添加<span>元素呢，其实理由很简单，我们通过a和span来模拟滑动门技术，而不是例子中的li和a，好处嘛，可以避免9px的盲点区域，因为<span>元素是包含在<a>元素里的。这样处理100％点击就相对容易很多。

由于使用a和span模拟，所以对于li我们不需要额外定义


#header li{
  float:left;
  margin:0;
  padding:0;
}


而原本对li设置的部分，我们转移到a中设置，设置a的背景为left图片，不重复，左上对齐。并给a设置左内边距9px（left图片的宽度），即span的显示不遮挡left图片。


#header a {
  background:url("left.gif") no-repeat left top;
  padding-left:9px;
}


对于span，将显示原例子中a中的设置，设置span的背景为right图片，不重复，右上对齐。并在span的左内边距减去a设置的9px左内边距，即span的左内边距为6px。同样为了一致性，我们要解决IE5/Mac的问题。


#header span {
  float:left;
  padding:5px 15px 4px 6px;
  display:block;
  background:url("right.gif") no-repeat right top;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header span {float:none;}
/* End IE5-Mac hack */

在此方法中我们依旧会碰到上例中碰到的在IE中链接的区域为文字区域而不是按钮区域问题。如何解决呢，当然你也可以用上例中的方法解决。不过我们还可以，给a浮动来触发IE下的layout。


#header a {
  float:left;
}


相对应的，对于current选择器里的图片位置也要做一点调整：


#header #current a {
  background-image:url("left_on.gif");
  color:#333;
}
 
#header #current span{
  background-image:url("right_on.gif");
  padding-bottom:5px;
}


让我们把CSS代码整理优化一下：




#header li{
  float:left;
  margin:0;
  padding:0;
}
#header a {
  float:left;
  display:block;
  background:url("left.gif") no-repeat left top;
  padding-left:9px;
}
#header span {
  float:left;
  padding:5px 15px 4px 6px;
  display:block;
  background:url("right.gif") no-repeat right top;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header span {float:none;}
/* End IE5-Mac hack */

#header #current a {
  background-image:url("left_on.gif");
  color:#333;
}
 
#header #current span{
  background-image:url("right_on.gif");
  padding-bottom:5px;
}


查看效果：


运行代码框


参考文章：
http://www.w3cn.org/article/translate/2005/112.html
http://alistapart.com/articles/slidingdoors2/
http://www.zishu.cn/blogview.asp?logID=579

第一页 上一页 1
2
标签：CSS,滑动门
0
投稿

猜你喜欢

  • fetch 使用及如何接收JS传值

    2024-04-29 13:11:21

  • 给年青设计师们的十条经验教训

    2011-03-31 17:09:00

  • MSSQL木马修复,中木马后的处理方法

    2024-01-21 10:47:13

  • Python3 ffmpeg视频转换工具使用方法解析

    2021-07-28 15:00:30

  • 基于python的mysql复制工具详解

    2023-06-24 01:08:28

  • 多次执行mysql_fetch_array()的指针归位问题探讨

    2024-01-16 00:16:16

  • Oracle数据库安全策略分析 (三)

    2010-07-31 13:24:00

  • SQL Server2022安装图文教程(最新推荐)

    2024-01-27 04:55:25

  • python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)

    2022-01-27 13:05:08

  • 一段ASP的HTTP_REFERER判断代码

    2011-03-25 10:41:00

  • Python中列表元素转为数字的方法分析

    2023-03-20 22:07:46

  • SQLServer数据库从高版本降级到低版本实例详解

    2024-01-22 17:25:54

  • django中的数据库迁移的实现

    2024-01-18 07:35:00

  • 详解go语言中sort如何排序

    2023-09-03 14:00:38

  • vue跳转后不记录历史记录的问题

    2023-07-02 17:03:38

  • Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)

    2022-04-01 02:43:55

  • python做翻译软件详解,小白也看得明白

    2023-08-08 06:25:44

  • [译]开发人员经常犯的8个设计错误

    2008-02-01 12:28:00

  • MySQL 自动备份与数据库被破坏后的恢复方法

    2010-03-25 10:29:00

  • ASP.NET(C#)中操作SQLite数据库实例

    2024-01-20 08:30:12
    • asp之家 网络编程 m.aspxhome.com