2012-10-6 之浏览器兼容

      这段时间一直在做静态页面。一个星期了，该总结一下了。

    1.如何制作圆角矩形。制作圆角矩形的方式有很多，不过我最喜欢的是用下面的方式。不需要图形，只需要控制样式即可。

首先在样式中写上如下代码：

<style>
* { font-size:12px}
.roundbox { width:400px /* 根据需要可改变不同的宽度 */}
.roundbox div { padding:8px; border-left:1px solid #6d298e; border-right:1px solid #6d298e}
.r {border-right:1px solid #6d298e;border-left:1px solid #6d298e;height:1px;font-size:1px;overflow:hidden;display:block;}
.a1 {margin:0 5px; background:#6d298e;}
.a2 {margin:0 3px; border-right-width:2px; border-left-width:2px;}
.a3 {margin:0 2px;}
.a4 {margin:0 1px; height:2px;}
.a5 {height:auto;font-size:medium;}
</style>

然后在页面文件中需要用到圆角矩形的地方写上如下代码

<div class="roundbox">
  <b class="r a1"></b><b class="r a2"></b><b class="r a3"></b><b class="r a4"></b>
   <div>哈哈哈</div>
   <b class="r a4"></b><b class="r a3"></b><b class="r a2"></b><b class="r a1"></b>
</div>

2.鼠标移上a标签时改变字体颜色。在这里用Jquery会比较兼容浏览器

首先引入jquery文件<script type="text/javascript" src="js/jquery-1.4.1.js"></script>

然后在script代码中如下

$(document).ready(function(){
  $("#top_head_down  a").mouseenter(function(){
    $(this).css("color","#000");
  });
  $("#top_head_down a").mouseleave(function(){
    $(this).css("color","#FFF");
  });