成人久久精品视频,在线观看欧美一区,国产精品福利avhttp://www.aygfsteel.com/WshmAndLily/category/10987.htmlzh-cnFri, 17 Jun 2011 22:14:30 GMTFri, 17 Jun 2011 22:14:30 GMT60兼容IE8、火狐的本地圖片預覽+等比例縮放http://www.aygfsteel.com/WshmAndLily/articles/352454.htmlsemovysemovyThu, 16 Jun 2011 10:13:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/352454.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/352454.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/352454.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/352454.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/352454.html轉自http://it.oyksoft.com/post/974/


<!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>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title>Firefox3,IE6,IE7,IE8上傳圖片預覽</title>    
<style type="text/css">    
#preview_wrapper{     
    display:inline-block;     
    width:300px;     
    height:300px;     
    background-color:#CCC;     
}     
#preview_fake{ /* 該對象用戶在IE下顯示預覽圖片 */     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);     
}     
#preview_size_fake{ /* 該對象只用來在IE下獲得圖片的原始尺寸，無其它用途 */     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);       
    visibility:hidden;     
}     
#preview{ /* 該對象用戶在FF下顯示預覽圖片 */     
    width:300px;     
    height:300px;     
}     
</style>    
    
<script type="text/javascript">    
function onUploadImgChange(sender){     
    if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){     
        alert('圖片格式無效！');     
        return false;     
    }     
         
    var objPreview = document.getElementById( 'preview' );     
    var objPreviewFake = document.getElementById( 'preview_fake' );     
    var objPreviewSizeFake = document.getElementById( 'preview_size_fake' );     
         
    if( sender.files &&  sender.files[0] ){     
        objPreview.style.display = 'block';     
        objPreview.style.width = 'auto';     
        objPreview.style.height = 'auto';     
             
        // Firefox 因安全性問題已無法直接通過 input[file].value 獲取完整的文件路徑     
        objPreview.src = sender.files[0].getAsDataURL();         
    }else if( objPreviewFake.filters ){      
        // IE7,IE8 在設置本地圖片地址為 img.src 時出現莫名其妙的后果     
        //（相同環境有時能顯示，有時不顯示），因此只能用濾鏡來解決     
             
        // IE7, IE8因安全性問題已無法直接通過 input[file].value 獲取完整的文件路徑     
        sender.select();     
        var imgSrc = document.selection.createRange().text;     
             
        objPreviewFake.filters.item(     
            'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;     
        objPreviewSizeFake.filters.item(     
            'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;     
             
        autoSizePreview( objPreviewFake,      
            objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight );     
        objPreview.style.display = 'none';     
    }     
}     
    
function onPreviewLoad(sender){     
    autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );     
}     
    
function autoSizePreview( objPre, originalWidth, originalHeight ){     
    var zoomParam = clacImgZoomParam( 300, 300, originalWidth, originalHeight );     
    objPre.style.width = zoomParam.width + 'px';     
    objPre.style.height = zoomParam.height + 'px';     
    objPre.style.marginTop = zoomParam.top + 'px';     
    objPre.style.marginLeft = zoomParam.left + 'px';     
}     
    
function clacImgZoomParam( maxWidth, maxHeight, width, height ){     
    var param = { width:width, height:height, top:0, left:0 };     
         
    if( width>maxWidth || height>maxHeight ){     
        rateWidth = width / maxWidth;     
        rateHeight = height / maxHeight;     
             
        if( rateWidth > rateHeight ){     
            param.width =  maxWidth;     
            param.height = height / rateWidth;     
        }else{     
            param.width = width / rateHeight;     
            param.height = maxHeight;     
        }     
    }     
         
    param.left = (maxWidth - param.width) / 2;     
    param.top = (maxHeight - param.height) / 2;     
         
    return param;     
}     
</script>    
    
</head>    
    
<body>    
    <div id="preview_wrapper">    
        <div id="preview_fake">    
            <img id="preview" onload="onPreviewLoad(this)"/>    
        </div>    
    </div>    
    <br/>    
    <input id="upload_img" type="file" onchange="onUploadImgChange(this)"/>    
    <br/>    
    <img id="preview_size_fake"/>    
</body>    
</html>

semovy 2011-06-16 18:13 發表評論
]]>css屬性一覽表http://www.aygfsteel.com/WshmAndLily/articles/230903.htmlsemovysemovyWed, 24 Sep 2008 07:43:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/230903.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/230903.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/230903.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/230903.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/230903.html  屬 性 名 稱 屬性功能及其取值 用 法 說 明 與 范 例
顏色與背景類
color 設置文字顏色
#rgb
#rrggbb
rgb(255,255,255)
rgb(100%,100%,100%) H1{color:red}
H1{color:#f00}
H1{color:#ff0000}
H1{color:rgb(255,0,0)}
H1{color:rgb(100%,0%,0%)}
 
background-color 設置背景顏色，格式同上。 BODY{background-color:red}
BODY{background-color:#f00}
BODY{background-color:#ff0000}
BODY{background-color:rgb(255,0,0)}
BODY{background-color:rgb(100%,0%,0%)}
background-image 設置背景圖片，
url(imageURL) body{backround-image:url(back.jpg);}
background-repeat 設置背景圖片是否重復排列:
repeat-x(X軸重復排列);
repeat-y(Y軸重復排列);
No-repeat(不重復排列) BODY{background-repeat:repeat-x;}
BODY{background-repeat:No-repeat;}
background-attachment 設定背景圖片是否卷動，默認為卷動。
scroll(卷動)
fixed(不卷動) BODY{background-attachment:fixed;}
background-position 設定背景圖片或背景顏色開始顯示的位置，取值格式：
top,buttom,left,right,center(用關鍵字)
70px 10px(用長度值)
50% 30%(用百分比) BODY{background-position:right top;}
BODY{background-position:50px 10px;}
BODY{background-position:20% 50%;}
background 定義背景綜合屬性，不要求順序，各屬性值以空格分開。 BODY{background:#ffcc00 url(bg.jpg) fixed center}
字型類
font-family 設置字型屬性，取值可以是任何字型名稱，缺省為瀏覽器內定字型，可以設多個以逗號(,)分開，有空格的英文字型可用單引號或雙引號括起來。 P{font-family:宋體,楷體,黑體,"Time New Rom";}
font-style 設定字型樣式：Normal(正常),italic、objlique(斜體)  P{font-style:italic;}
font-variant 取值：Normal(默認)，small-caps(如果是中文字型則將字型縮小顯示，如果是英文則全部改為較小的大寫) H3{font-variant:small-caps;}
font-weight 設定字體粗細，取值有：
Normal(默認),bold,lighter,border,100,200...900
由于瀏覽器支持程度不同，一般只用normal和bold兩種屬性。 P{font-weight:bold;}
font-size 設定字體的大小；
絕對大小：xx-small,x-small,small,mediumlarge,x-large,xx-large;
相對大小：larger,smaller;
數字表示可用單位：磅(pt),像素(px),英寸(in),厘米(cm);
亦可用百分比表示。 H2{font-size:36pt;}
P{font-size:200%;}
font 設定字型的綜合屬性，其順序如下：
{font-style font-variant font-weight font-size /line-height font-family;} P{bold 12pt/14pt impact,Arial;}
文字類
letter-spacing 設定文字間距。 P{letter-spacing:5pt;}
text-decoration 設定文字加上下劃線、刪除線等效果：
none(無)
underline(下劃線)
overline(上劃線)
line-through(刪除線)  
vertical-align 設定文字或圖片垂直方向的對齊方式：
baseline:默認值 sub:下標 super:上標 top:垂直向上對齊 middle:垂直居中 bottom:垂直向下對齊。  
text-transform 轉換英文字母大小寫：
none:默認值 capitalize:首字母大寫 uppercase:所有英文字母大寫 lowercase:所有英文字母小寫。  
text-align 設置文字的水平對齊方式：
left:左對齊 right:右對齊 center:水平居中 justify:左右對齊。  
text-indent 設定標記元素內文字的首行縮進或配合margin-left屬性設定首行凸排。  
line-height 設定行高，聲明方式有標準行高、固定值表示法、百分比行高、字型大小比例行高等。  
列表類
list-style-type 有序列表的編號方式（供<OL>標記使用）：
none:無編號 decimal:阿拉伯數字 lower-roman:小寫羅馬數字 upper-roman:大寫羅馬數字 lower-alpha:小寫英文字母 upper-alpha:大寫英文字母。  
list-style-type 無序列表的符號樣式（供<UL>使用）：
none:無符號 disc:實心圓符號 circle:空心圓符號 square:實心方形符號。  
list-style-image 無序列表的自定義符號樣式：
格式：url(圖片名稱) UL{list-style-imag:url(dd.gif);}
list-style-position 設置列表清單符號縮排屬性：
outside:凸排  inside:縮排 UL{list-style-imag:url(dd.gif); list-style-position:outside;}
list-style 列表清單項目的綜合設定，屬性之間用空格隔開。 UL{list-style-imag:url(dd.gif) inside;}
邊界及其相關類
margin 標記元素邊界值的綜合設定。（其規則見右邊范例）
亦可以用margin-top、margin-right、margin-bottom、margin-left分開設定各邊的邊界。 聲明4個值，其順序為上、右、下、左邊界，如：DIV{margin:12pt 15pt 20pt 16pt;}
聲明3個值，其順序為上、右、下，缺少的左邊界取其對邊（右），如：DIV{margin:12pt 15pt 16pt;}
聲明2個值，其順序為上、右，缺少的下、左邊界取其對邊，如：DIV{margin:12pt 15pt;}
聲明1個值，則4個邊界同一個值，如：DIV{margin:15pt;}
padding 設定標記內容與標記邊框之間的留白的綜合設定（規則見margin屬性的范例）。 也可分開設定padding-top、padding-right、padding-bottom、padding-left各值。
border-width 標記元素邊框寬度的綜合設定（規則類似于margin屬性）。 也可分開設定border-top-width、border-right-width、border-bottom-width、border-left-width各值。
border-color 標記元素邊框顏色的綜合設定（規則類似于margin屬性）。顏色取值見color屬性。 也可分開設定border-top-color、border-right-color、border-bottom-color、border-left-color各值。
border-style 標記元素邊框樣式的綜合設定（規則類似于margin屬性）。邊框樣式有solid,double,goove,ridge,inset,outset等。 也可分開設定border-top-style、border-right-style、border-bottom-style、border-left-style各值。
border 標記元素4個邊框的綜合設定，可以分別聲明邊框寬度、邊框樣式、和邊框顏色。 DIV{border:5pt solid #ff0000;}
width 設定標記元素的寬度。  
height 設定標記元素的高度。  
float 設定標記元素與文字間的相對位置（文字繞排方式）。取值：
none:以默認方式顯示；
left:標記元素靠左，文字在右邊繞排；
right:標記元素靠右，文字在左邊繞排；  
clear 設定標記元素與文字間的相對位置（與float不同的是標記元素兩邊都不繞排）。取值：
none:以默認方式顯示；
left:標記元素靠左，右邊無文字繞排；
right:標記元素靠右，左邊無文字繞排；  
其他類
z-index 設定標記元素的堆疊層次，取值為整數，也可以是負數，數值大的在上層。  
visibility 設定標記元素是否可見，取值有：
inherit:取默認值 visible:可見 hidden:不可見（隱藏）  

該表只列出常用的CSS屬性，及簡要介紹其主要功能，若要了解各所有屬性和具體的用法，請參考相關書籍。當然，實踐是最好的提高辦法。

semovy 2008-09-24 15:43 發表評論
]]>錨點鏈接測試http://www.aygfsteel.com/WshmAndLily/articles/193449.htmlsemovysemovyWed, 16 Apr 2008 07:05:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/193449.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/193449.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/193449.html#Feedback1http://www.aygfsteel.com/WshmAndLily/comments/commentRss/193449.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/193449.html <title>錨點鏈接測試</title>
<body>
<ul>
<li><a href="#gone">過去</a></li>
<li><a href="#now">現在</a></li>
<li><a href="#future">將來</a></li>
</ul>
<p>
TTTTTTTTTTTTTTTTTTTTTTT<br>
TTTTTTTTTTTTTTTTTTTTTTT<br>
TTTTTTTTTTTTTTTTTTTTTTT<br>
TTTTTTTTTTTTTTTTTTTTTTT<br>
TTTTTTTTTTTTTTTTTTTTTTT<br>
TTTTTTTTTTTTTTTTTTTTTTT<br>
TTTTTTTTTTTTTTTTTTTTTTT<br>
TTTTTTTTTTTTTTTTTTTTTTT<br>
TTTTTTTTTTTTTTTTTTTTTTT<br>
TTTTTTTTTTTTTTTTTTTTTTT<br>
TTTTTTTTTTTTTTTTTTTTTTT<br>
TTTTTTTTTTTTTTTTTTTTTTT<br>
TTTTTTTTTTTTTTTTTTTTTTT<br>
TTTTTTTTTTTTTTTTTTTTTTT<br>
</p>
<p><a name="gone"></a>
GONE
<p>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
gone info<br>
</p>
</p>
<p><a name="now"></a>
NOW
<p>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
now info<br>
</p>
</p>
<p><a name="future"></a>
FUTURE
<p>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
future info<br>
</p>
</p>
</body>
</html>

semovy 2008-04-16 15:05 發表評論
]]>帶陰影,可拖動,圓角,div + css 層http://www.aygfsteel.com/WshmAndLily/articles/189465.htmlsemovysemovySat, 29 Mar 2008 07:26:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/189465.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/189465.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/189465.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/189465.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/189465.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" >
<script type="text/javascript" src="http://teckotooling.vicp.net/teckotooling/js/niftycube.js"></script>
<style type="text/css">
<!--
#box_header{
 height:30px;
 padding:8px auto 8px auto;
 font-size:17px;
 color:#fff;
 font-weight:bold;
 background-color:#bd7803;
 position:relative;
 top:0px;
 text-align:center;
 cursor:move;
}
#box{
 width:200px;
 font-size:15px;
 padding:0px 5px 5px 0px;
 background-color:#eaeaea;
 position:absolute;
 top:200px;
 left:200px;
       
 text-align:center;
 cursor:default;  
}
#content
{
 width:100%;
 padding:5px 0px 5px 0px;
 position:relative;
        font-size:20px;
        color:green;
 text-align:center;
 background-color:#FDE3C3;
}
#content li
{
 list-style-type:none;
 font-size:15px;
 margin:1px 0px 1px 0px;
}
//-->
</style>
<script language="javascript">
<!--//
function drag(header,box){
 header.onmousedown=function(a){
  var d=document;if(!a)a=window.event;
  var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
  if(header.setCapture)
   header.setCapture();
  else if(window.captureEvents)
   window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

  d.onmousemove=function(a){
   if(!a)a=window.event;
   if(!a.pageX)a.pageX=a.clientX;
   if(!a.pageY)a.pageY=a.clientY;
   var tx=a.pageX-x,ty=a.pageY-y;
   box.style.left=tx;
   box.style.top=ty;
  };

  d.onmouseup=function(){
   if(header.releaseCapture)
    header.releaseCapture();
   else if(window.captureEvents)
    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
   d.onmousemove=null;
   d.onmouseup=null;
  };
 };
}
window.onload=function(){
 drag(document.getElementById('box_header'),document.getElementById('box'));
 Nifty("#box_header","top");
 Nifty("#content","bottom");
 Nifty("#box");
};
//-->
</script>
</head>
<body>

