Firefox和IE通用的三则网站重构实用技巧
来源:Arting365.com    作者:金亮    发布时间:2007-11-25

  如果为一副不规则图片添加区域链接,很多朋友都会考虑使用Dreamweaver的热区功能,其实如果需要添加链接的区域是规则的矩形形状,我们可以使用样式表控制链接的样式来模拟热区的效果,代码少,易于维护和修改。

  例如我们要在一张400×100的背景图片上建立一个100×50大小和200×80大小的矩形热区。(如图3) 

图3

      代码如下:
<style type="text/css"> 
#banner{ width:400px; height:100px; background:#959595;} 
#banner a{ float:left;} 
#banner a.link1{ width:100px; height:50px; background:#F00; margin:20px 0 0 20px;} 
#banner a.link2{ width:200px; height:80px; background:#F00; margin:10px 0 0 50px;} 
</style> 

<body bgcolor="#FFFFFF"> 
<div id="banner"> 
    <a href="#" class="link1"></a> 

    <a href="#" class="link2"></a> 
</div> 
</body> 

  通过这种将链接变成块属性的方法,可以方便的定义矩形热区,并通过样式控制每个区域的位置,并且代码清晰,修改方便。
 
      使用列表实现图片排版自动更新排列

本篇编辑:Iris
发表评论 | 查看所有评论
用户名: 
验证码: