Feb 11

滑动TAB切换代码 不指定

admin , 07:57 , 默认分类 , 评论(1) , 引用(0) , 阅读(728) , Via 本站原创

<script>
var art_list = new Class({
    divSrc:'',
    divSrc2:'',
    initialize: function(div1,div2){
      this.divSrc=div1;
      this.divSrc2=div2;
      this.tab = 'ttp_298';
    },
    changeTableing:function(type){
      var i;
      for(i=0;i<"2";i++){
        if(i==type){
          $(this.divSrc2+i).setStyles({
            'display':''
          });
          $(this.tab+i).addClass('current');
        }else{
          $(this.divSrc2+i).setStyles({
            'display':'none'
          });
          $(this.tab+i).removeClass('current');
        }
      }
    }
  });

var ef_298=new art_list('top_298','298_list');
</script> <div class="ArticleListWrap" name="ar_298" id="ar_298"> <div id="top_298" class="Article-Tabs">  <div class="current" style="float:left" id="ttp_2980" onMouseOver ="ef_298.changeTableing(0)"><span>最新公告</span>&nbsp;</div>  <div style="float:left" id="ttp_2981" onMouseOver ="ef_298.changeTableing(1)"><span>促销信息</span>&nbsp;</div>  </div>  <div class="ArticleList" id="298_list0" > <table width="100%" cellpadding="0" cellspacing="0">  <td> <img src="http://mb.ducedis.com/shopex485/statics/icons/arrow_4.gif" path="icons" /> <a href="?article-23.html" title="系统升级通知（周二）！">系统升级通知（周二）！</a></td> </tr>  <td> <img src="http://mb.ducedis.com/shopex485/statics/icons/arrow_4.gif" path="icons" /> <a href="?article-22.html" title="8月8日暂停货品出库">8月8日暂停货品出库</a></td> </tr>  <td> <img src="http://mb.ducedis.com/shopex485/statics/icons/arrow_4.gif" path="icons" /> <a href="?article-21.html" title="商品评论改版升级!">商品评论改版升级!</a></td> </tr>  <td> <img src="http://mb.ducedis.com/shopex485/statics/icons/arrow_4.gif" path="icons" /> <a href="?article-20.html" title="银行系统升级通告！">银行系统升级通告！</a></td> </tr>  </table> <div class="more clearfix"> <a href="?artlist-100.html">更多...</a> </div> </div>  <div class="ArticleList" id="298_list1" style="display:none"> <table width="100%" cellpadding="0" cellspacing="0">  <td> <img src="http://mb.ducedis.com/shopex485/statics/icons/arrow_4.gif" path="icons" /> <a href="?article-27.html" title="女士专场，任我选择!">女士专场，任我选择!</a></td> </tr>  <td> <img src="http://mb.ducedis.com/shopex485/statics/icons/arrow_4.gif" path="icons" /> <a href="?article-25.html" title="韩版Vivid服饰全场热卖！">韩版Vivid服饰全场热卖！</a></td> </tr>  <td> <img src="http://mb.ducedis.com/shopex485/statics/icons/arrow_4.gif" path="icons" /> <a href="?article-26.html" title="靓装搭配全攻略-今夏流行密码">靓装搭配全攻略-今夏流行密码</a></td> </tr>  <td> <img src="http://mb.ducedis.com/shopex485/statics/icons/arrow_4.gif" path="icons" /> <a href="?article-24.html" title="乐不思“暑”之买就送！">乐不思“暑”之买就送！</a></td> </tr>  </table> <div class="more clearfix"> <a href="?artlist-101.html">更多...</a> </div> </div>  </div>  </div>
Feb 3

块转换内联，内联转换为块 不指定

admin , 02:07 , 默认分类 , 评论(0) , 引用(0) , 阅读(535) , Via 本站原创
不浮动，用内敛盒子

