晨飞--迅速起飞之路 http://xiaocaochenfei.blog.sohu.com/ Fri, 13 Jun 2008 10:25:44 +0800 搜狐博客 cd4c007792 http://blog.sohu.com http://js.pp.sohu.com/ppp/blog/images/common/logo_150_60.gif http://blog.sohu.com/ 100 43 搜狐博客 防止页面文字跳动的方法 http://xiaocaochenfei.blog.sohu.com/89978173.html http://xiaocaochenfei.blog.sohu.com/89978173.html#comment 晨飞--迅速起飞之路 Fri, 13 Jun 2008 10:25:44 +0800 XHTML CSS http://xiaocaochenfei.blog.sohu.com/89978173.html 通常页面在换着看的时候文字总是来回跳,这一点让我很烦感,所以就抽空研究了一下,,还真有方法可以避免这种问题，方法如下：

英文 lang="en-US"

字体大小                行高

1~5                      +3
6~8                      +4
9~13                     +5
14~17                    +6
18~98                    +7
98~                      +8


中文 lang="zh-CN"

字体大小                行高

1~17                     +5
18~24                    +6
>=25的中文字体暂时没有找到方法统一浏览器的显示

]]> 标准浏览器k中flash下边空白的解决方法 http://xiaocaochenfei.blog.sohu.com/71733019.html http://xiaocaochenfei.blog.sohu.com/71733019.html#comment 晨飞--迅速起飞之路 Tue, 27 Nov 2007 13:54:16 +0800 XHTML CSS http://xiaocaochenfei.blog.sohu.com/71733019.html 在标准浏览器中插入flash后，下面会有一定的默认空白：在ff为5px。opera中为3px...
而在IE里却没有

解决方法：1. object{display:block;}
         2.object{vertical-align:top/text-top/middle/bottom;}

xhtml:

<div class="obj">
 <object type="application/x-shockwave-flash" data="http://images.sohu.com/cs/button/market/aoyun/5901051122.swf" width="590" height="105">
  <param name="movie" value="http://images.sohu.com/cs/button/market/aoyun/5901051122.swf" />
 </object>
</div>

css:

<style type="text/css">
<!--
*{margin:0;padding:0;}
.obj{background:red;}
-->
</style>

]]> IE6中设置最小宽度的三种方法 http://xiaocaochenfei.blog.sohu.com/69176437.html http://xiaocaochenfei.blog.sohu.com/69176437.html#comment 晨飞--迅速起飞之路 Fri, 2 Nov 2007 12:16:22 +0800 XHTML CSS http://xiaocaochenfei.blog.sohu.com/69176437.html
在这个div里面再加一个块级元素设置他的宽度为你想要的最小宽度，高度设置为0，外层div宽度设置为%以便在宽度大于你定的最小高度的时候自动变宽

方法二:
width:expression(document.body.clientWidth < 600? "600px": "auto" )
600换成你想设置的最小宽度

方法三：
css:

#outer{width:80%;}
#inner{margin-left:700px;float:right;}
#content{margin-left:-700px;height:1px;position:relative;}

html:

<div id="outer">
    <div id="inner">
        <div id="content">
        </div>
    </div>
</div>
注：方法三中margin也可以变成border
]]> 左侧展开菜单js http://xiaocaochenfei.blog.sohu.com/69170349.html http://xiaocaochenfei.blog.sohu.com/69170349.html#comment 晨飞--迅速起飞之路 Fri, 2 Nov 2007 10:58:26 +0800 javascript http://xiaocaochenfei.blog.sohu.com/69170349.html 
<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {

if (document.getElementById) {
	navRoot = document.getElementById("nav");
	for (i=0; i<navRoot.childNodes.length; i++) {
		node = navRoot.childNodes[i];
		if (node.nodeName=="LI") {
		node.onclick=function() {
		
this.className = (this.className == "on") ? "off" : "on";

			}
   		}
  	}
 }
}
window.onload=startList;
//--><!]]>
</script>

html:

<ul id="nav">
  <li><a href="#">Home </a></li>
  <li><a href="#">About &gt;</a> 
    <ul>
      <li><a href="#">History </a></li>
      <li><a href="#">Team </a></li>
      <li><a href="#">Offices </a></li>
    </ul>
  </li>
  <li><a href="#">Services &gt;</a> 
    <ul>
      <li><a href="#">Web Design </a></li>
      <li><a href="#">Internet Marketing </a></li>
      <li><a href="#">Hosting </a></li>
      <li><a href="#">Domain Names </a></li>
      <li><a href="#">Broadband </a></li>
    </ul>
  </li>
  <li><a href="#">Contact Us &gt;</a> 
    <ul>
      <li><a href="#">United Kingdom</a></li>
      <li><a href="#">France</a></li>
      <li><a href="#">USA</a></li>
      <li><a href="#">Australia</a></li>
    </ul>
  </li>