<div id="box" >
  <div id='box_header'>
  <li style="margin:5px 0px 5px 0px;list-style-type:none">
     咸菜
  </li>
 </div>
  <div id="content">
  <li>孤獨中等待，</li>
  <li>等待中無耐。</li>
  <li>無耐中戀愛，</li>
  <li>戀愛中變態。</li>
  </div> 
</div>

</body>
</html>



semovy 2008-03-29 15:26 發表評論
]]><textarea>滾動條顏色樣式設置</textarea>http://www.aygfsteel.com/WshmAndLily/articles/163405.htmlsemovysemovyTue, 27 Nov 2007 03:15:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/163405.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/163405.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/163405.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/163405.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/163405.html<textarea>滾動條顏色樣式設置</textarea>
2007年05月30日 星期三 下午 03:01

對里面樣式的介紹：

語法：

scrollbar-face-color : color

參數：

color : 　指定顏色。

說明：

設置或檢索滾動條3D表面（ThreedFace）的顏色。（演示）

語法：

scrollbar-highlight-color : color

參數：

color : 　指定顏色。

說明：

設置或檢索滾動條3D界面的亮邊（ThreedHighlight）顏色。（演示）

語法：

scrollbar-arrow-color : color

參數：

color : 　指定顏色。

說明：

設置或檢索滾動條方向箭頭的顏色。當滾動條出現但不可用時，此屬性失效。（演示）

語法：

scrollbar-shadow-color : color

參數：

color : 　指定顏色。

說明：

設置或檢索滾動條3D界面的暗邊（ThreedShadow）顏色。

 

語法：

scrollbar-3d-light-color : color

參數：

color : 　指定顏色。

說明：

設置或檢索滾動條亮邊框顏色。


語法：

scrollbar-base-color : color

參數：

color : 　指定顏色。

說明：

設置或檢索滾動條基準顏色。其它界面顏色將據此自動調整。

語法：

scrollbar-dark-shadow-color : color

參數：

color : 　指定顏色。

說明：

設置或檢索滾動條暗邊框（ThreedDarkShadow）顏色。


<textarea name="textarea" cols="70" rows="5" readonly class="ta1"><c:out value="${discussion.commentcontent}" escapeXml="false"/></textarea>

<style tpye="text/css">
<!--
.ta1 { SCROLLBAR-FACE-COLOR: #FBE1D4;
SCROLLBAR-HIGHLIGHT-COLOR: #FBE1D4;
SCROLLBAR-SHADOW-COLOR: #999999;
SCROLLBAR-3DLIGHT-COLOR: #999999;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #e3e3e3;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
SCROLLBAR-BASE-COLOR: #999999;

-->
</style>


semovy 2007-11-27 11:15 發表評論
]]>ie ff解決div的撐大http://www.aygfsteel.com/WshmAndLily/articles/163194.htmlsemovysemovyMon, 26 Nov 2007 08:29:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/163194.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/163194.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/163194.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/163194.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/163194.html'>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
div {
  width:300px;
  word-wrap:break-word;
  border:1px solid red;
  }
-->
</style>


<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<script type="text/javascript">
/* <![CDATA[ */
function toBreakWord(intLen){
var obj=document.getElementById("ff");
var strContent=obj.innerHTML;  
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"
";  
strContent=strContent.substr(intLen,strContent.length);  
}
strTemp+="
"+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById  &&  !document.all)  toBreakWord(37)
/* ]]> */
</script>


semovy 2007-11-26 16:29 發表評論
]]>拖動層.兼容(ie ff ns)http://www.aygfsteel.com/WshmAndLily/articles/161035.htmlsemovysemovyFri, 16 Nov 2007 07:53:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/161035.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/161035.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/161035.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/161035.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/161035.html<html>
<head>
<style type="text/css">
<!--
#headline{
 width:100px;
 height:20px;
 background-color:#eee;
 border:1px solid #333;
 position:relative;
 top:0px;
 text-align:center;
 cursor:move;
 }
#layer{
 width:100px;
 height:100px;
 background-color:#eee;
 border:1px solid #fff;
 position:absolute;
 top:30px;
 left:200px;
       
 text-align:center;
 cursor:default;  

}
.content
{
 width:100px;
 height:100%;
 position:relative;
        font-size:20px;
        color:green;
}
//-->
</style>
<script language="javascript">
<!--//
function drag(head,layer){
 head.onmousedown=function(a){
  var d=document;if(!a)a=window.event;
  var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
  if(head.setCapture)
   head.setCapture();
  else if(window.captureEvents)
   window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

  d.onmousemove=function(a){
   if(!a)a=window.event;
   if(!a.pageX)a.pageX=a.clientX;
   if(!a.pageY)a.pageY=a.clientY;
   var tx=a.pageX-x,ty=a.pageY-y;
   //o.style.left=tx;
   //o.style.top=ty;
   layer.style.left=tx;
   layer.style.top=ty;
  };

  d.onmouseup=function(){
   if(head.releaseCapture)
    head.releaseCapture();
   else if(window.captureEvents)
    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
   d.onmousemove=null;
   d.onmouseup=null;
  };
 };
}
window.onload=function(){
 drag(document.getElementById('headline'),document.getElementById('layer'));
};
//-->
</script>
</head>
<body>

<div id="layer" >
 <div id='headline' algin="center">headling</div>
 <div id="content">
  <table class="content"><tbody><tr><td>absoluteabsoluteabsoluteabsoluteabsolute</td></tr></tbody></table>
 </div> 
 

</div>

</body>
</html>



semovy 2007-11-16 15:53 發表評論
]]>CSS瀏覽器兼容問題總結http://www.aygfsteel.com/WshmAndLily/articles/153597.htmlsemovysemovyWed, 17 Oct 2007 08:02:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/153597.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/153597.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/153597.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/153597.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/153597.html 　　2.FF: div 設置 margin-left, margin-right 為 auto 時已經居中, IE 不行
　　3.FF: body 設置 text-align 時, div 需要設置 margin: auto(主要是 margin-left,margin-right) 方可居中
　　4.FF: 設置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width
　　5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設置樣式，值得注意的是，一定要將xxxx !important 這句放置在另一句之上
　　6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內容不要換行
　　7.cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以
　  8.FF: 鏈接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。
　　9.在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法：div{margin:30px!important;margin:28px;}
　　注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：div{maring:30px;margin:28px}
　　重復定義的話按照最后一個來執行，所以不可以只寫margin:XXpx!important;

