首页  ·  知识 ·  前端
用DIV+CSS实现的网易首页滑动效果的标签
hankx  http://hi.baidu.com/hankx/    编辑:dezai  图片来源:网络
styleBODY {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; 0px; COLOR: #000; PADDI
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(); 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(
); WIDTH: 218px
}
.leftContent .menu .normalW1 {
BACKGROUND: url(
); WIDTH: 218px
}
.leftContent .menu .normalW2 {
BACKGROUND: url(
)
}
.leftContent .menuA .normal {
BACKGROUND: url(
)
}
.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(
); FLOAT: left; WIDTH: 87px
}
.leftContent .menuB .over {
BACKGROUND: url(
); 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(
}
.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(
) #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(
) 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(
) 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(
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
-->
















本文作者:hankx 来源:http://hi.baidu.com/hankx/
CIO之家 www.ciozj.com 微信公众号:imciow
    >>频道首页  >>网站首页   纠错  >>投诉
版权声明:CIO之家尊重行业规范,每篇文章都注明有明确的作者和来源;CIO之家的原创文章,请转载时务必注明文章作者和来源;
延伸阅读