</ul>

]]> 下拉菜单js http://xiaocaochenfei.blog.sohu.com/69170251.html http://xiaocaochenfei.blog.sohu.com/69170251.html#comment 晨飞--迅速起飞之路 Fri, 2 Nov 2007 10:59:39 +0800 javascript http://xiaocaochenfei.blog.sohu.com/69170251.html
 <script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" over"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" over\\b"), ""); } }}if (window.attachEvent) window.attachEvent("onload", sfHover);//--><!]]></script>

html:

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a> 
    <ul>
      <li><a href="#">History</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Offices</a></li>
    </ul>
  </li>
  <li><a href="#">Services</a> 
    <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Internet Marketing</a></li>
      <li><a href="#">testing ></a> 
        <ul>
          <li><a href="#">test 1</a></li>
          <li><a href="#">test 2</a></li>
          <li><a href="#">test 3</a></li>
          <li><a href="#">testing ></a> 
            <ul>
              <li><a href="#">test 1</a></li>
              <li><a href="#">test 2</a></li>
              <li><a href="#">test 3</a></li>
              <li><a href="#">test 4</a></li>
              <li><a href="#">test 5</a></li>
            </ul>
          </li>
          <li><a href="#">test 4</a></li>
          <li><a href="#">test 5</a></li>
        </ul>
      </li>
      <li><a href="#">Hosting</a></li>
      <li><a href="#">Domain Names</a></li>
      <li><a href="#">Broadband</a></li>
    </ul>
  </li>
  <li><a href="#">Contact Us</a> 
    <ul>
      <li><a href="#">United Kingdom</a></li>
      <li><a href="#">France</a></li>
      <li><a href="#">USA</a></li>
      <li><a href="#">Australia</a></li>
    </ul>
  </li>
</ul>
]]> 未知总宽度的列表菜单水平居中---方法三(display:inline) http://xiaocaochenfei.blog.sohu.com/69085168.html http://xiaocaochenfei.blog.sohu.com/69085168.html#comment 晨飞--迅速起飞之路 Thu, 1 Nov 2007 14:17:16 +0800 XHTML CSS http://xiaocaochenfei.blog.sohu.com/69085168.html
*{margin:0;padding:0;}
.body_w{background:red;width:500px;text-align:center;}
.body_w ul{list-style:none;}
.body_w li{display:inline;line-height:25px;}
.body_w a{text-decoration:none;color:#fff;padding:0 5px;background:#08c; border:1px solid #fff;margin:0;}
.body_w a:hover{color:#000;background:#d4d4d4;}

html:

<div class="body_w">
    <ul>
        <li><a href="#">Button 1</a></li><li><a href="#">Button 2's a bit longer</a></li><li><a href="#">Butt 3</a></li><li><a href="#">Button 4</a></li>
    </ul>
</div>
注：兼容ie6.ie7.ff.opera。。其它浏览器没有测试过]]> 未知总宽度的列表菜单水平居中---方法二(浮动) http://xiaocaochenfei.blog.sohu.com/69083345.html http://xiaocaochenfei.blog.sohu.com/69083345.html#comment 晨飞--迅速起飞之路 Thu, 1 Nov 2007 13:48:08 +0800 XHTML CSS http://xiaocaochenfei.blog.sohu.com/69083345.html
*{margin:0;padding:0;}
.body_w{background:red;width:500px;display:table;}
#buttons{float:left;position:relative;left:50%;text-align:left;}
#buttons ul{list-style:none;position:relative;left:-50%;}
#buttons li{float:left;position:relative;}
#buttons a{text-decoration:none;display:block;color:#fff;padding:2px 5px; text-align:center;background:#08c; border:1px solid #fff;}
#buttons a:hover{color:#000;background:#d4d4d4;}

html:

<div class="body_w">
    <div id="buttons">
        <ul>
            <li><a href="#">Button 1</a></li>
            <li><a href="#">Button 2's a bit longer</a></li>
            <li><a href="#">Butt 3</a></li>
            <li><a href="#">Button 4</a></li>
        </ul>
    </div>
</div>