　　10.IE5 和IE6的BOX解釋不一致
　　IE5下div{width:300px;margin:0 10px 0 10px;}
　　div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
　　關于這個/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的話，請告訴我一聲，謝了！：）

　　11.ul標簽在Mozilla中默認是有padding值的,而在IE中只有margin有值所以先定義ul{margin:0;padding:0;}
　　就能解決大部分問題

　　
    注意事項：

　　1、float的div一定要閉合。

　　例如：(其中floatA、floatB的屬性已經設置為float:left;)


　　這里的NOTfloatC并不希望繼續平移，而是希望往下排。
　　這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標簽，必須將float標簽閉合。
　　在

　　之間加上
　　這個div一定要注意聲明位置，一定要放在最恰當的地方，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關系，否則會產生異常。
　　并且將clear這種樣式定義為為如下即可：.clear{
clear:both;}
　　此外，為了讓高度能自動適應，要在wrapper里面加上overflow:hidden;
　　當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了兼容。
　　例如某一個wrapper如下定義：
程序代碼 程序代碼

.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}


　　2、margin加倍的問題。

　　設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。
　　解決方案是在這個div里面加上display:inline;
例如：



　　相應的css為
程序代碼 程序代碼

#IamFloat{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/}


　　3、關于容器的包涵關系

　　很多時候，尤其是容器內有平行布局，例如兩、三個float的div時，寬度很容易出現問題。在IE中，外層的寬度會被內層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。

　　4、關于高度的問題

　　如果是動態地添加內容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態的內容，高度最好定好。（似乎有時候不會自動往下撐開，不知道具體怎么回事）

　　5、最狠的手段 - !important;

　　如果實在沒有辦法解決一些細節問題,可以用這個方法.FF對于"!important"會自動優先解析,然而IE則會忽略.如下
程序代碼 程序代碼

.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}


　　值得注意的是，一定要將xxxx !important 這句放置在另一句之上，上面已經提過



IE7.0出來了，對CSS的支持又有新問題。瀏覽器多了，網頁兼容性更差了，疲于奔命的還是我們 ，為解決IE7.0的兼容問題，找來了下面這篇文章：


現在我大部分都是用!important來hack，對于ie6和firefox測試可以正常顯示，但是ie7對!important可以正確解釋，會導致頁面沒按要求顯示！搜索了一下，找到一個針對IE7不錯的hack方式就是使用“*+html”，現在用IE7瀏覽一下，應該沒有問題了。

現在寫一個CSS可以這樣：
程序代碼 程序代碼

#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */


那么在firefox下字體顏色顯示為#333，IE6下字體顏色顯示為#666，IE7下字體顏色顯示為#999，他們都互不干擾。

semovy 2007-10-17 16:02 發表評論
]]>css window關機仿真http://www.aygfsteel.com/WshmAndLily/articles/153173.htmlsemovysemovyTue, 16 Oct 2007 02:26:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/153173.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/153173.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/153173.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/153173.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/153173.html <head>
<title>test demo</title>
<style type="text/css">
#lightbox {/*該層為高亮顯示層*/
 BORDER-RIGHT: #fff 1px solid;
 BORDER-TOP: #fff 1px solid;
 DISPLAY: none;
 Z-INDEX: 9999;
 BACKGROUND: #FFFFCC;
 LEFT: 50%;
 MARGIN: -220px 0px 0px -180px;
 BORDER-LEFT: #fff 1px solid;
 WIDTH: 280px;
 BORDER-BOTTOM: #fff 1px solid;
 POSITION: absolute;
 TOP: 80%;
 HEIGHT: 40px;
 TEXT-ALIGN: left
}
#overlay {/*該層為覆蓋層*/
 DISPLAY: none;
 Z-INDEX: 5000; FILTER: alpha(opacity=70);
 LEFT: 0px;
 WIDTH: 100%;
 POSITION: absolute;
 TOP: 0px;
 HEIGHT: 100%;
 BACKGROUND-COLOR: #fff; moz-opacity:0.8; opacity:.70
}
</style>
<script language="javascript">
 function aaa(){
  document.all("overlay").style.display="block";
  document.all("lightbox").style.display="block";
 }
 function aaa1(){
  document.all("overlay").style.display="none";
  document.all("lightbox").style.display="none";
 }
</script>
</head>
<body>
<div id="overlay"></div>
<div id="lightbox">
 <table border="0">
  <tr>
   <td valign="middle">
    點擊按鈕激活頁面 <input type="button" value="test" name="aaa" onclick="aaa1()">
   </td>
  </tr>
 </table>
</div>
<input type="button" value="test" name="aaa" onclick="aaa()">
<p>
 <div style="color:red;font-size:20px;font-weight:bold;background-color:GreenYellow;margin-top:100px;text-align:right;width:500px">一起走過的日子</div>
</p>
</body>
</html>

semovy 2007-10-16 10:26 發表評論
]]>CSS代碼詳解http://www.aygfsteel.com/WshmAndLily/articles/153172.htmlsemovysemovyTue, 16 Oct 2007 02:25:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/153172.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/153172.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/153172.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/153172.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/153172.html

/*如何設定+固定百度空間的背景*/
在body{}中加入
background-image:url(圖片地址) ; 　                定義背景圖片
background-repeat: no-repeat;                          定義背景圖片不重復
background-position: center;                             定義背景居中
background-attachment: fixed;                          定義背景固定，不滾動參數fixed

/*背景設置*/
body{}中加入background:url(http://hi.baidu.com/0454ldk) repeat-x #FFFFFF
注：
repeat              　                   背景圖像在縱向和橫向上平鋪
no-repeat              　              背景圖像不平鋪
repeat-x              　                背景圖像在橫向上平鋪
repeat-y              　                背景圖像在縱向平鋪

/*鼠標樣式設置*/
在body{} 中添加;CURSOR: url('http://webme.bokee.com/inc/mouse028.cur')}
a:hover{CURSOR: url('http://webme.bokee.com/inc/mouse031.ani')
第一行是鼠標指針初始形態，第二行是鼠標指針碰到鏈接的形態
CSS鼠標樣式大全

/*半透明設置*/
.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}

/*解決回車換兩行的問題*/
Shift+回車

/*全能隱藏代碼*/
display:none

/*不停變換空間背景圖片*/
http://magic.qtutu.com/

參數
color:green                                表示字體顏色。
font-size:14px                             表示字體大小。
font-family:Georgia,黑體            表示英文字體和中文字體
border:1px                                 表示邊框的粗細。
solid green                                 表示邊框的顏色。
background-color:black              表示背景色。

/*最頂部加字方法!*/
#tabline{margin-top:-490px;right:0px;line-height:8px; background:url(圖片地址) no-repeat bottom; padding-bottom: 40px; margin-bottom: 10px}
圖片上面打上你要的字~歡迎光臨http://hi.baidu.com/0454ldk

/*添加LOGO*/
#main {background:url(頂部LOGO) no-repeat 10px 0px;} /*10px 0px;距左 距頂部*/
#layout {width:980px;margin-left:0px;background:url(底部LOGO) no-repeat bottom 0px;padding-bottom:80px} /*margin-left:0px底部圖片距離最左邊長度；bottom 0px邊框大小；padding-bottom:80px主體模塊最下端距離底部圖片最頂端距離*/

