CSS:CSS基础之十八
效果图如下：
<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_i1025" style="WIDTH: 211.5pt; HEIGHT: 162pt" type="#_x0000_t75"><imagedata o:title="taobaoResult" src="file:///C:%5CDOCUME~1%5CADMINI~1%5CLOCALS~1%5CTemp%5Cmsohtml1%5C01%5Cclip_image001.jpg"></imagedata></shape>
代码如下:(主要部分)
第一步：
TaobaoSlidesEffect.htm
<TITLE>淘宝网幻灯片效果</TITLE>
<link href="images/SlidePlayer.css" rel="stylesheet" type="text/css">
<SCRIPT src="Images/yui-utilities.js" type=text/javascript></SCRIPT>
<SCRIPT src="Images/tbra.js" type=text/javascript></SCRIPT>
<body>
<DIV id=MainPromotionBanner>
<DIV id=SlidePlayer>
<UL class=Slides>
<LI><img src="Images/s1.jpg"></LI>
<LI><img src="Images/s2.jpg"></LI>
<LI><img src="Images/s3.jpg"></LI>
<LI><img src="Images/s4.jpg"></LI>
<LI><img src="Images/s5.jpg"></LI>
<LI><img src="Images/s6.jpg"></LI>
<LI><img src="Images/s7.jpg"></LI>
<LI><img src="Images/s8.jpg"></LI>
</UL>
</DIV>
</DIV>
<SCRIPT type=text/javascript>
TB.widget.SimpleSlide.decorate('SlidePlayer', {eventType:'mouse', effect:'scroll'});
</SCRIPT>
</body>
第二步：
SlidePlayer.css
/***第一部分***/
* { margin: 0px; padding: 0px; }
body {
font-family: "宋体";
font-size: 12px;
text-decoration: none;
margin-top: 20px;
margin-left: 20px;
color: #666666;
}
/***第二部分***/
DIV#MainPromotionBanner {
WIDTH: 400px;
HEIGHT: 300px;
margin:0 auto;
border: 1px dotted #666666;
}
#MainPromotionBanner #SlidePlayer {
MARGIN: 0px auto; POSITION: relative
}
#MainPromotionBanner .Slides {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; HEIGHT: 300px
}
#MainPromotionBanner .Slides LI {
FLOAT: left; WIDTH: 400px; HEIGHT: 300px;
}
#MainPromotionBanner .Slides IMG {
BORDER-TOP-WIDTH: 0px; DISPLAY: block; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 400px; HEIGHT: 300px; BORDER-RIGHT-WIDTH: 0px
}
/***第三部分***/
#MainPromotionBanner .SlideTriggers {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 10; RIGHT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 265px; HEIGHT: 25px
}
#MainPromotionBanner .SlideTriggers LI {
DISPLAY: block; FONT-SIZE: 0.9em; BACKGROUND: url(slide_trigger.gif) no-repeat center center; FLOAT: left; MARGIN: 2px; OVERFLOW: hidden; CURSOR: pointer; COLOR: #<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="74" unitname="a">74a</chmetcnv>8ed; LINE-HEIGHT: 16px; FONT-FAMILY: Arial; WIDTH: 16px; HEIGHT: 16px; TEXT-ALIGN: center
}
#MainPromotionBanner .SlideTriggers LI.Current {
BORDER-TOP-WIDTH: 0px; FONT-WEIGHT: bold; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 1.5em; BACKGROUND: url(slide_trigger_c.gif) no-repeat center center; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px 1px; COLOR: #fff; LINE-HEIGHT: 21px; WIDTH: 21px; HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px
}
分析:
1、 第一部分为一般网页设定
2、 第二部分为显示图片区域
3、 第三部分为显示控制按钮