注：兼容ie6.ie7.ff.opera。。其它浏览器没有测试过
]]> 用focus,active模拟onclick的图片浏览效果 http://xiaocaochenfei.blog.sohu.com/68330684.html http://xiaocaochenfei.blog.sohu.com/68330684.html#comment 晨飞--迅速起飞之路 Thu, 25 Oct 2007 11:37:20 +0800 XHTML CSS http://xiaocaochenfei.blog.sohu.com/68330684.html 注: onClick="return false;"在这里是为了不让其跳转，，不影响整体效果
1，2，3的图片是一样的

css:
*{margin:0;padding:0;}
a{text-decoration: none;font-size:12px;color:#fff;}
.body_w{width:500px;margin:0 auto;border:1px solid #ccc;height:600px;position:relative;}
.body_w ul{position:absolute;bottom:10px;left:200px;list-style:none;z-index:10;}
.body_w ul li{float:left;}
a,a:visited{display:block;width:20px;height:20px;;background:#000;text-align:center;line-height:20px;}
a img{visibility: hidden;border:1px solid #000;position:absolute;top:-520px;width:300px;display:block;left:-130px;padding:10px 20px;background:#ccc;z-index:100;}

a:hover img{visibility: visible;cursor: default;}
a:hover,a:focus,a:active{background:#f00;}
a:focus,a:active{cursor: default;}
a:focus img,a:active img{visibility: visible;cursor: default;}

html
<div class="body_w">
    <ul>
        <li><a href="#" onClick="return false;">1<img src="http://case.blueidea.com/files/2007/10/23/work_46157_2750_20071023_091903_1393737.jpg" alt="" /></a></li>
        <li><a href="#">2<img src="http://case.blueidea.com/files/2007/10/23/work_46157_2750_20071023_091905_3193970.jpg" alt="" /></a></a></li>
        <li><a href="#">3<img src="http://case.blueidea.com/files/2007/10/23/work_46157_2750_20071023_092207_7534180.jpg" alt="" /></a></a></li>
        <li><a href="#">1<img src="http://case.blueidea.com/files/2007/10/23/work_46157_2750_20071023_091903_1393737.jpg" alt="" /></a></li>
        <li><a href="#">2<img src="http://case.blueidea.com/files/2007/10/23/work_46157_2750_20071023_091905_3193970.jpg" alt="" /></a></a></li>
        <li><a href="#">3<img src="http://case.blueidea.com/files/2007/10/23/work_46157_2750_20071023_092207_7534180.jpg" alt="" /></a></a></li>
    </ul>
</div>]]> 未知高度图片垂直局中 http://xiaocaochenfei.blog.sohu.com/68122618.html http://xiaocaochenfei.blog.sohu.com/68122618.html#comment 晨飞--迅速起飞之路 Tue, 23 Oct 2007 12:50:00 +0800 XHTML CSS http://xiaocaochenfei.blog.sohu.com/68122618.html css:

*{margin:0;padding:0;font-size:12px;color:#fff;}
.aa{width:600px;height:500px; background:#000;margin:0 auto;}
#edge,#container{display:table-cell;*display:inline; zoom:1;text-align:center;vertical-align:middle;width:600px;}
#edge{width:1px;margin-left:-1px;height:500px;}

html:
<div class="aa">
        <div id="edge"></div>
        <div id="container">
            <img src="http://ikshow.com/demo/vertical-middle/1.jpg" />
            <p>无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档</p>
            <p>无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档</p>
            <p>无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档</p>
            <p>无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档</p>
            <p>无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档</p>
        </div>
    </div>

兼容：ie6.ie7.ff.opera.safari
注：根据http://www.cssplay.co.uk/menu/centered改编

]]> 无JS实现显示，隐藏lightbox http://xiaocaochenfei.blog.sohu.com/63420871.html http://xiaocaochenfei.blog.sohu.com/63420871.html#comment 晨飞--迅速起飞之路 Mon, 10 Sep 2007 11:55:08 +0800 XHTML CSS http://xiaocaochenfei.blog.sohu.com/63420871.html <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无JS实现显示，隐藏lightbox</title>
<style type="text/css">
<!--
*{margin:0;padding:0;}
body,html{height:100%;font-size:12px;}
.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
}
span{color:red;}
-->
</style>
</head>

<body id="body">
<p>这是主要内容.点击
    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';document.getElementById('body').style.overflow='hidden';">这里</a>显示隐藏层<br /><br /><br />
    来自：http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/<br />
    作者:Emanuele Feronato<br />
    <span>原文不兼容IE6。并且当内容的高度高于一屏的时候无法实现。经过修改已经可以现实.</span>
</p>
<div id="fade" class="black_overlay">
    <div id="light" class="white_content">这是主要内容.
        <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';">关闭</a>
    </div>
</div>
</body>
</html>

]]>