/*添加小背景圖片*/
.stage{background:url(小背景圖片http://hi.baidu.com/0454ldk) repeat-y 0px 0px} /*0px 0px距左             距頂（建議為0）*/

/*空間整體寬度*/
#main{width:740px!important;text-align:center}或#main{width:80%!important}

/*版塊長度及間距*/
#layout td.c2t1{padding-left:55px;width:570px} /*最左版塊*/
#layout td.c2t2{width:60px} /*左右兩版塊間距*/
#layout td.c2t3{width:260px;padding-right:30px} /*第2豎列版塊信息*/

/*定義閱讀文章時 文章塊寬度 距左長度*/
.stagepad {width:570px;margin-left:44px;}
.stagepad a:link{text-decoration:none;font-weight:bold}
.stagepad a:visited{text-decoration:none;font-weight:bold}

/*文章虛線邊框*/
#m_blog div.cnt{color:#333333;line-height:20px;font-size:14px;border:1px dashed #090688;background:#Ffffff;PADDING: 10px;}
/
#m_blog div.cnt{color:#808080;line-height:20px;font-size:16px;border-top:2px dashed #1DC01D;border-bottom:2px dashed #1DC01D;border-left:2px dashed #1DC01D;border-right:2px dashed #1DC01D;PADDING-RIGHT: 10px; PADDING-LEFT: 10px;PADDING-TOP: 10px;PADDING-bottom: 10px;}

dotted：　 點線
dashed : 　虛線
double : 　雙線邊框
groove : 　3D凹槽
ridge : 　           菱形邊框
inset : 　            3D凹邊
outset : 　3D凸邊

/*前景圖片透明設置*/
filter:alpha(opacity=90,finishopacity=100,style=0,)

/*播放器*/
#phx{FILTER: Alpha(Opacity=100, FinishOpacity=60, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)Invert(); WIDTH: 224px;HEIGHT:200px}
Invert();              濾鏡效果 可以更換

/*不顯示播放器，不影響音樂的播放*/
添加#mod_bgmusic{display:none}

/*日志背景*/
#m_blog.modbox{background:url(圖片)}
或#m_blog div.cnt{background:url(圖片) repeat; /*圖片*/color:#666666;line-height:20px;font-size:14px}

/*滾動條*/
#m_blog{scrollbar-face-color: #E100E1;
scrollbar-shadow-color: maroon;
scrollbar-highlight-color: white;
scrollbar-3dlight-color: #E100E1;
scrollbar-darkshadow-color:#E100E1;
scrollbar-arrow-color:#E100E1;
scrollbar-base-color: #E100E1;
scrollbar-track-color: #E100E1;
overflow-y:auto;height:1000px;
filter: chroma(color=#E100E1)}  

/*去掉橫向滾動條*/
在body{}里加上overflow-x:hidden

/*禁止選擇 鼠標右鍵特效*/
#main{
background:url('javascript:
document.oncontextmenu=new Function("event.returnValue=false;");
document.onselectstart=new Function("event.returnValue=false;");
')}
document.oncontextmenu=new Function("event.returnValue=false;");禁止鼠標右鍵
document.onselectstart=new Function("event.returnValue=false;")

禁止選擇/*鼠標觸碰 按鈕下陷*/
a:hover{}中加入position:relative; left:2px; top:1px; clip:rect( )

/*彈出窗口*/
#comm_info 和#comm_info a 替換#comm_info a{color:#D77B18 border: 1px solid #000000; padding: 10px; background-image: url('javascript:alert("你要說的話");')}

#comm_info{}或#m_links div.item{}
添加
background:url(javascript:alert())歡迎光臨零點壹貮http://hi.baidu.com/0454ldk

/*文章在新窗口中打開*/
a:active { text: (target="_blank")}

/*屏蔽Rss鏈接，baidu圖片*/
#comm_info a {display:none}

/*標題背景*/
#header div.lc{}              -左
#header div.rc{}              -右
插入 background:url(http://***)

/*百度空間 進入后彈出對話框*/
去掉#comm_info div.line 把#comm_info a換成
#comm_info a{color:#D77B18 border: 1px solid #000000; padding: 10px; background-image: url('javascript:alert("歡迎光臨http://hi.baidu.com/0454ldk");')}

/*文章日期旁加小圖案*/
#m_blog div.date
{text-indent:1.5cm;background:url(這里要填上你自己選的小圖片的連接地址) 30% 0% no-repeat; /*背景圖片*/margin:5px 0 8px 0;color:#999999;
line-height:50px; /*調整行高*/}

/*標題欄主體加小圖案*/
模塊ID span.modtit{background:url(http://hi.baidu.com/0454ldk) no-repeat top left;font-size:0px;width:100%;margin-left:-18px;padding-top:3px}

/*常用插入時間圖片位置的代碼*/
圖片顯示位置——個人檔案照片下面：
#m_pro div.act{margin-top:5px; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px}

圖片顯示位置——文章列表 標題下面：
#m_blog div.tit{font-size:14px;font-weight:bold; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px}

圖片顯示位置——文章列表 標題左面：
#m_blog div.tit{font-size:14px;font-weight:bold; line-height:24px; text-indent:120px; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat}

圖片顯示位置——TAB導航欄：
#tabline{top:89px; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 32px; margin-bottom: 6px}

圖片顯示位置——相冊下面：
#m_album div.image{text-align:center; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 45px; margin-bottom: 1px}

圖片顯示位置——每個友情鏈接下面：
#m_links div.line{margin-top:5px;line-height:8px;border-top:1px solid #F4C1B5; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 16px; margin-bottom: 10px}

圖片顯示位置——每個最新評論下面：
#m_comment div.item{color:#000000;font-size:12px; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px}

圖片顯示位置——每個文章分類下面：
#m_artclg div.line{margin-top:5px;line-height:8px;border-top:1px solid #F4C1B5; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 16px; margin-bottom: 10px}

圖片顯示位置——其他區域：
#comm_info div.line{margin-top:5px;line-height:8px;border-top:1px solid #BBC1C6; background:url(http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px}

其他樣式顯示http://www.csufresno.edu/cgi-bin/Count.cgi?display=date&dd=A

/*調整圖片位置*/
padding-bottom: 20px; margin-bottom: 5px; padding-bottom為距上高度，margin-bottom為距下高度。

/*調整TAB距離*/
在TAB{}內加入text-indent:30px

/*分割線*/
模塊ID div.line{margin-top:17px;line-height:17px;background:url(http://hi.baidu.com/0454ldk) repeat-x}

/*發光效果*/
{}中加入filter:glow (color= #299BE8,strength=2)

/*陰影效果字體陰影*/
{}中加入filter:DropShadow(Color=#000000:,OffX=2, OffY=3,Positive=1);或filter:shadow(Color=#000000:,OffX=2, OffY=3,Positive=1)
參數作用：
Color=陰影的顏色代碼
OffX=設置陰影與對象（文字或圖片）的橫向距離偏移
OffY=設置陰影與對象的豎向距離偏移
Positive=設置建立陰影的對象，true是為非透明像素建立陰影，false是為透明的像素建立陰影，一般不建議使用false
另外，如果添加陰影的地方已經有了filter的參數，例如設置透明度的filter:alpha()，只需把DropShadow(Color=#000000, OffX=3, OffY=3, Positive=true)添加到alpha()的后面即可，這里不需要間隔，當中留空格可以,間隔將無效
例如在原來的filter:alpha(opacity=50);后面加上陰影效果代碼：
filter:alpha(opacity=50)DropShadow(Color=#000000, OffX=3, OffY=3, Positive=true);

/*投影的代碼*/
filter:Shadow(Color=gray/*顏色*/,Direction=135/*方向*/)

/*文章標題背景*/
#m_blog div.tit{text-indent:1.5cm/*縮近*/;line-height:75px;/*增大行高，使背景圖片完全顯示*/font-size:16px;font-weight:bold;background:url(http://hi.baidu.com/0454ldk) no-repeat;/*標題背景圖片，不重復*/}
line-height:多少px;                設置標題的高度，其實這里的設置為圖片的高度就可以了
text-indent:多少px;                設置標題的文本前面空多少寬度，這里可以填圖片的寬度，為了美觀起見，可以再多+5、6px，因為圖片和標題貼著不好看，這個主要還是看個人感覺和喜好設置了

/*空間透明*/
.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}

/*其他模塊添加圖片*/
#comm_info div.line{margin-top:4px;line-height:8px;border-top:2px solid #ff3333; background:url(http://***.gif) no-repeat bottom; padding-bottom: 32px; margin-bottom: 32px}

/*隱藏其他模塊標題*/
#comm_info .modhead span{display:none}

/*個人檔案添加圖片*/
#m_pro div.image{}加入background:url(http://hi.baidu.com/0454ldk) no-repeat bottom;padding-bottom:100px
                 bottom讓圖片沉底
                 padding-bottom增加頭像模塊底下的寬度
                 padding-bottom數值一般設置為LOGO的高度值，LOGO的上邊與頭像的下邊距離0，加大padding-bottom的數值，LOGO的上邊與頭像的下邊距離亦加大

/*去除模塊背景即完全背景透明*/
刪除模塊background-color:……的屬性;加background:transparent即可
在header{}中加入
background:transparent                      這個參數的作用是使完全背景透明,并刪除原來的屬性background:url(http://hi.baidu.com/0454ldk)
#header div.rc{}以及.stage{}與header{}同樣設置

/*其他模塊標題添加圖片*/
#comm_info span.modtit{color:#737373;text-indent:16px;background:url(http://hi.baidu.com/0454ldk)repeat-x;font-size:0px;width:100%;margin-left:-18px;padding-top:3px}

/*右下角彈出窗口*/
#main{
background:url('javascript:
var sunPop = window.createPopup();
var popTop=50;
function popmsg(msgstr){
var winstr="<table style=\"border:solid #A96D13 1px\" width=\"200\" height=\"150\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" bgcolor=\"#88CFFF\" >";
winstr+="<tr><td height=\"30\"> </td></tr><tr><td align=\"center\"><table width=\"90%\" height=\"110\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">";
winstr+="<tr><td valign=\"top\" style=\"font-size:12px; color:#209C20; face:黑體\">"+msgstr+"</td></tr></table></td></tr></table>";
sunPop.document.body.innerHTML=winstr;
popshow();
                 }
function popshow(){
window.status=popTop;
if(popTop>1720){
clearTimeout(mytime);
sunPop.hide();
return;
}else if(popTop>1520&&popTop<1720){
sunPop.show(screen.width-250,screen.height,200,1720-popTop);
}else if(popTop>1500&&popTop<1520){
sunPop.show(screen.width-250,screen.height+(popTop-1720),200,150);
}else if(popTop<180){
sunPop.show(screen.width-250,screen.height,200,popTop);
}else if(popTop<220){
sunPop.show(screen.width-250,screen.height-popTop,200,150);
}
popTop+=10;
var mytime=setTimeout("popshow();",50);
}
popmsg("2006年12月1日<br>歡迎光臨零點壹貮http://hi.baidu.com/0454ldk。<br>你要說的話http://hi.baidu.com/0454ldk。<br>你要說的話http://hi.baidu.com/0454ldk~");
')
}

/*“發表評論”區域*/
#spBlogCmtor{background:url(圖片地址)}              /* 姓名*/
#spBlogCmtURL{background:url(圖片地址) }/* 網址或郵箱*/
#spBlogCmtText{background:url(圖片地址) }             /* 評論內容*/
#in_send div.tit{margin:10px 0 10px 0;color:#FFFFFF;font-size:14px;font-weight:bold}  

設置“發表評論”區域上方的“發表評論”四個大字，其中color:#FFFFFF設置字的顏色，font-size設置字的大小，font-weight:hold設置讓這字體加粗，不加粗刪掉。

#in_send td{color:#FFFFFF}

設置“姓名”、“網址或郵箱”和“內容”字的顏色。

#spBlogCmtText {border: 1px solid #FFCCFF;background:#FFFFFF           no-repeat top center; background-attachment: fixed}

設置評論框底色。background:#FFFFFF設置顏色，添加圖片則改為background:url(圖片),
圖片最佳尺寸是503*153,1px 表示評論邊框的寬度,#FFCCFF 表示評論邊框的顏色。

/*隱藏“查看該用戶在百度的”分類*/
加入#m_pro .basic a.nlk{display:none}代碼即可

/*隱藏“百度空間測試版”圖片*/
#m_comm_info img{display:none}

/*添加天氣預報*/
#m_mylink1 div.line{background:url(http://firetear.com/weather/weather.aspx?city=%u5BBF%u8FC1&style=1) no-repeat bottom;line-height:40px;margin-bottom: 10px;margin-top:5px;padding-bottom: 138px}
先編輯自定義模塊,鏈接地址為http://www.tq121.com.cn,然后更換為以上代碼，（注意：要把地址換在你所在地的地址，可以到 http://firetear.com/weather 網站里去找，只需把生成代碼里面SRC后面的地址替換以上地址即可）

/*更多文章居右*/
#m_blog div.more{margin:14px 0 16px 0;text-align:right}

/*在友情鏈接添加“發送消息”的鏈接*/
在友情鏈接里的鏈接地址內填上：http://msg.baidu.com/ms?ct=21&cm=1&tn=bmSendMessage&un=你的百度用戶名
這樣點擊該鏈接就可以給你發送消息，而這個鏈接另一個功能就是可以給自己發送消息。

/*改變你的按鈕和輸入欄的顏色及字體*/
input,select,textarea{color:green;font-size:14px;font-family:Tahoma,黑體;border:1px solid green;background-color:black}
textarea{overflow:hidden}   

/*留言板添加圖片*/
#spBCmtText{border: 6px solid #000000 ;color:#ffffff;background:url(http://hi.baidu.com/0454ldk) no-repeat;overflow-y :scroll;height:150px}
圖片最佳尺寸是503*153，6px表示評論邊框的寬度，#000000 表示評論邊框的顏色。

/*百度空間添加QQ在線*/
鏈接地址http://wpa.qq.com/msgrd?V=1&Uin=號碼 QQ



semovy 2007-10-16 10:25 發表評論
]]>用相對定位和負向移動完成圖片象框陰影http://www.aygfsteel.com/WshmAndLily/articles/148803.htmlsemovysemovyThu, 27 Sep 2007 09:41:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/148803.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/148803.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/148803.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/148803.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/148803.html .out {
  position:relative;
  background:#bbb;
  margin:10px auto;
  width:285px
  }
.in {
  background:#fff;
  border:1px solid #555;
  padding:10px 5px;
  position:relative;
  top:-5px;
  left:-5px;
  }
</style><div class="out"> <div class="in" > <img src="http://www.makewing.com/lanren/jscode/js-0058/images/01.jpg" alt="" /> </div></div>

semovy 2007-09-27 17:41 發表評論
]]>list-style-type的用法 http://www.aygfsteel.com/WshmAndLily/articles/148699.htmlsemovysemovyThu, 27 Sep 2007 06:27:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/148699.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/148699.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/148699.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/148699.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/148699.html list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin


取值：
disc : CSS1 默認值。實心圓
circle : CSS1 空心圓
square : CSS1 實心方塊
decimal : CSS1 阿拉伯數字
lower-roman : CSS1 小寫羅馬數字
upper-roman : CSS1 大寫羅馬數字
lower-alpha : CSS1 小寫英文字母
upper-alpha : CSS1 大寫英文字母
none : CSS1 不使用項目符號
armenianl : CSS2 未支持。傳統的亞美尼亞數字
cjk-ideographic : CSS2 未支持。淺白的表意數字
georgian : CSS2 未支持。傳統的喬治數字
lower-greek : CSS2 未支持。基本的希臘小寫字母
hebrew : CSS2 未支持。傳統的希伯萊數字
hiragana : CSS2 未支持。日文平假名字符
hiragana-iroha : CSS2 未支持。日文平假名序號
katakana : CSS2 未支持。日文片假名字符
katakana-iroha : CSS2 未支持。日文片假名序號
lower-latin : CSS2 未支持。小寫拉丁字母
upper-latin : CSS2 未支持。大寫拉丁字母


semovy 2007-09-27 14:27 發表評論
]]>IE與Firefox的CSS兼容大全http://www.aygfsteel.com/WshmAndLily/articles/148683.htmlsemovysemovyThu, 27 Sep 2007 06:05:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/148683.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/148683.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/148683.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/148683.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/148683.htmlIE與Firefox的CSS兼容大全 　CSS對瀏覽器器的兼容性具有很高的價值，通常情況下IE和Firefox存在很大的解析差異，這里介紹一下兼容要點。

　　常見兼容問題：

　　1.DOCTYPE 影響 CSS 處理

　　2.FF: div 設置 margin-left, margin-right 為 auto 時已經居中, IE 不行

　　3.FF: body 設置 text-align 時, div 需要設置 margin: auto(主要是 margin-left,margin-right) 方可居中

　　4.FF: 設置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width

　　5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設置樣式

　　6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內容不要換行

　　7.cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以

　　8.FF: 鏈接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。

　　9.在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法：
div{margin:30px!important;margin:28px;}
　　注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：
div{maring:30px;margin:28px}
　　重復定義的話按照最后一個來執行，所以不可以只寫margin:XXpx!important;

　　10.IE5 和IE6的BOX解釋不一致
　　IE5下
div{width:300px;margin:0 10px 0 10px;}
　　div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
　　關于這個/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的話，請告訴我一聲，謝了！：）

　　11.ul標簽在Mozilla中默認是有padding值的,而在IE中只有margin有值所以先定義
ul{margin:0;padding:0;}
　　就能解決大部分問題

　　注意事項：

　　1、float的div一定要閉合。

　　例如：(其中floatA、floatB的屬性已經設置為float:left;)
<#div id="floatA" ></#div>
<#div id="floatB" ></#div>
<#div id="NOTfloatC" ></#div>
　　這里的NOTfloatC并不希望繼續平移，而是希望往下排。
　　這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標簽，必須將float標簽閉合。
　　在
<#div class="floatB"></#div>
<#div class="NOTfloatC"></#div>
　　之間加上
<#div class="clear"></#div>
　　這個div一定要注意聲明位置，一定要放在最恰當的地方，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關系，否則會產生異常。
　　并且將clear這種樣式定義為為如下即可：
.clear{
clear:both;}
　　此外，為了讓高度能自動適應，要在wrapper里面加上overflow:hidden;
　　當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了兼容。
　　例如某一個wrapper如下定義：
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}

　　2、margin加倍的問題。

　　設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。
　　解決方案是在這個div里面加上display:inline;
例如：
<#div id="imfloat"></#div>

　　相應的css為
#IamFloat{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/}

　　3、關于容器的包涵關系

　　很多時候，尤其是容器內有平行布局，例如兩、三個float的div時，寬度很容易出現問題。在IE中，外層的寬度會被內層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。

　　4、關于高度的問題

　　如果是動態地添加內容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態的內容，高度最好定好。（似乎有時候不會自動往下撐開，不知道具體怎么回事）

　　5、最狠的手段 - !important;

　　如果實在沒有辦法解決一些細節問題,可以用這個方法.FF對于"!important"會自動優先解析,然而IE則會忽略.如下
.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}

　　值得注意的是，一定要將xxxx !important 這句放置在另一句之上，上面已經提過



semovy 2007-09-27 14:05 發表評論
]]>Windows關機效果分析http://www.aygfsteel.com/WshmAndLily/articles/148369.htmlsemovysemovyWed, 26 Sep 2007 08:39:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/148369.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/148369.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/148369.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/148369.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/148369.html基本原理分析

Windows關機效果分析

使用Windows系統的用戶在關機的時候，出現的界面只允許用戶選擇關機、注銷或取消動作，而桌面上的程序都不能使用，并且屏幕呈現灰色狀態。

本例將仿照這種高亮顯示的效果在網頁上實現.

在網頁上運用這種關機效果有什么好處呢？首先，由于單擊某一鏈接后，將用戶此時不可用的操作隱藏在后臺，將可用的操作放在屏幕最上層，并高亮顯示，可以避免用戶的誤操作。其次，將信息高亮顯示，也可以提醒用戶應該注意的事項。

網頁中實現關機效果分析

在網頁中實現這種效果的原理很簡單。創建兩個圖層，一個為遮蓋層，覆蓋整個頁面，并且顯示為灰色；另一個圖層作為高亮顯示的部分，在遮蓋層的上方，這可通過設置圖層的z-index屬性來設置。當取消關機效果后，只需將這兩個圖層元素在頁面中刪除即可。

以下代碼實現顯示關機效果。

以下是引用片段： 
<html>

            

            <head>

            

            <title>html" class="wordstyle">asp?typeid=119" snap_preview_added="no">Ajax LightBox Sample</title>

            

            <style type="text/html" class="wordstyle">asp?typeid=38" snap_preview_added="no">CSS">

            

            #lightbox {/*該層為高亮顯示層*/

            

            BORDER-RIGHT: #fff 1px solid;

            

            BORDER-TOP: #fff 1px solid;

            

            DISPLAY: block; 

            

            Z-INDEX: 9999; /*設置該層在網頁的最上端,設置足夠大*/

            

            BACKGROUND: #fdfce9; /*設置背景色*/

            

            LEFT: 50%; 

            

            MARGIN: -220px 0px 0px -250px; 

            

            BORDER-LEFT: #fff 1px solid; 

            

            WIDTH: 500px; 

            

            BORDER-BOTTOM: #fff 1px solid; 

            

            POSITION: absolute; 

            

            TOP: 50%; 

            

            HEIGHT: 400px; 

            

            TEXT-ALIGN: left

            

            }

            

            #overlay {/*該層為覆蓋層*/

            

            DISPLAY: block;

            

            Z-INDEX: 9998; /*設置高亮層的下方*/

            

            FILTER: alpha(opacity=80); /*設置成透明*/

            

            LEFT: 0px; 

            

            WIDTH: 100%; 

            

            POSITION: absolute; 

            

            TOP: 0px; 

            

            HEIGHT: 100%; 

            

            BACKGROUND-COLOR: #000; 

            

            moz-opacity: 0.8; 

            

            opacity: .80

            

            }

            

            </style>

            

            </head>

            

            <body>

            

            <!--該層為覆蓋層 -->

            

            <div id="overlay"></div>

            

            <!--該層為高亮顯示層 -->

            

            <div id="lightbox"></div>

            

            </body>

            

            </html>


