BlogJava-semovy-文章分类-CSS式样http://www.blogjava.net/WshmAndLily/category/10987.htmlzh-cnFri, 17 Jun 2011 22:14:30 GMTFri, 17 Jun 2011 22:14:30 GMT60兼容IE8、火狐的本地图片预览+等比例缩放http://www.blogjava.net/WshmAndLily/articles/352454.htmlsemovysemovyThu, 16 Jun 2011 10:13:00 GMThttp://www.blogjava.net/WshmAndLily/articles/352454.htmlhttp://www.blogjava.net/WshmAndLily/comments/352454.htmlhttp://www.blogjava.net/WshmAndLily/articles/352454.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/352454.htmlhttp://www.blogjava.net/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.blogjava.net/WshmAndLily/articles/230903.htmlsemovysemovyWed, 24 Sep 2008 07:43:00 GMThttp://www.blogjava.net/WshmAndLily/articles/230903.htmlhttp://www.blogjava.net/WshmAndLily/comments/230903.htmlhttp://www.blogjava.net/WshmAndLily/articles/230903.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/230903.htmlhttp://www.blogjava.net/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.blogjava.net/WshmAndLily/articles/193449.htmlsemovysemovyWed, 16 Apr 2008 07:05:00 GMThttp://www.blogjava.net/WshmAndLily/articles/193449.htmlhttp://www.blogjava.net/WshmAndLily/comments/193449.htmlhttp://www.blogjava.net/WshmAndLily/articles/193449.html#Feedback1http://www.blogjava.net/WshmAndLily/comments/commentRss/193449.htmlhttp://www.blogjava.net/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.blogjava.net/WshmAndLily/articles/189465.htmlsemovysemovySat, 29 Mar 2008 07:26:00 GMThttp://www.blogjava.net/WshmAndLily/articles/189465.htmlhttp://www.blogjava.net/WshmAndLily/comments/189465.htmlhttp://www.blogjava.net/WshmAndLily/articles/189465.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/189465.htmlhttp://www.blogjava.net/WshmAndLily/services/trackbacks/189465.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://teckotooling.vicp.net/teckotooling/css/niftyCorners.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.blogjava.net/WshmAndLily/articles/163405.htmlsemovysemovyTue, 27 Nov 2007 03:15:00 GMThttp://www.blogjava.net/WshmAndLily/articles/163405.htmlhttp://www.blogjava.net/WshmAndLily/comments/163405.htmlhttp://www.blogjava.net/WshmAndLily/articles/163405.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/163405.htmlhttp://www.blogjava.net/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.blogjava.net/WshmAndLily/articles/163194.htmlsemovysemovyMon, 26 Nov 2007 08:29:00 GMThttp://www.blogjava.net/WshmAndLily/articles/163194.htmlhttp://www.blogjava.net/WshmAndLily/comments/163194.htmlhttp://www.blogjava.net/WshmAndLily/articles/163194.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/163194.htmlhttp://www.blogjava.net/WshmAndLily/services/trackbacks/163194.html' target=_blank href_cetemp='http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'>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.blogjava.net/WshmAndLily/articles/161035.htmlsemovysemovyFri, 16 Nov 2007 07:53:00 GMThttp://www.blogjava.net/WshmAndLily/articles/161035.htmlhttp://www.blogjava.net/WshmAndLily/comments/161035.htmlhttp://www.blogjava.net/WshmAndLily/articles/161035.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/161035.htmlhttp://www.blogjava.net/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.blogjava.net/WshmAndLily/articles/153597.htmlsemovysemovyWed, 17 Oct 2007 08:02:00 GMThttp://www.blogjava.net/WshmAndLily/articles/153597.htmlhttp://www.blogjava.net/WshmAndLily/comments/153597.htmlhttp://www.blogjava.net/WshmAndLily/articles/153597.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/153597.htmlhttp://www.blogjava.net/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.blogjava.net/WshmAndLily/articles/153173.htmlsemovysemovyTue, 16 Oct 2007 02:26:00 GMThttp://www.blogjava.net/WshmAndLily/articles/153173.htmlhttp://www.blogjava.net/WshmAndLily/comments/153173.htmlhttp://www.blogjava.net/WshmAndLily/articles/153173.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/153173.htmlhttp://www.blogjava.net/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.blogjava.net/WshmAndLily/articles/153172.htmlsemovysemovyTue, 16 Oct 2007 02:25:00 GMThttp://www.blogjava.net/WshmAndLily/articles/153172.htmlhttp://www.blogjava.net/WshmAndLily/comments/153172.htmlhttp://www.blogjava.net/WshmAndLily/articles/153172.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/153172.htmlhttp://www.blogjava.net/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.blogjava.net/WshmAndLily/articles/148803.htmlsemovysemovyThu, 27 Sep 2007 09:41:00 GMThttp://www.blogjava.net/WshmAndLily/articles/148803.htmlhttp://www.blogjava.net/WshmAndLily/comments/148803.htmlhttp://www.blogjava.net/WshmAndLily/articles/148803.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/148803.htmlhttp://www.blogjava.net/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.blogjava.net/WshmAndLily/articles/148699.htmlsemovysemovyThu, 27 Sep 2007 06:27:00 GMThttp://www.blogjava.net/WshmAndLily/articles/148699.htmlhttp://www.blogjava.net/WshmAndLily/comments/148699.htmlhttp://www.blogjava.net/WshmAndLily/articles/148699.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/148699.htmlhttp://www.blogjava.net/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.blogjava.net/WshmAndLily/articles/148683.htmlsemovysemovyThu, 27 Sep 2007 06:05:00 GMThttp://www.blogjava.net/WshmAndLily/articles/148683.htmlhttp://www.blogjava.net/WshmAndLily/comments/148683.htmlhttp://www.blogjava.net/WshmAndLily/articles/148683.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/148683.htmlhttp://www.blogjava.net/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.blogjava.net/WshmAndLily/articles/148369.htmlsemovysemovyWed, 26 Sep 2007 08:39:00 GMThttp://www.blogjava.net/WshmAndLily/articles/148369.htmlhttp://www.blogjava.net/WshmAndLily/comments/148369.htmlhttp://www.blogjava.net/WshmAndLily/articles/148369.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/148369.htmlhttp://www.blogjava.net/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.blogjava.net/WshmAndLily/articles/146344.htmlsemovysemovyWed, 19 Sep 2007 01:37:00 GMThttp://www.blogjava.net/WshmAndLily/articles/146344.htmlhttp://www.blogjava.net/WshmAndLily/comments/146344.htmlhttp://www.blogjava.net/WshmAndLily/articles/146344.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/146344.htmlhttp://www.blogjava.net/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.blogjava.net/WshmAndLily/articles/144127.htmlsemovysemovyMon, 10 Sep 2007 16:32:00 GMThttp://www.blogjava.net/WshmAndLily/articles/144127.htmlhttp://www.blogjava.net/WshmAndLily/comments/144127.htmlhttp://www.blogjava.net/WshmAndLily/articles/144127.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/144127.htmlhttp://www.blogjava.net/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.blogjava.net/WshmAndLily/articles/142148.htmlsemovysemovySun, 02 Sep 2007 14:37:00 GMThttp://www.blogjava.net/WshmAndLily/articles/142148.htmlhttp://www.blogjava.net/WshmAndLily/comments/142148.htmlhttp://www.blogjava.net/WshmAndLily/articles/142148.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/142148.htmlhttp://www.blogjava.net/WshmAndLily/services/trackbacks/142148.html为图片添加圆角与3D阴影

