变换的立体感表格

稿源：互联网 2022-05-08 07:30:15 点击： 1043 撤稿纠错

变化的立体感表格效果，把鼠标移动到友情链接上面就看到效果了。

以下讨论的是和立体特效相关的变换的立体感表格教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

脚本说明:
把如下代码加入<body>区域中
<style>

.english {
	FONT-SIZE: 11px; FONT-FAMILY: "Arial", "Helvetica", "sans-serif"
}
.tenpt {
	FONT-SIZE: 14px
}
.editbox1 {
	BORDER-RIGHT: #665b8e 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #665b8e 1px solid; PADDING-LEFT: 1px; FONT-SIZE: 12px; PADDING-BOTTOM: 1px; BORDER-LEFT: #665b8e 1px solid; CURSOR: text; COLOR: #333333; PADDING-TOP: 1px; BORDER-BOTTOM: #665b8e 1px solid; FONT-FAMILY: "Arial"; HEIGHT: 20px
}
.editbox2 {
	BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 12px; BORDER-BOTTOM-WIDTH: 1px; CURSOR: text; COLOR: #333333; FONT-FAMILY: "Arial"; BORDER-RIGHT-WIDTH: 1px
}
.editbox3 {
	BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 12px; BORDER-BOTTOM-WIDTH: 1px; CURSOR: text; COLOR: #333333; FONT-FAMILY: "宋体"; BORDER-RIGHT-WIDTH: 1px
}
.editbox4 {
	BORDER-RIGHT: 0px; PADDING-RIGHT: 1px; BORDER-TOP: 0px; PADDING-LEFT: 1px; FONT-SIZE: 9pt; BACKGROUND: #e3e3e3; PADDING-BOTTOM: 1px; BORDER-LEFT: 0px; CURSOR: text; COLOR: #333333; PADDING-TOP: 1px; BORDER-BOTTOM: #333333 1px solid; FONT-FAMILY: "Arial"; HEIGHT: 20px
}
.editbox5 {
	BORDER-TOP-WIDTH: 1px; BORDER-RIGHT: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 12px; BORDER-BOTTOM-WIDTH: 1px; CURSOR: text; COLOR: #333333; FONT-FAMILY: "Arial"; HEIGHT: 20px
}
.button1 {
	BORDER-RIGHT: #665b8e 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 1px; FONT-SIZE: 12px; BACKGROUND: #cccccc; PADDING-BOTTOM: 1px; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #333333; PADDING-TOP: 1px; BORDER-BOTTOM: #665b8e 1px solid; FONT-FAMILY: "宋体"; HEIGHT: 20px
}
.table1 {
	BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
}
</style>

<SCRIPT language=JavaScript>
//--Global declaration

var blnBorder = false;

function setBorder(id,bOn)
{
	var oTab    = document.all.item(id+"Tab");
	var oTitle   = document.all.item(id+"Title");
	var oBorder = document.all.item(id+"Content");

if (!oTab || !oTitle || !oBorder) 
		return;

if (bOn)
	{
		oBorder.style.borderColor = "#999999";
		oTab.bgColor = "#999999";
		oTitle.color  = "#FFFFFF";
	}
	else
	{
		oBorder.style.borderColor = blnBorder? "#999999" : "#FFFFFF";
		oTab.bgColor = "#EEEEEE";
		oTitle.color  = "#333333";
	}
}
</SCRIPT>
<TABLE class=column1Tab onmouseover="setBorder('column1',true);" 
            style="CURSOR: hand" onmouseout="setBorder('column1',false);" 
            cellSpacing=0 cellPadding=4 width="100%" border=0>
              <TBODY>
              <TR>
                <TD id=column1Tab align=right bgColor=#eeeeee height=20><FONT 
                  id=column1Title color=#333333>友 情 链 接</FONT></TD></TR></TBODY></TABLE>
            <DIV id=column1Content 
            style="BORDER-RIGHT: #ffffff 1px solid;width:300; BORDER-LEFT: #ffffff 1px solid; WIDTH: 100%; BORDER-BOTTOM: #ffffff 1px solid">
            <TABLE cellSpacing=0 cellPadding=4 width="100%" border=0>
              <TBODY>
              <TR>
                <TD style="LINE-HEIGHT: 110%">□ <A 
                  href="http://www.nju.edu.cn" 
                  target=_blank>南京大学</A><BR>□ <A 
                  href="http://www.nuaa.edu.cn" 
                  target=_blank>南京航空航天大学</A><BR>□ <A 
                  href="http://www.sina.com.cn" 
                  target=_blank>新浪网</A><BR>□ <A 
                  href="http://www.sina.com.cn" 
                  target=_blank>新浪网</A><BR>□ <A 
                  href="http://www.sina.com.cn" 
                  target=_blank>新浪网</A></TD></TR>
</TBODY></TABLE></div>

<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>

关于变换的立体感表格的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200807191406.shtml方便下次再访问哦。

·上一篇： 鼠标感应图片缩放
·下一篇： 鼠标右击弹出菜单

变换的立体感表格

文章分类LIST >>返回首页

最新游戏

最新新闻