需要注意的是，在IE瀏覽器中如果有<select>標記，則該標記不能被覆蓋層覆蓋，但在其他瀏覽器中則可以覆蓋。

在使用IE瀏覽器時，要先將網頁中的<select>元素隱藏起來。如以下代碼可以用于隱藏頁面所有的<select>元素。

selects = document.getElementsByTagName('select');

以下是引用片段： 
for(i = 0; i < selects.length; i++) {

            

            selects[i].style.visibility = visibility;

            

            }
代碼實現

客戶端代碼

客戶端的頁面上有兩個鏈接，用戶單擊鏈接后，向服務器端發送請求，并將返回信息顯示到高亮層上。客戶端的網頁文件代碼如下所示：

以下是引用片段： 
<html>

            

            <head>

            

            <title>AJAX LightBox</title>

            

            <!-- 本例使用的css樣式表文件-->

            

            <LINK href="lightbox.css" type=text/css rel=stylesheet>

            

            <!--prototype類文件-->

            

            <script type="text/html" class="wordstyle">asp?typeid=36" snap_preview_added="no">html" class="wordstyle">

            

            javascript" src="js/prototype.js" ></script>

            

            <!--本例使用的html" class="wordstyle">javascript代碼-->

            

            <script type="text/html" class="wordstyle">javascript" src="lightbox.js" ></script>

            

            </head>

            

            <body>

            

            <DIV id=container>

            

            <UL>

            

            <LI><A class=lbOn href="getInfo.html" class="wordstyle">jsp?id=one">One</A> 

            

            </LI>

            

            <LI><A class=lbOn href="getInfo.html" class="wordstyle">jsp?id=two">Two</A> 

            

            </LI>

            

            </UL>

            

            </div>

            

            </body>

            

            </html>


另外，還需要設置該頁面所使用CSS樣式。lightbox.css樣式表文件代碼如下所示：

