CSS多風(fēng)格的立體層菜單

2024-09-05 12:19:45

字體：大中小

供稿：網(wǎng)友

CSS實(shí)現(xiàn)的多種風(fēng)格的立體菜單，有不同的色調(diào)供選擇，結(jié)合了JS技術(shù)，可以在多種風(fēng)格間無(wú)刷新切換，挺好玩的。

<HTML><HEAD><TITLE>CSS立體層</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><SCRIPT>function c(css){up.className=css;alert(css)}</SCRIPT><STYLE>TABLE,td,div {FONT-SIZE: 9pt; CURSOR: hand; FONT-FAMILY: 宋體}BODY {FONT-SIZE: 9pt; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #637994}.yellow {BORDER-RIGHT: #8a6100 2px solid; BORDER-TOP: #ffe3a4 2px solid; BORDER-LEFT: #ffe3a4 2px solid; COLOR: #ffff00; BORDER-BOTTOM: #8a6100 2px solid; BACKGROUND-COLOR: #e19d00}.blue {BORDER-RIGHT: #002200 2px solid; BORDER-TOP: #a6c1df 2px solid; BORDER-LEFT: #a6c1df 2px solid; COLOR: #ffffff; BORDER-BOTTOM: #002200 2px solid; BACKGROUND-COLOR: #3a6ea5}.green {BORDER-RIGHT: #002200 2px solid; BORDER-TOP: #b9ffb9 2px solid; BORDER-LEFT: #b9ffb9 2px solid; COLOR: #ffff00; BORDER-BOTTOM: #002200 2px solid; BACKGROUND-COLOR: #008000}.menu {BORDER-RIGHT: #FFFFFF 2px solid; BORDER-TOP: #000000 2px solid; BORDER-LEFT: #000000 2px solid; COLOR: #000080; BORDER-BOTTOM: #FFFFFF 2px solid; BACKGROUND-COLOR: #d8d8d0}.menu1 {BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #adbac9 2px solid; BORDER-LEFT: #adbac9 2px solid; COLOR: #ffffff; BORDER-BOTTOM: #000000 2px solid; BACKGROUND-COLOR: #637994}.blue1 {BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #d0ecff 2px solid; BORDER-LEFT: #d0ecff 2px solid; COLOR: #ffff00; BORDER-BOTTOM: #000000 2px solid; BACKGROUND-COLOR: #0099ff}.black {BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #d0d0d0 2px solid; BORDER-LEFT: #d0d0d0 2px solid; COLOR: #ffffff; BORDER-BOTTOM: #000000 2px solid; BACKGROUND-COLOR: #000000}</STYLE><META content="Microsoft FrontPage 4.0" name=GENERATOR></HEAD><BODY bgColor=#adbac9><div   id="iwvjtn8m0"   class=yellow id=upstyle="left: 294; width: 196; position: absolute; top: 79; height: 72"><P align=center><br><br>立體效果的層</P></DIV><DIV align=center><CENTER><TABLE cellSpacing=0 cellPadding=0 width=400 border=0><TBODY><TR><TD class=menu onclick='c("menu")' align=middle width=50>灰</TD><TD class=green onclick='c("green")' align=middle width=50>綠</TD><TD class=blue onclick='c("blue")' align=middle width=50>藍(lán)</TD><TD class=yellow onclick='c("yellow")' align=middle width=50>黃</TD><TD class=menu1 onclick='c("menu1")' align=middle width=50>灰1</TD><TD class=blue1 onclick='c("blue1")' align=middle width=50>淺藍(lán)</TD><TD class=black onclick='c("black")' align=middle width=50>黑</TD><TD align=middlewidth=50></TD></TR></TBODY></TABLE></CENTER></DIV></BODY></HTML>

上一篇：簡(jiǎn)潔帶鼠標(biāo)提示的導(dǎo)航條

下一篇：完全CSS實(shí)現(xiàn)的下拉導(dǎo)航菜單