semovy 2007-09-02 22:37 发表评论
]]>三种简洁的Tab导航简析http://www.blogjava.net/WshmAndLily/articles/141930.htmlsemovysemovySat, 01 Sep 2007 06:56:00 GMThttp://www.blogjava.net/WshmAndLily/articles/141930.htmlhttp://www.blogjava.net/WshmAndLily/comments/141930.htmlhttp://www.blogjava.net/WshmAndLily/articles/141930.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/141930.htmlhttp://www.blogjava.net/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.blogjava.net/WshmAndLily/articles/141922.htmlsemovysemovySat, 01 Sep 2007 06:28:00 GMThttp://www.blogjava.net/WshmAndLily/articles/141922.htmlhttp://www.blogjava.net/WshmAndLily/comments/141922.htmlhttp://www.blogjava.net/WshmAndLily/articles/141922.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/141922.htmlhttp://www.blogjava.net/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.blogjava.net/WshmAndLily/articles/91499.htmlsemovysemovyWed, 03 Jan 2007 02:59:00 GMThttp://www.blogjava.net/WshmAndLily/articles/91499.htmlhttp://www.blogjava.net/WshmAndLily/comments/91499.htmlhttp://www.blogjava.net/WshmAndLily/articles/91499.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/91499.htmlhttp://www.blogjava.net/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.blogjava.net/WshmAndLily/articles/80387.htmlsemovysemovyFri, 10 Nov 2006 06:26:00 GMThttp://www.blogjava.net/WshmAndLily/articles/80387.htmlhttp://www.blogjava.net/WshmAndLily/comments/80387.htmlhttp://www.blogjava.net/WshmAndLily/articles/80387.html#Feedback0http://www.blogjava.net/WshmAndLily/comments/commentRss/80387.htmlhttp://www.blogjava.net/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 发表评论
]]>