以下是引用片段： 
#lightbox {

            

            BORDER-RIGHT: #fff 1px solid;

            

            BORDER-TOP: #fff 1px solid;

            

            DISPLAY: none; 

            

            Z-INDEX: 9999; 

            

            BACKGROUND: #fdfce9; 

            

            LEFT: 50%; 

            

            MARGIN: -220px 0px 0px -250px; 

            

            BORDER-LEFT: #fff 1px solid; 

            

            WIDTH: 500px; 

            

            BORDER-BOTTOM: #fff 1px solid; 

            

            POSITION: absolute; 

            

            TOP: 50%; 

            

            HEIGHT: 400px; 

            

            TEXT-ALIGN: left

            

            }

            

            UNKNOWN {

            

            POSITION: fixed

            

            }

            

            #overlay {

            

            DISPLAY: none;

            

            Z-INDEX: 5000; FILTER: alpha(opacity=80); 

            

            LEFT: 0px; 

            

            WIDTH: 100%; 

            

            POSITION: absolute; 

            

            TOP: 0px; 

            

            HEIGHT: 100%; 

            

            BACKGROUND-COLOR: #000; moz-opacity: 0.8; opacity: .80

            

            }

            

            UNKNOWN {

            

            POSITION: fixed

            

            }

            

            .done#lightbox #lbLoadMessage {

            

            DISPLAY: none

            

            }

            

            .done#lightbox #lbContent {

            

            DISPLAY: block

            

            }

            

            .loading#lightbox #lbContent {

            

            DISPLAY: none

            

            }

            

            .loading#lightbox #lbLoadMessage {

            

            DISPLAY: block

            

            }

            

            .done#lightbox IMG {

            

            WIDTH: 100%; HEIGHT: 100%

            

            }


客戶端腳本

由于瀏覽器對圖層的支持不同，所以首先要確定客戶端瀏覽器的類型。以下代碼可用于判斷客戶端的瀏覽器和html" class="wordstyle">asp"

以下是引用片段： 
snap_preview_added="no">操作系統。

            

            var detect = navigator.userAgent.toLowerCase();

            

            var OS,browser,version,total,thestring;

            

            function getBrowserInfo() {

            

            if (checkIt('konqueror')) {

            

            browser = "Konqueror";

            

            OS = "html" class="wordstyle">asp?typeid=60" snap_preview_added="no">Linux";

            

            }

            

            else if (checkIt('safari')) browser = "Safari"

            

            else if (checkIt('omniWeb')) browser = "OmniWeb"

            

            else if (checkIt('opera')) browser = "Opera"

            

            else if (checkIt('Webtv')) browser = "WebTV";

            

            else if (checkIt('icab')) browser = "iCab"

            

            else if (checkIt('msie')) browser = "Internet Explorer"

            

            else if (!checkIt('compatible')) {

            

            browser = "Netscape Navigator"

            

            version = detect.charAt(8);

            

            }

            

            else browser = "An unknown browser";

            

            if (!version) version = detect.charAt(place + thestring.length);

            

            if(!OS) {

            

            if (checkIt('linux')) OS = "Linux";

            

            else if (checkIt('x11')) OS = "Unix";

            

            else if (checkIt('mac')) OS = "Mac"

            

            else if (checkIt('win')) OS = "Windows"

            

            else OS = "an unknown operating system";

            

            }

            

            }

            

            function checkIt(string) {

            

            place = detect.indexOf(string) + 1;

            

            thestring = string;

            

            return place;

            

            }


下面看一下網頁加載時需要添加的方法。有關網頁加載和初始化方法代碼如下： 
//網頁加載調用initialize和getBrowserInfo方法

            

            Event.observe(window, 'load', initialize, false);

            

            Event.observe(window, 'load', getBrowserInfo, false);

            

            //未加載時清空緩存

            

            Event.observe(window, 'unload', Event.unloadCache, false);

            

            //初始化方法

            

            function initialize(){

            

            //調用該方法為該頁添加覆蓋層和高亮顯示層

            

            addLightboxMarkup();

            

            //為每個可高亮顯示的元素創建lightbox對象

            

            lbox = document.getElementsByClassName('lbOn');

            

            for(i = 0; i < lbox.length; i++) {

            

            valid = new lightbox(lbox[i]);

            

            }

            

            }

            

            // 使用Dom方法創建覆蓋層和高亮層

            

            function addLightboxMarkup() {

            

            bod = document.getElementsByTagName('body')[0];

            

            overlay = document.createElement('div');

            

            overlay.id = 'overlay';

            

            lb = document.createElement('div');

            

            lb.id = 'lightbox';

            

            lb.className = 'loading';

            

            lb.innerHTML = '<div id="lbLoadMessage">' +

            

            '<p>Loading</p>' +

            

            '</div>';

            

            bod.appendChild(overlay);

            

            bod.appendChild(lb);

            

            }


封裝lightbox類

初始化數據時，為每個可高亮顯示的鏈接創建了lightbox對象。該類的代碼具體實現如下： 
var lightbox = Class.create();  

            

            lightbox.prototype = {

            

            yPos : 0,

            

            xPos : 0,

            

            //構造方法,ctrl為創建該對象的元素

            

            initialize: function(ctrl) {

            

            //將該元素的鏈接賦值給this.content

            

            this.content = ctrl.href;

            

            //為該元素添加onclick事件activate方法

            

            Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);

            

            ctrl.onclick = function(){return false;};

            

            },

            

            //當單擊鏈接時

            

            activate: function(){

            

            if (browser == 'Internet Explorer'){//判斷為IE瀏覽器

            

            this.getScroll();

            

            this.prepareIE('100%', 'hidden');

            

            this.setScroll(0,0);

            

            this.hideSelects('hidden');//隱藏所有的<select>標記

            

            }

            

            //調用該類中的displayLightbox方法

            

            this.displayLightbox("block");

            

            },

            

            prepareIE: function(height, overflow){

            

            bod = document.getElementsByTagName('body')[0];

            

            bod.style.height = height;

            

            bod.style.overflow = overflow;

            

            

            

            htm = document.getElementsByTagName('html')[0];

            

            htm.style.height = height;

            

            htm.style.overflow = overflow; 

            

            },

            

            hideSelects: function(visibility){

            

            selects = document.getElementsByTagName('select');

            

            for(i = 0; i < selects.length; i++) {

            

            selects[i].style.visibility = visibility;

            

            }

            

            },

            

            getScroll: function(){

            

            if (self.pageYOffset) {

            

            this.yPos = self.pageYOffset;

            

            } else if (document.documentElement && document.documentElement.scrollTop){

            

            this.yPos = document.documentElement.scrollTop; 

            

            } else if (document.body) {

            

            this.yPos = document.body.scrollTop;

            

            }

            

            },

            

            setScroll: function(x, y){

            

            window.scrollTo(x, y); 

            

            },

            

            displayLightbox: function(display){

            

            //將覆蓋層顯示

            

            $('overlay').style.display = display;

            

            //將高亮層顯示

            

            $('lightbox').style.display = display;

            

            //如果不是隱藏狀態,則調用該類中的loadInfo方法

            

            if(display != 'none') this.loadInfo();

            

            },

            

            //該方法發送Ajax請求

            

            loadInf function() {

            

            //當請求完成后調用本類中processInfo方法

            

            var myAjax = new Ajax.Request(

            

            this.content,

            

            {method: 'get', parameters: "", onComplete: this.processInfo.bindAsEvent Listener (this)}

            

            );

            

            },

            

            // 將返回的文本信息顯示到高亮層上

            

            processInf function(response){

            

            //獲得返回的文本數據

            

            var result = response.responseText;

            

            //顯示到高亮層

            

            info = "<div id='lbContent'>" + result + "</div>";

            

            //在info元素前插入一個元素

            

            new Insertion.Before($('lbLoadMessage'), info)

            

            //改變該元素的class name的值

            

            $('lightbox').className = "done"; 

            

            //調用本類中actions方法

            

            this.actions();

            

            var ctrl=$('lightbox');

            

            //為高亮層添加事件處理方法reset

            

            Event.observe(ctrl, 'click', this.reset.bindAsEventListener(this), false);

            

            ctrl.onclick = function(){return false;};

            

            },

            

            //恢復初始狀態 

            

            reset:function(){

            

            //隱藏覆蓋層

            

            $('overlay').style.display="none";

            

            //清空返回數據

            

            $('lbContent').innerHTML="";

            

            //隱藏高亮層

            

            $('lightbox').style.display="none";

            

            },

            

            // Search through new links within the lightbox, and attach click event

            

            actions: function(){

            

            lbActions = document.getElementsByClassName('lbAction');

            

            for(i = 0; i < lbActions.length; i++) {

            

            Event.observe(lbActions[i], 'click', 

            

            this[lbActions[i].rel].bindAs EventListener(this), false);

            

            lbActions[i].onclick = function(){return false;};

            

            }

            

            }

            

            }


提示：由于該對象比較復雜，讀者可以仔細參閱代碼的注釋部分。

服務器端代碼

服務器端首先獲得查詢中的“id”值，如果該值為null或為空，則設置為默認值。然后判斷該值，并且返回相應的一段字符串信息。處理請求的getInfohtml" class="wordstyle">jsp頁面代碼如下：

以下是引用片段： 
<%@ page language="java" import="java.util.*"%>

            

            <%

            

            //獲得請求中id的值

            

            String imgID = request.getParameter("id");

            

            if (imgID==null||imgID.equals(""))//如果為null或為空

            

            imgID="one";//設定為默認值

            

            if ( imgID.equals("one"))//如果為one

            

            {

            

            %>

            

            <h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Porsche Carrera GT</h3>

            

            <p>The Carrera GT has a 5.7 litre V10 internal combustion engine that produces 

            

            605 SAE horsepower (451 kW). Porsche claims it will accelerate from 0 to 100 

            

            km/h (62 mph) in 3.9 seconds and has a maximum speed of 330 km/h (204 mph). 

            

            With 605 hp, the car weighs 1,380 kg (3,042 lb). The Carrera GT is only 

            

            offered with a six-speed manual transmission, in contrast to its rival the 

            

            Ferrari Enzo that is only offered with sequential manual transmission. Also 

            

            the Carrera GT is significantly less expensive than the Ferrari Enzo. The 

            

            Ferrari Enzo is priced around $660,000 to the Carrera GT's $440,000. The 

            

            Carrera GT is known for its high quality and reliability which makes it one of 

            

            the best supercars ever.

            

            <%}else{//否則

            

            %>

            

            <h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Ferrari Testarossa</h3>

            

            <p>The Ferrari Testarossa is an V12 mid-engined sports car made by Ferrari. 

            

            The name, which means &quot;red head&quot;, comes from the red painted cylinder heads on 

            

            the flat-12 engine. The engine was technically a 180?V engine since it shared 

            

            flat-plane crankshaft pins with opposing cylinders. Output was 390 hp (291 

            

            kW), and the car won many comparison tests and admirers - it was featured on 

            

            the cover of Road &amp; Track magazine nine times in just five years. Almost 

            

            10,000 Testarossas, 512TRs, and 512Ms were produced, making this one of the 

            

            most common Ferrari models despite its high price and exotic design.

            

            <%}%>

            

            html" class="wordstyle">aspx" snap_preview_added="spa" snap_icon_added="spa" act_suffix ic

【責任編輯：城塵 TEL：(010) 68476636-8003】


