Crazy knowledge base

新浪奥运幻灯片

页面样式定义:

<style type=”text/css”>
<!–
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,table,td,th,form,fieldset,img,dl,dt,dd{margin:0;padding:0;}
textarea,input,select,body,table{font-size:12px;}
select,input{vertical-align:middle;}
fieldset,img{border:0;}
ul,ol{list-style:none;}

a{color:#000;text-decoration:underline;}
a:visited{color:#800080;text-decoration:underline;}
a:hover{color:#f00;text-decoration:underline;}

.clearit{clear:both;font-size:0;line-height:0;height:0;}

body{background:#fff;text-align:center;}
#wrap{width:950px;text-align:left;margin:0 auto;padding:5px 0;}

.NavBar{padding:5px 0;height:31px;}
.NavBar .logo{width:114px;margin:1px 10px;display:inline;height:28px;float:left;text-align:center;overflow:hidden;position:relative;}
.NavBar .logo img{padding:100px 0 0;background:url(./images/ayhd_mj_001.png) no-repeat 0 0;_background:none;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=’true’, sizingMethod=’crop’, src=”./images/ayhd_mj_001.png”);}
.NavBar .echoType{float:left;padding:10px 0 0;}
.NavBar .echoType label{float:left;padding:0 12px 0 0;background:url(./images/ayhd_mj_002.gif) no-repeat 0 0;color:#999;}
.NavBar .echoType .type01{}
.NavBar .echoType .type02{background-position:-150px 0;}
.NavBar .echoType .type03{background-position:-300px 0;color:#000;}
.NavBar .echoType a:link,.NavBar .echoType a:visited{text-decoration:none;color:#999;display:block;padding-left:22px;height:19px;float:left;line-height:19px;}
.NavBar .echoType a:hover{color:#f00;text-decoration:underline;}
.NavBar .echoType .type03 a:link,.NavBar .echoType .type03 a:visited{text-decoration:none;color:#000;}
.NavBar .echoType .type03 a:hover{color:#f00;text-decoration:underline;}

.NavBar .control{float:right;padding:8px 0 0;}

/* 播放控制按钮 */
#playButton{width:50px;height:19px;overflow:hidden;float:left;background:url(./images/ayhd_mj_002.gif) no-repeat 0 -50px;cursor:pointer;position:relative;}
#playButton #plan{position:absolute;width:50px;height:19px;left:0;top:0;background:url(./images/ayhd_mj_002.gif) no-repeat -100px -50px;display:none;}
#playButton .stop{background:url(./images/ayhd_mj_002.gif) no-repeat -200px -50px;width:9px;height:10px;overflow:hidden;position:absolute;z-index:2;top:5px;left:21px;}
#playButton .play{background:url(./images/ayhd_mj_002.gif) no-repeat -300px -50px;width:7px;height:10px;overflow:hidden;position:absolute;z-index:2;top:5px;left:22px;}

/* 速度控制条 */
#speedBar{width:161px;height:19px;overflow:hidden;float:left;margin-left:10px;background:url(./images/ayhd_mj_002.gif) no-repeat 0 -100px;}
#speedBar h6{font-size:12px;font-weight:normal;width:36px;line-height:20px;color:#999;float:left;text-align:center;}
#speedBar #slide{width:95px;float:left;margin-top:3px;overflow:hidden;}
#speedBar #slideButton{width:6px;height:13px;background:url(./images/ayhd_mj_002.gif) no-repeat -200px -100px;margin-left:49px;cursor:pointer;overflow:hidden;}
#speedBar #speedCall{width:29px;text-align:center;line-height:20px;color:#000;float:left;}

/* 颜色选择 */
.colorSelect{float:left;width:79px;margin-left:10px;background:url(./images/ayhd_mj_002.gif) no-repeat -300px -100px;}
.colorSelect h6{font-size:12px;font-weight:normal;width:33px;line-height:20px;color:#999;float:left;text-align:center;}
.colorSelect ul{float:left;padding:3px 0 0;}
.colorSelect ul li{height:11px;width:11px;overflow:hidden;float:left;margin-right:1px;float:left;cursor:pointer;padding:1px;font-size:0;}
.colorSelect ul li.selected{border:1px solid #c2d6e6;padding:0;}
.colorSelect ul li.selected span{display:block;height:9px;border:1px solid #4985b3;}

/* 全屏按钮 */
#fullScreen{float:left;margin-left:10px;width:43px;float:left;line-height:100px;height:19px;overflow:hidden;background:url(./images/ayhd_mj_002.gif) no-repeat -400px -100px;cursor:pointer;}
#fullScreen.close{background-position:-400px -200px;}

.Main{border:1px solid #e0e0e0;background:#f7f7f7;overflow:hidden;zoom:1;position:relative;}
.Main h1{line-height:46px;text-align:center;font-size:14px;color:#000;}
.Main h1 #total{font-size:12px;font-weight:normal;}

.MainFrame{margin:0 auto;}
.MainFrame .rowLeft{padding:0 10px 50px 0;}
.MainFrame .rowRight{padding:0 0 50px 10px;}
.MainFrame .rowMiddle{height:400px;}

#picArrLeft{width:21px;height:83px;background:url(./images/ayhd_mj_002.gif) no-repeat 0 -200px;cursor:pointer;}
#picArrLeft.on{background-position:-200px -200px;}
#picArrRight{width:21px;height:83px;background:url(./images/ayhd_mj_002.gif) no-repeat -100px -200px;cursor:pointer;}
#picArrRight.on{background-position:-300px -200px;}

#BigPicBox{position:relative;zoom:1;}
#BigPic{}
#BigPic img{filter:blendTrans(Duration=1);border:1px solid #000;}
#PicTxtBox{Position:absolute;height:17px;bottom:0;_bottom:-1px;left:0;right:0;color:#fff;z-index:1;}
#PicTxtBox a:link,#PicTxtBox a:visited{color:#fff;text-decoration:none;}
#PicTxtBox a:hover{text-decoration:underline;}
#PicTxtBox .PicTxtCont{margin-top:-28px;}
#PicTxtBox #PicTitle{text-align:center;font-size:16px;line-height:20px;padding:3px 0 0;display:none;}
#PicTxtBox #PicTxtClose{position:absolute;top:3px;right:3px;width:11px;height:11px;overflow:hidden;background:url(./images/ayhd_mj_002.gif) no-repeat 0 -150px;cursor:pointer; display:none;}
#PicTxtBox .close{background-position:0 -150px!important;}
#PicTxtBox .open{background-position:-100px -150px!important;}

#MemoAndFunc{width:550px;margin:0 auto;padding:15px 0 0;}
#PicMemo{line-height:23px;text-indent:2em;display:none;width:550px;margin:0 auto;color:#000;font-size:14px;}
#PicMemo p{padding:7px 0 8px;}

#PicFunc{padding:15px 0 0;height:33px;float:right;color:#919192;}
#PicFunc label{line-height:18px;background:url(./images/ayhd_mj_002.gif) no-repeat 10px -300px;float:left;}
#PicFunc label.ico01{}
#PicFunc label.ico02{background-position:-190px -301px;}
#PicFunc label.ico03{background-position:-390px -300px;}
#PicFunc label.ico04{background-position:10px -350px;}
#PicFunc label a{padding:0 0 0 30px;}
#PicFunc a:link,#PicFunc a:visited{color:#919192; text-decoration:none;}
#PicFunc a:hover{color:#f00; text-decoration:underline;}

/*#brilliantOn{width:154px;height:473px;background:url(./images/ayhd_mj_004.gif) no-repeat 0 0;position:absolute;right:0;top:45px;display:none;z-index:10;overflow:hidden;}*/
#brilliantCont{width:154px;}

#brilliantOn #brilliantClose{width:10px;float:left;height:448px;cursor:pointer;overflow:hidden;}

#brilliantCont .b_cont{width:144px;text-align:center;float:left;}
#brilliantCont .b_cont .pic{width:130px;background:url(./images/ayhd_mj_008.gif) no-repeat 0 0;padding:8px 4px 0 0;height:93px;margin:9px auto 0;}
#brilliantCont .b_cont p{height:33px;line-height:28px;}
#brilliantCont .b_cont a:link,#brilliantCont a:visited{text-decoration:none;}
#brilliantCont .b_cont a:hover{text-decoration:none;}

#brilliantOff{width:28px;height:473px;background:url(./images/ayhd_mj_005.gif) no-repeat 0 0;position:absolute;right:0;top:45px;cursor:pointer;}

#brilliantOn .b_button{zoom:1;overflow:hidden;}
#b_leftBut{width:60px;height:23px;line-height:23px;padding:2px 0 0 17px;text-align:center;background:url(./images/ayhd_mj_002.gif) no-repeat 0 -700px;cursor:pointer;float:left;}
#b_leftBut.on{background-position:-200px -700px;color:#666;}
#b_rightBut{width:60px;height:23px;line-height:23px;padding:2px 17px 0 0;text-align:center;background:url(./images/ayhd_mj_002.gif) no-repeat -100px -700px;cursor:pointer;float:left;}
#b_rightBut.on{background-position:-300px -700px;color:#666;}

/* 小图列表 */
.PicListPart{border:1px solid #e0e0e0;border-top:none;height:84px;background:url(./images/ayhd_mj_006.gif) repeat-x 0 0;}
.PicListPart #PL_Left{float:left;border-left:1px solid #fff;width:93px;padding:11px 0 0;height:73px;position:relative;text-align:center;}
.PicListPart #PL_Right{float:right;border-right:1px solid #fff;width:93px;padding:11px 0 0;height:73px;position:relative;text-align:center;}

.coverPic{width:62px;height:62px;background:url(./images/ayhd_mj_002.gif) no-repeat 0 -400px;padding:2px 0 0 2px;margin:0 auto;text-align:left;}

#previousPics{position:absolute;top:34px;left:20px;width:67px;height:24px;overflow:hidden;}
#previousPics .bg{border:1px solid #ccc;background:#fff;filter:Alpha(Opacity=70);opacity:0.7;height:22px;}
#previousPics a{display:block;height:24px;line-height:24px;text-align:center;text-decoration:none;color:#000;position:absolute;left:0;top:0;width:67px;}
#previousPics a:hover{color:#c00;}

#NextPics{position:absolute;top:34px;left:5px;width:67px;height:24px;overflow:hidden;}
#NextPics .bg{border:1px solid #ccc;background:#fff;filter:Alpha(Opacity=70);opacity:0.7;height:22px;}
#NextPics a{display:block;height:24px;line-height:24px;text-align:center;text-decoration:none;color:#000;position:absolute;left:0;top:0;width:67px;}
#NextPics a:hover{color:#c00;}

#leftArr{width:15px;height:44px;background:url(./images/ayhd_mj_002.gif) no-repeat -100px -400px;cursor:pointer;overflow:hidden;float:left;margin-top:20px;}
#leftArr.on{background-position:-150px -400px;}

#rightArr{width:15px;height:44px;background:url(./images/ayhd_mj_002.gif) no-repeat -200px -400px;cursor:pointer;overflow:hidden;float:left;margin-top:20px;}
#rightArr.on{background-position:-250px -400px;}

#picList{float:left;width:715px;margin:0 7px 0 7px;overflow:hidden;}
#picList .PL_cont{width:32760px;}
#picList .pic{width:65px;float:left;padding:12px 0 0;text-align:center;}
#picList .pic table{width:58px;height:58px;vertical-align:middle;margin:0 auto;}
#picList .picOn table{width:55px;height:55px;vertical-align:middle;margin:0 auto;}
#picList .pic img{border:1px solid #e4e4e4;}
#picList .pic a:hover img{border:1px solid #7dadde;}
#picList .picOn{width:64px;float:left;padding:15px 0 0 1px;text-align:center;background:url(./images/ayhd_mj_002.gif) no-repeat -297px -395px;height:57px;}
#picList .picOn img{border:1px solid #7dadde;display:block; margin:0 auto;}
/* endSelect */
#endSelect{top:245px;left:359px;position:absolute;width:230px;height:71px;border:1px solid #8a8a8a;display:none;}
#endSelect .bg{height:100%;width:100%;background:#000;filter:Alpha(Opacity=50);opacity:0.5;}
#endSelect .E_Cont{position:absolute;top:10px;left:26px;color:#fff;font-size:14px;}
#endSelect .E_Cont p{padding:4px 0;zoom:1;overflow:hidden;}
#rePlayBut{float:left;width:69px;height:23px;background:url(./images/ayhd_mj_002.gif) no-repeat -100px -350px;}
#nextPicsBut{float:left;width:97px;height:23px;background:url(./images/ayhd_mj_002.gif) no-repeat -200px -350px;margin-left:10px;}
#endSelect #endSelClose{background:url(./images/ayhd_mj_002.gif) no-repeat 0 -150px;position:absolute;top:3px;right:3px;cursor:pointer;width:11px;height:11px;overflow:hidden;z-index:2;}

/* fullClew */
#fullClew{top:300px;left:380px;position:absolute;width:230px;height:71px;border:1px solid #8a8a8a;display:none;z-index:10001;}
#fullClew .bg{height:100%;width:100%;background:#000;filter:Alpha(Opacity=50);opacity:0.5;}
#fullClew .F_Cont{position:absolute;top:10px;color:#fff;font-size:14px;text-align:center;width:100%;}
#fullClew .F_Cont p{padding:4px 0;zoom:1;overflow:hidden;}
#fullCloseBut{width:97px;height:23px;background:url(./images/ayhd_mj_002.gif) no-repeat -300px -350px;margin:0 auto;display:block;}
#fullClew #fullClose{background:url(./images/ayhd_mj_002.gif) no-repeat 0 -150px;position:absolute;top:3px;right:3px;cursor:pointer;width:11px;height:11px;overflow:hidden;z-index:2;}

/* 风格2 */
.bS_02{background:#3f3f3f url(./images/ayhd_mj_009.gif) repeat-x 0 0;}
.bS_02 .NavBar .echoType label{color:#313131;}
.bS_02 .NavBar .echoType a:link,.bS_02 .NavBar a:visited{text-decoration:none;color:#313131}
.bS_02 .NavBar .echoType a:hover{color:#f00;text-decoration:underline;}

.bS_02 .Main{border:1px solid #2d2e2e;background:#222222 url(./images/ayhd_mj_010.gif) repeat-x 0 0;}
.bS_02 .Main h1{color:#fff;}

.bS_02 #picArrLeft{background:url(./images/ayhd_mj_002.gif) no-repeat 0 -500px;cursor:pointer;}
.bS_02 #picArrLeft.on{background-position:-200px -500px;}
.bS_02 #picArrRight{background:url(./images/ayhd_mj_002.gif) no-repeat -100px -500px;cursor:pointer;}
.bS_02 #picArrRight.on{background-position:-300px -500px;}

.bS_02 #PicFunc{background:none;}

.bS_02 #brilliantOn{background:url(./images/ayhd_mj_012.gif) no-repeat 0 0;}
.bS_02 #brilliantOff{background:url(./images/ayhd_mj_013.gif) no-repeat 0 0;}
.bS_02 #brilliantCont .b_cont .pic{background-position:0 -200px;}
.bS_02 #b_leftBut{background:url(./images/ayhd_mj_002.gif) no-repeat 0 -750px;color:#7b7c7c;}
.bS_02 #b_leftBut.on{background-position:-200px -750px;color:#515151;}
.bS_02 #b_rightBut{background:url(./images/ayhd_mj_002.gif) no-repeat -100px -750px;color:#7b7c7c;}
.bS_02 #b_rightBut.on{background-position:-300px -750px;color:#515151;}
.bS_02 #leftArr{background:url(./images/ayhd_mj_002.gif) no-repeat -400px -500px;}
.bS_02 #leftArr.on{background-position:-425px -500px;}

.bS_02 #rightArr{background:url(./images/ayhd_mj_002.gif) no-repeat -450px -500px;}
.bS_02 #rightArr.on{background-position:-475px -500px;}

.bS_02 .PicListPart{border:1px solid #303030;border-top:none;height:84px;background:url(./images/ayhd_mj_011.gif) repeat-x 0 0;}
.bS_02 .PicListPart #PL_Left{border-left:none;padding:11px 0 0 1px;}
.bS_02 .PicListPart #PL_Right{border-right:none;padding:11px 0 0 1px;}

.bS_02 #picList .pic img{border-color:#000;}
.bS_02 #PicMemo{color:#fff;}

.bS_03{background:#000 url(./images/ayhd_mj_014.jpg) repeat-x 50% 0;}

.bS_03 .NavBar .echoType{color:#4d4d4d;}
.bS_03 .NavBar .echoType a:link,.bS_03 .NavBar .type03 a:visited{text-decoration:none;color:#4d4d4d;}
.bS_03 .NavBar .echoType a:hover{color:#f00;text-decoration:underline;}

.bS_03 .Main{border:1px solid #2d2e2e;background:url(./images/ayhd_mj_007.png) repeat 0 0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src=’./images/ayhd_mj_007.png’);_background:none;}

.bS_03 #picArrLeft{background:url(./images/ayhd_mj_002.gif) no-repeat 0 -600px;cursor:pointer;}
.bS_03 #picArrLeft.on{background-position:-200px -600px;}
.bS_03 #picArrRight{background:url(./images/ayhd_mj_002.gif) no-repeat -100px -600px;cursor:pointer;}
.bS_03 #picArrRight.on{background-position:-300px -600px;}

.bS_03 #PicFunc{background:none;}

.bS_03 #brilliantOn{background:none;}
.bS_03 #brilliantOn #brilliantOnBg{background:url(./images/ayhd_mj_015.png) no-repeat 0 0;width:154px;height:473px;position:absolute;left:0;top:0;z-index:-1;zoom:1;}
.bS_03 #brilliantOn #brilliantOnBg.png{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=image, src=’./images/ayhd_mj_015.png’);_background:none}
.bS_03 #brilliantClose{position:relative;z-index:1;}
.bS_03 #brilliantOff{background:url(./images/ayhd_mj_016.gif) no-repeat 0 0;}
.bS_03 #brilliantCont .b_cont .pic{background-position:0 -400px;}
.bS_03 #b_leftBut{background:url(./images/ayhd_mj_019.png) no-repeat 0 0;color:#5980a1;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src=’./images/ayhd_mj_019.png’);_background:none;}
.bS_03 #b_leftBut.on{background:url(./images/ayhd_mj_021.png) no-repeat 0 0;color:#386286;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src=’./images/ayhd_mj_021.png’);_background:none;}
.bS_03 #b_rightBut{background:url(./images/ayhd_mj_020.png) no-repeat 0 0;color:#5980a1;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src=’./images/ayhd_mj_020.png’);_background:none;}
.bS_03 #b_rightBut.on{background:url(./images/ayhd_mj_022.png) no-repeat 0 0;color:#386286;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src=’./images/ayhd_mj_022.png’);_background:none;}

.bS_03 #leftArr{background:url(./images/ayhd_mj_002.gif) no-repeat -400px -600px;}
.bS_03 #leftArr.on{background-position:-425px -600px;}

.bS_03 #rightArr{background:url(./images/ayhd_mj_002.gif) no-repeat -450px -600px;}
.bS_03 #rightArr.on{background-position:-475px -600px;}

.bS_03 .PicListPart{border:1px solid #303030;border-top:none;height:84px;background:url(./images/ayhd_mj_017.png) repeat-x 0 0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src=’./images/ayhd_mj_017.png’);_background:none;}
.bS_03 .PicListPart #PL_Left{border-left:none;padding:11px 0 0 1px;}
.bS_03 .PicListPart #PL_Right{border-right:none;padding:11px 0 0 1px;}

.bS_03 #picList .pic img{border-color:#000;}
.bS_03 #PicMemo{color:#fff;}
–>
</style>
<style type=”text/css” media=”print”>
<!–
/* for print */
html,body{zoom:0.7;background:#fff!important;}
.control{display:none;}
#PicFunc{display:none;}
.PicListPart{display:none!important;}
.logo img{padding:0!important;background:none!important;}
#brilliantOn{display:none!important;}
#brilliantOff{display:none!important;}

.echoType{display:none;}
#Main{padding:0 0 100px!important;_filter:none;background:#fff;}
#PicTxtBox{color:#000!important;height:80px!important;bottom:-80px!important;}
#PicTxtBox .PicTxtCont{margin-top:10px!important;}
#PicTxtBox .PicTxtBg{display:none;}
#PicTitle{display:block!important;}
#PicMemo{display:block!important;}
#picArrLeft{display:none!important;}
#picArrRight{display:none!important;}
#PicTxtClose{display:none!important;}

–>
</style>

 

 

新浪奥运幻灯片
滚动到顶部