IE6下不支持  可以模拟。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
.nav {
  MARGIN: 0px;
  WIDTH: 100%;
  FONT-FAMILY: verdana;
  HEIGHT: 24px;
  font-family:Arial, Helvetica, sans-serif;
    LINE-HEIGHT: 24px;
}
.nav UL {
  PADDING: 0px;
  DISPLAY: block;
  MARGIN: 0px;
  LIST-STYLE-TYPE: none;
  HEIGHT: 24px;
  BACKGROUND-COLOR: #c5dbf2;
  COLOR: #ffffff;
text-align:center;
}
.nav LI {
  DISPLAY: inline-block;
  *display:inline;*zoom:1;
  HEIGHT: 24px;
  font-family:Arial, Helvetica, sans-serif;
    LINE-HEIGHT: 24px;
  WIDTH: 82px;
  text-align:center;
}
.nav LI A {
  PADDING:1px 15px 0;
  DISPLAY: block;
  FONT-WEIGHT: none;
  COLOR: #000;
  LINE-HEIGHT: 24px;
  TEXT-DECORATION: none;
}
.nav LI A:hover {
  COLOR:#562505;
  BACKGROUND-COLOR: #2687eb;
  TEXT-DECORATION: none;
}
-->
</style>
</head>
<body>
<DIV class="nav">
  <UL>
    <LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=154" >文 秘</A></LI>
    <LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=155" >接 待</A> </LI>
    <LI><a href="{$InstallDir}Department/ShowClass.asp?ClassID=156" >信 息</a> </LI>
    <LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=157" >通 信</A> </LI>
    <LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=158" >治 安</A> </LI>
    <LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=159" >档 案</A> </LI>
    <LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=160" >后 勤</A> </LI>
  </UL>
</DIV>
</body>
</html>



块转换内联盒子的话，display:inline;zoom:1;
display是转换了内联了，但是他里面也包块，块是会换行的，所以内联里面控制不了块，必须zoom 激发IE的HS属性，这样就模拟出内联盒子了，可以包含块了。

内联转内联盒子，很容易，直接 inline-block  激发了 HS
Feb 3

IE6BUG总结 不指定

admin , 01:42 , 默认分类 , 评论(0) , 引用(0) , 阅读(394) , Via 本站原创
1超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}

2IE6的双倍边距BUG
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline

3IE6下这两个层中间怎么有间隙
这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

4IE6文字溢出BUG
说明：注释造成文字溢出是IE的BUG。

5一个空格引发CSS失效
这段代码对

的首字符样式定义在IE6上看是没有效果的（IE7没测试），而在p:first-letter和{font-size:300%}加上空格，也就是p:first-letter {font-size:300%}后，显示就正常了。但是同样的代码，在FireFox下看是正常的。按道理说，p:first-letter{font-size:300%}的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符"-"。IE有个BUG，在处理伪类时，如果伪类的名称中带有连字符"-"，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在FF中，加不加空格都可以正常处理。

6IE6中奇数宽高的BUG
IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。

7IE6下为什么图片下方有空隙产生
解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img 为display:block
或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
还可以设置父容器的字体大小为零，font-size:0

Feb 3

div的未知高度文字垂直居中 不指定

admin , 01:27 , 默认分类 , 评论(0) , 引用(0) , 阅读(1940) , Via 本站原创

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题文档</title>
    <style type="text/css">
    div {
      height: 200px;
      border: 1px solid;
    }
    span, b {
      display: inline-block;
      vertical-align: middle;
    }
    b {
      height: 100%;
    }
    </style>
</head>
<body>
  <div>
    <span>HELLO WORLD<br />HELLO WORLD<br />HELLO WORLD<br />HELLO WORLD<br /></span>
    <b style="border:1px solid red">1</b>
  </div>
</body>
</html>



1，因为要考虑到IE6，所以不用display: table-cell的方式。
2，因为你说文字的内容不固定，所以可能产生换行，所以不用height = line-height的方式。

给span, b设置display: inline-block，目的是为了让它们在div里是以一行的方式呈现。再给b设置高度100%，让它占满div里的一行，而前面的span就可以自动补白，同样占满这一行。最后设置vertical-align: middle，让span居中。
Jan 29

浏览器兼容HACK 不指定

admin , 15:00 , 默认分类 , 评论(0) , 引用(0) , 阅读(315) , Via 本站原创
CSS代码在IE6,IE7和FF中的识别2009-08-01 下午 01:59CSS hack：针对IE6，IE7，firefox显示不同效果

做网站时经常会用到，衡量一个DIV+CSS架构师的水平时，这个也很重要。

区别不同浏览器的CSS hack写法：
区别IE6与FF：
        background:orange;*background:blue;

区别IE6与IE7：
        background:green !important;background:blue;

区别IE7与FF：
        background:orange; *background:green;

区别FF，IE7，IE6：
        background:orange;*background:green !important;*background:blue;


注：IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

IE6 IE7 FF * √ √ × !important × √ √


------------------------------------------------------
另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。

IE6 IE7 FF


> * √ √ × !important × √ √ _ √ × ×


于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

分页： 6/8 第一页 上页 1 2 3 4 5 6 7 8 下页 最后页 [ 显示模式： 摘要 | 列表 ]