semovy 2007-09-26 16:39 發表評論
]]>分頁連接式樣http://www.aygfsteel.com/WshmAndLily/articles/146344.htmlsemovysemovyWed, 19 Sep 2007 01:37:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/146344.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/146344.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/146344.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/146344.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/146344.html<html>
<head>
<style>
A {
 COLOR: #000080; TEXT-DECORATION: none
}
A:hover {
 TEXT-DECORATION: underline
}
.p_bar {
 CLEAR: both; MARGIN: 1px 0px
}
.p_bar A {
 PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; TEXT-

DECORATION: none
}
.p_total {
 BORDER-RIGHT: #666688 0px solid; BORDER-TOP: #666688 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #666688 1px solid;

BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #f2f3f7
}
.p_pages {
 BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; FONT-WEIGHT: bold; VERTICAL-ALIGN: middle; BORDER-

LEFT: #666688 1px solid; MARGIN-RIGHT: 1px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #f2f3f7
}
.p_num {
 BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; VERTICAL-ALIGN: middle; BORDER-LEFT: #666688 1px

solid; MARGIN-RIGHT: 1px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #ffffff
}
A.p_num:hover {
 BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; BORDER-LEFT: #666688 1px solid; BORDER-BOTTOM:

#666688 1px solid; BACKGROUND-COLOR: #f2f3f7; TEXT-DECORATION: none
}
.p_redirect {
 BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; FONT-SIZE: 13px; BORDER-LEFT: #666688 1px solid;

MARGIN-RIGHT: 1px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #ffffff
}
A.p_redirect:hover {
 BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; BORDER-LEFT: #666688 1px solid; BORDER-BOTTOM:

#666688 1px solid; BACKGROUND-COLOR: #f2f3f7; TEXT-DECORATION: none
}
.p_curpage {
 BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; FONT-WEIGHT: bold; VERTICAL-ALIGN: middle; BORDER-

LEFT: #666688 1px solid; COLOR: #666677; MARGIN-RIGHT: 1px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #dddde4
}
</style>
</head>
<body>
<div class="p_bar">
<a class="p_total">&nbsp;270&nbsp;</a><a class="p_pages">&nbsp;1/9&nbsp;</a><a class="p_curpage">1</a><a href="thread-

2486328-2-1.html" class="p_num">2</a><a href="thread-2486328-3-1.html" class="p_num">3</a><a href="thread-2486328-4-1.html"

class="p_num">4</a><a href="thread-2486328-5-1.html" class="p_num">5</a><a href="thread-2486328-6-1.html"

class="p_num">6</a><a href="thread-2486328-7-1.html" class="p_num">7</a><a href="thread-2486328-8-1.html"

class="p_num">8</a><a href="thread-2486328-9-1.html" class="p_num">9</a><a href="thread-2486328-2-1.html"

class="p_redirect">&rsaquo;&rsaquo;</a>
</div>
</body>
</html>



semovy 2007-09-19 09:37 發表評論
]]>css & xmlhttp://www.aygfsteel.com/WshmAndLily/articles/144127.htmlsemovysemovyMon, 10 Sep 2007 16:32:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/144127.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/144127.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/144127.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/144127.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/144127.html嚴格的(Strict):要求嚴格的DTD，你不能使用任何表現層的標識和屬性，例如
。完整代碼如下： 框架的(Frameset):專門針對框架頁面設計使用的DTD，如果你的頁面中包含有框架，需要采用這種DTD。完整代碼如下： body { background-color: #999999; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif; } div#outer { width: 80%; background-color:#FFFFFF; margin-top: 50px; margin-bottom: 50px; margin-left: auto; margin-right: auto; padding: 0px; border: thin solid #000000; } div#header { padding: 15px; margin: 0px; text-align: center; } div#nav { width: 25%; padding: 10px; margin-top: 1px; float: left; } div#main { margin-left: 30%; margin-top: 1px; padding: 10px; } div#footer { padding: 15px; margin: 0px; border-top: thin solid #000000; } 示例：http://meadhra.com/CNET/040804/figure-b.html div#outer是其中的一種樣式，它是這一技術的關鍵。這就是前面提到過的以div取代表格的樣式，它創建了居中的盒子，而這個盒子成了包容該頁面所有內容的容器。將寬度設置為80%的規則設定了該div的寬度，就跟表格標簽的相應屬性規定該表格的寬度一樣。與此相類似，background-color:#FFFFFF為div建立了一個白色的背景，就如同表格中bgcolor="#FFFFFF"屬性為表格設置白色背景一樣。margin-top: 50px and margin-bottom: 50px則用頂端和底端的空白來取代表格中用來造成垂直空間的空白段落。 這一技術的關鍵在于，外部div的中心要安排合適。這里存在一個難題，可以說是我們面臨的一個挑戰，即div沒有像align="center"這樣一個屬性，這與表格不同，表格中有這樣一種屬性。你可以在div的母元素（在本案例，指< body >標簽）中使用text-align: center來將外部div置于中心位置。盡管除了正文以外，大多數瀏覽器還會為一些諸如div的塊元素使用該隊列，但是我們有證據可以證明它是對排列正文這一屬性的誤用，而且它會使問題復雜化，就如同你創建一些額外的樣式來使那些已按正常標準對齊的文字重新回到左邊一樣。 用CSS來將塊元素置于中心位置的正確方法是這樣設置：margin-left: auto，margin-right: auto。這就指示瀏覽器自動計算頁面兩邊合適的空白寬度，從而將div置于中心。border: thin solid #000000這一規則在外部div的周圍添加了一個邊界，這是因為用CSS添加很容易，而如果用表格的話就很難了。CSS編碼中的其它部份則規定了div的頁眉，頁腳，nav，以及主要內容。 div#header和div#footer則設定了那些div的頁邊空白以及填料。此外，div#header包含了text-align: center這一規則，它可以將頁眉文本置于中心位置，div#footer則包含了border-top: thin solid #000000這一規則，它可以創建一個圍繞該div的頂端邊緣的邊界，而在基于表格的版面設計中，與它相對應的則是位于頁腳上方的一些水平線。 在這個居中的盒子的中央，div#nav和div#main建立了兩個縱列。在div#nav樣式中，float: left這一規則將div推到它的母元素（外部div）的左邊，而width: 25%這一規則將該div的寬度設置為它的母元素的25%。由于該nav div被移到了左端，其寬度也被限定了，這就為主要的div留下了活動空間，讓它可以移到該nav div的右邊，這樣就取得了兩個縱列的效果。div#main樣式包含了左邊頁面空白30%的規則，以讓主要文本排列在一個整齊的縱欄中，而不是分散開來，甚至散到該nav縱欄外面。主要的div左邊的空白頁面比nav div中左邊空白頁面的寬度稍稍大一點


semovy 2007-09-11 00:32 發表評論
]]>為圖片添加圓角與3D陰影http://www.aygfsteel.com/WshmAndLily/articles/142148.htmlsemovysemovySun, 02 Sep 2007 14:37:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/142148.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/142148.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/142148.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/142148.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/142148.html為圖片添加圓角與3D陰影

semovy 2007-09-02 22:37 發表評論
]]>三種簡潔的Tab導航簡析http://www.aygfsteel.com/WshmAndLily/articles/141930.htmlsemovysemovySat, 01 Sep 2007 06:56:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/141930.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/141930.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/141930.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/141930.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/141930.html <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>簡潔Tab</title>
<style type="text/css">
<!--
body,div,ul,li{
 margin:0 auto;
 padding:0;
}
body{
 font:12px "宋體";
 text-align:center;
}
a:link{
 color:#00F;
 text-decoration:none;
}
a:visited {
 color: #00F;
 text-decoration:none;
}
a:hover {
 color: #c00;
 text-decoration:underline;
}
ul{
 list-style:none;
}
.main{
 clear:both;
 padding:8px;
 text-align:center;
}
/*第一種形式*/
#tabs0 {
 height: 200px;
 width: 400px;
 border: 1px solid #cbcbcb;
 background-color: #f2f6fb;
}
.menu0{
 width: 400px;
}
.menu0 li{
 display:block;
 float: left;
 padding: 4px 0;
 width:100px;
 text-align: center;
 cursor:pointer;
 background: #FFFFff;
}
.menu0 li.hover{
 background: #f2f6fb;
}
#main0 ul{
 display: none;
}
#main0 ul.block{
 display: block;
}
/*第二種形式*/
#tabs1{
 text-align:left;
 width:400px;
}
.menu1box{
 position:relative;
 overflow:hidden;
 height:22px;
 width:400px;
 text-align:left;
}
#menu1{
 position:absolute;
 top:0;
 left:0;
 z-index:1;
}
#menu1 li{
 float:left;
 display:block;
 cursor:pointer;
 width:72px;
 text-align:center;
 line-height:21px;
 height:21px;
}
#menu1 li.hover{
 background:#fff;
 border-left:1px solid #333;
 border-top:1px solid #333;
 border-right:1px solid #333;
}
.main1box{
 clear:both;
 margin-top:-1px;
 border:1px solid #333;
 height:181px;
 width:400px;
}
#main1 ul{
 display: none;
}
#main1 ul.block{
 display: block;
}
/*第三種形式*/
.menu2box{
 position:relative;
 overflow:hidden;
 height:22px;
 width:400px;
 text-align:left;
 background: #FFFFff;
}
#tabs2 {
 height: 200px;
 width: 400px;
 border: 1px solid #cbcbcb;
 background-color: #f2f6fb;
}
#tip2{
 position:absolute;
 top:0;
 left:0;
 height:22px;
 line-height:22px;
 z-index:0;
 width:100px;
 background: #f2f6fb;
}
#menu2{
 position:absolute;
 top:0;
 left:0;
 z-index:1;
}
#menu2 li{
 display:block;
 float: left;
 padding: 4px 0;
 width:100px;
 text-align: center;
 cursor:pointer;
}
-->
</style>
<script>
<!--
/*第一種形式 第二種形式 更換顯示樣式*/
function setTab(m,n){
 var tli=document.getElementById("menu"+m).getElementsByTagName("li");
 var mli=document.getElementById("main"+m).getElementsByTagName("ul");
 for(i=0;i<tli.length;i++){
  tli[i].className=i==n?"hover":"";
  mli[i].style.display=i==n?"block":"none";
 }
}
/*第三種形式 利用一個背景層定位*/
var m3={0:"",1:"評論內容",2:"技術內容",3:"點評內容"}
function nowtab(m,n){
 if(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
 document.getElementById("tip"+m).style.left=n*100+'px';
 document.getElementById("main2").innerHTML=m3[n];
}
//-->
</script>
</head>
<body>
<br />
<br />
<!--第一種形式-->
<div id="tabs0">
 <ul class="menu0" id="menu0">
  <li onclick="setTab(0,0)" class="hover">新聞</li>
  <li onclick="setTab(0,1)">評論</li>
  <li onclick="setTab(0,2)">技術</li>
  <li onclick="setTab(0,3)">點評</li>
 </ul>
 <div class="main" id="main0">
  <ul class="block"><li>新聞列表</li></ul>
  <ul><li>評論列表</li></ul>
  <ul><li>技術列表</li></ul>
  <ul><li>點評列表</li></ul>
 </div>
</div>
<br />
<br />
<!--第二種形式-->
<div id="tabs1">
 <div class="menu1box">
  <ul id="menu1">
   <li class="hover" onmouseover="setTab(1,0)"><a href="#">新聞</a></li>
   <li onmouseover="setTab(1,1)"><a href="#">評論</a></li>
   <li onmouseover="setTab(1,2)"><a href="#">技術</a></li>
   <li onmouseover="setTab(1,3)"><a href="#">點評</a></li>
  </ul>
 </div>
 <div class="main1box">
  <div class="main" id="main1">
   <ul class="block"><li>新聞列表</li></ul>
   <ul><li>評論列表</li></ul>
   <ul><li>技術列表</li></ul>
   <ul><li>點評列表</li></ul>
  </div>
 </div>
</div>
<br />
<br />
<!--第三種形式-->
<div id="tabs2">
 <div class="menu2box">
  <div id="tip2"></div>
  <ul id="menu2">
   <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新聞</a></li>
   <li onmouseover="nowtab(2,1)"><a href="#">評論</a></li>
   <li onmouseover="nowtab(2,2)"><a href="#">技術</a></li>
   <li onmouseover="nowtab(2,3)"><a href="#">點評</a></li>
  </ul>
 </div>
  <div class="main" id="main2">
新聞內容
 </div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>


semovy 2007-09-01 14:56 發表評論
]]>網頁文字顏色的搭配技巧http://www.aygfsteel.com/WshmAndLily/articles/141922.htmlsemovysemovySat, 01 Sep 2007 06:28:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/141922.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/141922.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/141922.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/141922.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/141922.html對于做網頁的初學者可能更習慣于使用一些漂亮的圖片作為自己網頁的背景，但是，瀏覽一下大型的商業網站，你會發現他們更多運用的是白色、藍色、黃色等，使得網頁顯得典雅，大方和溫馨。更重要的是，這樣可以大大加快瀏覽者打開網頁的速度。

