电脑技术学习

用DIV+CSS实现的网易首页滑动效果的标签

dn001

<style>
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; FONT-FAMILY: "宋体", arial; TEXT-ALIGN: center
}
UL {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}
OL {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}
LI {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}

H5 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
.clear {
CLEAR: both; FONT-SIZE: 1px; VISIBILITY: hidden; WIDTH: 1px
}

.lineH {
FONT-SIZE: 1px; BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084706370.gif); MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 750px; HEIGHT: 1px
}
.area {
BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084707360.gif); MARGIN: 0px auto; WIDTH: 750px
}
.area .col1 {
FLOAT: left; WIDTH: 436px
}
.area .col2 {
FLOAT: right; WIDTH: 300px
}
.scrollWeather {
PADDING-RIGHT: 0px; PADDING-LEFT: 8px; PADDING-BOTTOM: 0px; COLOR: #1f3a87; PADDING-TOP: 4px; TEXT-ALIGN: left
}
.scrollWeather UL {

}
.scrollWeather LI {
FLOAT: left; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
.scrollWeather .s1 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
.scrollWeather .s2 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; COLOR: #1f3a87; PADDING-TOP: 4px
}
.leftContent {
CLEAR: both
}
.leftContent .menu {
CLEAR: both; HEIGHT: 22px
}
.leftContent .menu UL {

}
.leftContent .menu LI {
FLOAT: left; CURSOR: pointer; LIST-STYLE-TYPE: none; HEIGHT: 22px
}
.leftContent .menu LI H6 {
PADDING-RIGHT: 0px; PADDING-LEFT: 11px; FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 2px; PADDING-TOP: 6px
}
.leftContent .menu LI SPAN {
PADDING-RIGHT: 8px; PADDING-LEFT: 8px; BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084707838.gif) no-repeat 0px 9px; FLOAT: right; PADDING-BOTTOM: 0px; PADDING-TOP: 6px
}
.leftContent .menu .activeW1 {
BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084707546.gif); WIDTH: 218px
}
.leftContent .menu .normalW1 {
BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084707334.gif); WIDTH: 218px
}
.leftContent .menu .activeW2 {
BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084707253.gif); WIDTH: 218px
}
.leftContent .menu .normalW2 {
BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084708991.gif); WIDTH: 218px
}
.leftContent .menuA {
CLEAR: both; OVERFLOW: hidden; HEIGHT: 22px
}
.leftContent .menuA UL {

}
.leftContent .menuA LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 2px; WIDTH: 109px; CURSOR: pointer; PADDING-TOP: 6px; LIST-STYLE-TYPE: none
}
.leftContent .menuA .active {
BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084708786.gif)
}
.leftContent .menuA .normal {
BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084708978.gif)
}
.leftContent .menuA .over {
BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084709496.gif)
}
.leftContent .menuB {
CLEAR: both; OVERFLOW: hidden; HEIGHT: 22px
}
.leftContent .menuB UL {

}
.leftContent .menuB LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 2px; CURSOR: pointer; PADDING-TOP: 6px; LIST-STYLE-TYPE: none
}
.leftContent .menuB .active {
BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084709572.gif); FLOAT: left; WIDTH: 88px
}
.leftContent .menuB .normal {
BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084709856.gif); FLOAT: left; WIDTH: 87px
}
.leftContent .menuB .over {
BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084709136.gif); FLOAT: left; WIDTH: 87px
}
.leftContent .menu A {
COLOR: #1f3a87
}
.leftContent .menuA LI A {
COLOR: #1f3a87
}
.leftContent .menuB LI A {
COLOR: #1f3a87
}
.leftContent .menu A:visited {
COLOR: #1f3a87
}
.leftContent .menuA LI A:visited {
COLOR: #1f3a87
}
.leftContent .menuB LI A:visited {
COLOR: #1f3a87
}
.leftContent .menu A:hover {
COLOR: #bc2931
}
.leftContent .menuA LI A:hover {
COLOR: #bc2931
}
.leftContent .menuB LI A:hover {
COLOR: #bc2931
}
.leftContent .menuA .over A {
COLOR: #fff
}
.leftContent .menuB .over A {
COLOR: #fff
}
.leftContent .menuA .over A:visited {
COLOR: #fff
}
.leftContent .menuB .over A:visited {
COLOR: #fff
}
.leftContent .menuA .over A:hover {
COLOR: #ff0
}
.leftContent .menuB .over A:hover {
COLOR: #ff0
}
.leftContent .content {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 416px; PADDING-TOP: 12px
}
.leftContent .content .col {
FLOAT: left
}
.leftContent .content .w1 {
WIDTH: 162px
}
.leftContent .content .w2 {
PADDING-RIGHT: 0px; PADDING-LEFT: 14px; PADDING-BOTTOM: 0px; WIDTH: 240px; PADDING-TOP: 0px
}
.leftContent .content .w3 {
WIDTH: 122px
}
.leftContent .content .w4 {
PADDING-RIGHT: 0px; PADDING-LEFT: 14px; PADDING-BOTTOM: 0px; WIDTH: 280px; PADDING-TOP: 0px
}
.leftContent .content .pic {
CLEAR: both
}
.leftContent .content .pic IMG {
BORDER-RIGHT: #cbcbcb 1px solid; BORDER-TOP: #cbcbcb 1px solid; BORDER-LEFT: #cbcbcb 1px solid; BORDER-BOTTOM: #cbcbcb 1px solid
}
.leftContent .content .pic H6 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 12px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; TEXT-ALIGN: left
}
.leftContent .content .listText {
CLEAR: both; BORDER-RIGHT: #cbcbcb 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cbcbcb 1px solid; PADDING-LEFT: 5px; BACKGROUND: #f2f6fb; PADDING-BOTTOM: 3px; BORDER-LEFT: #cbcbcb 1px solid; COLOR: #cbcbcb; LINE-HEIGHT: 160%; PADDING-TOP: 8px; BORDER-BOTTOM: #cbcbcb 1px solid; TEXT-ALIGN: left
}
.leftContent .content .listText .s1 {
BORDER-RIGHT: #baceeb 1px solid; BORDER-TOP: #baceeb 1px solid; FONT-SIZE: 12px; BACKGROUND: #fff; MARGIN: 5px 0px; BORDER-LEFT: #baceeb 1px solid; WIDTH: 100px; BORDER-BOTTOM: #baceeb 1px solid; HEIGHT: 16px
}
.leftContent .content .listText .s2 {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12px; BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084710836.gif); BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 5px 0px; WIDTH: 34px; PADDING-TOP: 2px; HEIGHT: 20px; BORDER-RIGHT-WIDTH: 0px
}
.leftContent .content .listText1 {
CLEAR: both; BORDER-RIGHT: #cbcbcb 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cbcbcb 1px solid; PADDING-LEFT: 5px; BACKGROUND: #f2f6fb; PADDING-BOTTOM: 5px; BORDER-LEFT: #cbcbcb 1px solid; COLOR: #cbcbcb; LINE-HEIGHT: 180%; PADDING-TOP: 10px; BORDER-BOTTOM: #cbcbcb 1px solid; TEXT-ALIGN: left
}
.leftContent .content .bbsPoint {
CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 7px; BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084707838.gif) no-repeat 0px 14px; PADDING-BOTTOM: 0px; PADDING-TOP: 11px; TEXT-ALIGN: left
}
.leftContent .content .bbsPoint A {
COLOR: #1f3a87
}
.leftContent .content .bbsPoint A:visited {
COLOR: #1f3a87
}
.leftContent .content .bbsPoint A:hover {
COLOR: #bc2931
}
.leftContent .content .listText A {
COLOR: #000
}
.leftContent .content .listText A:visited {
COLOR: #000
}
.leftContent .content .listText A:hover {
COLOR: #bc2931
}
.leftContent .content .keyword {
CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; COLOR: #1f3a87; LINE-HEIGHT: 160%; PADDING-TOP: 10px; TEXT-ALIGN: left
}
.leftContent .content H4 {
CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: 100; FONT-SIZE: 18px; PADDING-BOTTOM: 0px; PADDING-TOP: 11px; FONT-FAMILY: "黑体" ,Arial Black,sans-serif; TEXT-ALIGN: left
}
.leftContent .content P {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #1f3a87; TEXT-INDENT: 2em; LINE-HEIGHT: 160%; PADDING-TOP: 10px; TEXT-ALIGN: left
}
.leftContent .content .list {
CLEAR: both
}
.leftContent .content .list UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 10px
}
.leftContent .content .list LI {
CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 10px; BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084710791.gif) no-repeat 2px 7px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
.leftContent .content .list LI SPAN {
PADDING-RIGHT: 3px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; COLOR: #1f3a87; PADDING-TOP: 0px
}
.leftContent .content .list LI SPAN A {
COLOR: #1f3a87
}
.leftContent .content .list LI SPAN A:visited {
COLOR: #1f3a87
}
.leftContent .content .list LI SPAN A:hover {
COLOR: #bc2931
}
.leftContent .content .list1 {
CLEAR: both
}
.leftContent .content .list1 UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 9px
}
.leftContent .content .list1 LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 2px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
.leftContent .content .list1 LI H6 {
FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: left; MARGIN: 0px 2px 0px 0px; COLOR: #1f3a87
}
.leftContent .content .list1 LI H6 A {
COLOR: #1f3a87
}
.leftContent .content .list1 LI H6 A:visited {
COLOR: #1f3a87
}
.leftContent .content .list1 LI H6 A:hover {
COLOR: #bc2931
}
.leftContent .content .more {
CLEAR: both; HEIGHT: 18px
}
.leftContent .content .more SPAN {
PADDING-RIGHT: 0px; PADDING-LEFT: 10px; BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084707838.gif) #fff no-repeat 3px 7px; FLOAT: right; PADDING-BOTTOM: 0px; PADDING-TOP: 4px
}
.leftContent .content .more A {
COLOR: #1f3a87
}
.leftContent .content .more A:visited {
COLOR: #1f3a87
}
.leftContent .content .more A:hover {
COLOR: #bc2931
}
.leftContent .placeList {
BORDER-RIGHT: #cbcbcb 1px solid; BORDER-TOP: #cbcbcb 1px solid; DISPLAY: none; BACKGROUND: #f2f6fb; LEFT: -128px; BORDER-LEFT: #cbcbcb 1px solid; WIDTH: 213px; BORDER-BOTTOM: #cbcbcb 1px solid; POSITION: absolute; TOP: 22px; HEIGHT: 190px
}
.leftContent .placeList .titleT {
CLEAR: both; BACKGROUND: #a0aac8; BORDER-BOTTOM: #cbcbcb 1px solid; HEIGHT: 19px
}
.leftContent .placeList .titleT H5 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: #fff; PADDING-TOP: 4px
}
.leftContent .placeList .contentT {
CLEAR: both; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid
}
.leftContent .placeList .contentT UL {

}
.leftContent .placeList .contentT LI {
BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 2px; WIDTH: 52px; PADDING-TOP: 4px; BORDER-BOTTOM: #fff 1px solid; LIST-STYLE-TYPE: none; HEIGHT: 14px
}
.leftLine {
BORDER-BOTTOM: #cbcbcb 1px solid
}
.leftLine1 {
CLEAR: both; FONT-SIZE: 1px; BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084710278.gif); OVERFLOW: hidden; HEIGHT: 1px
}
.leftHeight1 {
OVERFLOW: hidden; HEIGHT: 260px
}
.leftHeight2 {
OVERFLOW: hidden; HEIGHT: 285px
}
.leftHeight3 {
OVERFLOW: hidden; HEIGHT: 310px
}
.leftHeight4 {
OVERFLOW: hidden; HEIGHT: 305px
}
.leftContent A {
COLOR: #000
}
.leftContent A:hover {
COLOR: #bc2931
}
.rightLine {
BORDER-TOP: #cbcbcb 1px solid
}
.rightLine1 {
BORDER-BOTTOM: #cbcbcb 1px solid
}
.rightLine2 {
BORDER-TOP: #cbcbcb 1px solid
}
.rightTitle {
CLEAR: both; BACKGROUND: #fff; MARGIN: 0px auto; WIDTH: 298px; BORDER-BOTTOM: #cbcbcb 1px solid; HEIGHT: 24px
}
.rightTitle H5 {
PADDING-RIGHT: 0px; PADDING-LEFT: 8px; FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #1f3a87; PADDING-TOP: 7px
}
.rightTitle H6 {
PADDING-RIGHT: 6px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: right; PADDING-BOTTOM: 0px; PADDING-TOP: 7px
}
.rightTitle A {
COLOR: #1f3a87
}
.rightTitle A:visited {
COLOR: #1f3a87
}
.rightTitle A:hover {
COLOR: #bc2931
}
.rightTitle SPAN {
PADDING-RIGHT: 8px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; PADDING-TOP: 7px
}
.rightTitle SPAN A {
COLOR: #000
}
.rightTitle SPAN A:visited {
COLOR: #000
}
.rightTitle SPAN A:hover {
COLOR: #bc2931
}
.rightTitle .s {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
.rightContent {
CLEAR: both
}
.rightContent .list {
FLOAT: left; WIDTH: 150px
}
.rightContent .list UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 6px
}
.rightContent .list LI {
CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 20px; BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084710593.gif) no-repeat 11px 7px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
.rightContent .theText {
CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 9px
}
.rightContent .list1 {
CLEAR: both
}
.rightContent .list1 UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 6px
}
.rightContent .list1 LI {
CLEAR: both; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
.rightContent .list1 LI H6 {
PADDING-RIGHT: 0px; PADDING-LEFT: 20px; FONT-WEIGHT: normal; FONT-SIZE: 12px; BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084710593.gif) no-repeat 11px 7px; FLOAT: left; PADDING-BOTTOM: 3px; PADDING-TOP: 3px
}
.rightContent .list1 LI SPAN {
PADDING-RIGHT: 8px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; PADDING-TOP: 3px
}
.rightContent .picText {
CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 9px; PADDING-BOTTOM: 0px; PADDING-TOP: 9px; TEXT-ALIGN: left
}
.rightContent .picText IMG {
BORDER-RIGHT: #cbcbcb 1px solid; BORDER-TOP: #cbcbcb 1px solid; BORDER-LEFT: #cbcbcb 1px solid; BORDER-BOTTOM: #cbcbcb 1px solid
}
.rightContent .picText .pic {
PADDING-RIGHT: 8px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 137px; PADDING-TOP: 0px
}
.rightContent .picText .textList {
WIDTH: 280px
}
.rightContent .picText .textList UL {

}
.rightContent .picText .textList LI {
CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 10px; BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084710593.gif) no-repeat 2px 7px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
.rightContent .search {
CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 11px; PADDING-BOTTOM: 0px; PADDING-TOP: 3px
}
.rightContent .search UL {

}
.rightContent .search LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
.rightContent .search LI SELECT {
FONT-SIZE: 12px
}
.rightContent .search .s1 {
BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #999 1px solid; WIDTH: 80px; BORDER-BOTTOM: #999 1px solid; HEIGHT: 17px
}
.rightContent .search .s2 {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12px; BACKGROUND: url(http://img.pc004.com/p/2009-0621/20090621084710570.gif); BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; WIDTH: 54px; PADDING-TOP: 2px; HEIGHT: 20px; BORDER-RIGHT-WIDTH: 0px
}
</style>

<SCRIPT language=VBScript type=text/VBScript>
<!--
function menuover0(id1)
dim ii
for ii=0 to 1
document.all("menu"&ii)(0).className="normalW2"
document.all("menu"&ii)(1).style.display="none"
next

document.all(id1)(0).className="activeW1"
document.all(id1)(1).style.display=""
end function

function menuover1(id1)
dim ii
for ii=0 to 3
document.all("menua"&ii)(0).className="normal"
document.all("menua"&ii)(1).style.display="none"
next

document.all(id1)(0).className="active"
document.all(id1)(1).style.display=""
end function

function menuover2(id1)
dim ii
for ii=0 to 4
document.all("menub"&ii)(0).className="normal"
document.all("menub"&ii)(1).style.display="none"
next

document.all(id1)(0).className="active"
document.all(id1)(1).style.display=""
end function;

function menuover3(id1)
dim ii
for ii=0 to 4
document.all("menuc"&ii)(0).className="normal"
document.all("menuc"&ii)(1).style.display="none"
next

document.all(id1)(0).className="active"
document.all(id1)(1).style.display=""
end function
-->
</SCRIPT>
</HEAD>
<BODY>

<DIV class=area><!-- left -->
<DIV class=col1><!-- 娱乐 -->
<DIV class="leftContent leftHeight2">
<DIV class=menuA id=tabone>
<UL>
<LI language=vbscript class=active id=menua0
onmouseover='menuover1 "menua0"'><A href="http://16z.com/">巴洲</A> </LI>
<LI language=vbscript class=normal id=menua1
onmouseover='menuover1 "menua1"'><A href="http://16z.com/#">南江</A> </LI>
<LI language=vbscript class=normal id=menua2
onmouseover='menuover1 "menua2"'><A href="http://16z.com/#">通江</A> </LI>
<LI language=vbscript class=normal id=menua3
onmouseover='menuover1 "menua3"'><A href="http://16z.com/#">平昌</A>
</LI></UL></DIV>
<DIV class=content>
<DIV id=menua0><!--这里放入信息-->
000
</DIV>
<DIV id=menua1><!--这里放入信息-->
222
</DIV>
<DIV id=menua2><!--这里放入信息-->
333
</DIV>
<DIV id=menua3><!--这里放入信息-->wwwwwwwwwwwwwwwwwwwwww
444
</DIV></DIV>
<DIV class=clear></DIV></DIV></DIV><!-- right -->
<DIV class=col2><!-- 分类信息 -->
<DIV class="rightTitle rightLine">
<H5><A href="http://classad.163.com/">test</A></H5><SPAN>888</SPAN>
</DIV>
<DIV class=rightContent>
<DIV class=theText>111</DIV>
</DIV></DIV>
<DIV class=clear></DIV></DIV>
<DIV class=lineH></DIV>
<DIV class=blank9></DIV><!-- 内容 -->
</BODY></HTML>

上一篇 用DIV+CSS布局网页的一个实例HTML代码

下一篇 支持IE6 IE7 Firefox的纯CSS的下拉菜单

相关文章