一般來說，網頁的背景色應該柔和一些、素一些、淡一些，再配上深色的文字，使人看起來自然、舒暢。而為了追求醒目的視覺效果，可以為標題使用較深的顏色。下面是我做網頁和瀏覽別人的網頁時，對網頁背景色和文字色彩搭配積累的經驗，這些顏色可以做正文的底色，也可以做標題的底色，再搭配不同的字體，一定會有不錯的效果，希望對大家在制作網頁時有用。

 BgcolorΚ″＃F1FAFA″———做正文的背景色好，淡雅

 BgcolorΚ″＃E8FFE8″———做標題的背景色較好

 BgcolorΚ″＃E8E8FF″———做正文的背景色較好，文字顏色配黑色

 BgcolorΚ″＃8080C0″———上配黃色白色文字較好

 BgcolorΚ″＃E8D098″———上配淺藍色或藍色文字較好

 BgcolorΚ″＃EFEFDA″———上配淺藍色或紅色文字較好

 BgcolorΚ″＃F2F1D7″———配黑色文字素雅，如果是紅色則顯得醒目

 BgcolorΚ″＃336699″———配白色文字好看些

 BgcolorΚ″＃6699CC″———配白色文字好看些，可以做標題

 BgcolorΚ″＃66CCCC″———配白色文字好看些，可以做標題

 BgcolorΚ″＃B45B3E″———配白色文字好看些，可以做標題

 BgcolorΚ″＃479AC7″———配白色文字好看些，可以做標題

 BgcolorΚ″＃00B271″———配白色文字好看些，可以做標題

 BgcolorΚ″＃FBFBEA″———配黑色文字比較好看，一般作為正文

 BgcolorΚ″＃D5F3F4″———配黑色文字比較好看，一般作為正文

 BgcolorΚ″＃D7FFF0″———配黑色文字比較好看，一般作為正文

 BgcolorΚ″＃F0DAD2″———配黑色文字比較好看，一般作為正文

 BgcolorΚ″＃DDF3FF″———配黑色文字比較好看，一般作為正文

淺綠色底配黑色文字，或白色底配藍色文字都很醒目，但前者突出背景，后者突出文字。紅色底配白色文字，比較深的底色配黃色文字顯得非常有效果。

此文只是起一個“拋磚引玉”的作用，大家可以發揮想象力，搭配出更有新意、更醒目的顏色，使網頁更具有吸引力。



semovy 2007-09-01 14:28 發表評論
]]>contentType一些值http://www.aygfsteel.com/WshmAndLily/articles/91499.htmlsemovysemovyWed, 03 Jan 2007 02:59:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/91499.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/91499.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/91499.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/91499.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/91499.htmlstring extension;
extension = extension.ToUpper();
string contentType;

if(extension == "*")
?contentType = "application/octet-stream";
else if(extension == "323")
?contentType = "text/h323";
else if(extension == "ACX")
?contentType = "application/internet-property-stream";
else if(extension == "AI")
?contentType = "application/postscript";
else if(extension == "AIF")
?contentType = "audio/x-aiff";
else if(extension == "AIFC")
?contentType = "audio/x-aiff";
else if(extension == "AIFF")
?contentType = "audio/x-aiff";
else if(extension == "ASF")
?contentType = "video/x-ms-asf";
else if(extension == "SR")
?contentType = "video/x-ms-asf";
else if(extension == "SX")
?contentType = "video/x-ms-asf";
else if(extension == "AU")
?contentType = "audio/basic";
else if(extension == "AVI")
?contentType = "video/x-msvideo";
else if(extension == "AXS")
?contentType = "application/olescript";
else if(extension == "BAS")
?contentType = "text/plain";
else if(extension == "BCPIO")
?contentType = "application/x-bcpio";
else if(extension == "BIN")
?contentType = "application/octet-stream";
else if(extension == "BMP")
?contentType = "image/bmp";
else if(extension == "C")
?contentType = "text/plain";
else if(extension == "CAT")
?contentType = "application/vnd.ms-pkiseccat";
else if(extension == "CDF")
?contentType = "application/x-cdf";
else if(extension == "CER")
?contentType = "application/x-x509-ca-cert";
else if(extension == "CLASS")
?contentType = "application/octet-stream";
else if(extension == "CLP")
?contentType = "application/x-msclip";
else if(extension == "CMX")
?contentType = "image/x-cmx";
else if(extension == "COD")
?contentType = "image/cis-cod";
else if(extension == "CPIO")
?contentType = "application/x-cpio";
else if(extension == "CRD")
?contentType = "application/x-mscardfile";
else if(extension == "CRL")
?contentType = "application/pkix-crl";
else if(extension == "CRT")
?contentType = "application/x-x509-ca-cert";
else if(extension == "CSH")
?contentType = "application/x-csh";
else if(extension == "CSS")
?contentType = "text/css";
else if(extension == "DCR")
?contentType = "application/x-director";
else if(extension == "DER")
?contentType = "application/x-x509-ca-cert";
else if(extension == "DIR")
?contentType = "application/x-director";
else if(extension == "DLL")
?contentType = "application/x-msdownload";
else if(extension == "DMS")
?contentType = "application/octet-stream";
else if(extension == "DOC")
?contentType = "application/msword";
else if(extension == "DOT")
?contentType = "application/msword";
else if(extension == "DVI")
?contentType = "application/x-dvi";
else if(extension == "DXR")
?contentType = "application/x-director";
else if(extension == "EPS")
?contentType = "application/postscript";
else if(extension == "ETX")
?contentType = "text/x-setext";
else if(extension == "EVY")
?contentType = "application/envoy";
else if(extension == "EXE")
?contentType = "application/octet-stream";
else if(extension == "FIF")
?contentType = "application/fractals";
else if(extension == "FLR")
?contentType = "x-world/x-vrml";
else if(extension == "GIF")
?contentType = "image/gif";
else if(extension == "GTAR")
?contentType = "application/x-gtar";
else if(extension == "GZ")
?contentType = "application/x-gzip";
else if(extension == "H")
?contentType = "text/plain";
else if(extension == "HDF")
?contentType = "application/x-hdf";
else if(extension == "HLP")
?contentType = "application/winhlp";
else if(extension == "HQX")
?contentType = "application/mac-binhex40";
else if(extension == "HTA")
?contentType = "application/hta";
else if(extension == "HTC")
?contentType = "text/x-component";
else if(extension == "HTM")
?contentType = "text/html";
else if(extension == "HTML")
?contentType = "text/html";
else if(extension == "HTT")
?contentType = "text/webviewhtml";
else if(extension == "ICO")
?contentType = "image/x-icon";
else if(extension == "IEF")
?contentType = "image/ief";
else if(extension == "III")
?contentType = "application/x-iphone";
else if(extension == "INS")
?contentType = "application/x-internet-signup";
else if(extension == "ISP")
?contentType = "application/x-internet-signup";
else if(extension == "JFIF")
?contentType = "image/pipeg";
else if(extension == "JPE")
?contentType = "image/jpeg";
else if(extension == "JPEG")
?contentType = "image/jpeg";



semovy 2007-01-03 10:59 發表評論
]]>讓表格一行中的文字過多時自動變成省略號http://www.aygfsteel.com/WshmAndLily/articles/80387.htmlsemovysemovyFri, 10 Nov 2006 06:26:00 GMThttp://www.aygfsteel.com/WshmAndLily/articles/80387.htmlhttp://www.aygfsteel.com/WshmAndLily/comments/80387.htmlhttp://www.aygfsteel.com/WshmAndLily/articles/80387.html#Feedback0http://www.aygfsteel.com/WshmAndLily/comments/commentRss/80387.htmlhttp://www.aygfsteel.com/WshmAndLily/services/trackbacks/80387.html#DIV1{width:200px;height:90px;background-color:#87CEEB;padding:8px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap; }
</style>
<center><div id=DIV1>讓表格一行中的文字過多時自動變成省略號讓表格一行中的文字過多時自動變成省略號</div>

如內容超出單元格，則隱藏
style="TABLE-LAYOUT: fixed"

semovy 2006-11-10 14:26 發表評論
]]> 主站蜘蛛池模板： 铜梁县| 年辖：市辖区| 通榆县| 德令哈市| 达孜县| 固安县| 神农架林区| 奉化市| 蒙自县| 姚安县| 四川省| 县级市| 宾阳县| 合作市| 余姚市| 白城市| 华亭县| 永福县| 吉安市| 云龙县| 稷山县| 浏阳市| 嵩明县| 崇礼县| 浙江省| 陆河县| 乳源| 安泽县| 岑溪市| 昂仁县| 湟源县| 双辽市| 公主岭市| 华蓥市| 云安县| 福州市| 交城县| 新和县| 万盛区| 永春县| 新乐市|