Tip: You can modify some of the code before running
<!doctype html> <ptml lang= "en" > <pead> <meta charset= "UTF-8" > <title>css Implementation Slide </ title> <style type= "Text/css" > A{color: #444; text-decoration:none; A:hover{color: #ff0000;} . slider-con{width:310px height:310px; overflow:hidden; margin:20px auto; . Slider-con div{position:relative; width:310px; height:310px;} . Slider-con div img{max-width:300px; height:auto; display:block; margin-bottom:20px;} . Slider-con Div{text-align:center;} </style> </pead> <body> <div class= "Slider-con" > <div id= "pic0" > Previous Next < /div> <div id= "Pic1" > previous next </div> <div id= "Pic2" > Previous next </div> </div> <style type= "text/css" > slide2-con{margin:0 auto; width:400px} . Slide2-con. slide2-box{width:400px; height:400px; overflow:hidden; margin:20px auto; . Slide2-con. slide2-box div{width:400px; height:400px;} . Slide2-con. Slide2-bOx div img{height:400px;} . slide2-nav A{display:inline-block; *display:inline; *zoom:1; width:40px; height:40px; margin-top:20px; . slide2-nav img{width:40px; height:40px;} </style> <div class= "Slide2-con" > <div class= "Slide2-box" > <div id= "a1" > </div> ; <div id= "A2" > </div> <div id= "A3" > </div> <div id= "A4" > </d iv> </div> <div class= "Slide2-nav clearfix" > Off </div> <div class= "Clear" &G t;</div> </div> <style type= "Text/css" > slide3-con{height:500px; width:750px; overflow:hidden; BAC Kground: #eee; margin:20px Auto;} . Slide3-con div{width:730px; height:480px; text-align:center; position:relative; padding:10px; Slide3-con. main-img{position:relative; z-index:2 text-align:center; margin:0 auto; border:10px solid #fff; width:4 80px; height:360px;} . Slide3-con Div. Pre,. Slide3-con Div. next{pOsition:absolute; left:10px; top:50%; margin-top:-60px; border:10px solid #fff; z-index:1;} . Slide3-con Div. Pre img,. Slide3-con Div. Next img{width:180px; Height:120px;filter:alpha (opacity=40) opacity:. 4; posi tion:relative; Display:block;} . Slide3-con Div. next{left:auto; right:10px;} . Slide3-con Div A:hover{z-index:3; . Slide3-con Div a:hover img{opacity:. 8; Filter:alpha (opacity=80); </style> <div class= "Slide3" > <div class= "Slide3-con" > <div id= "B1" > < H3> test Content </p> <p> Test Branch </p> </div> <div id= "B2" > <p> test Content </p> <p> Testing Branch </p> </div> <div id= "B3" > <p> test Content </p> ; <p> Test Branch </p> </div> </div> </div> <style type= "Text/css" >. SLIDE4 ul{width:120p x;position:relative; height:500px; margin:20px Auto;} . slide4 ul Li{float:left; list-style:none;} . slide4 ul Li img{width:30px; height:30px;} . slide4 ul B{position:absolute; left:-400px top:0; visibility:hidden;opacity:0; Filiter:alpha (opacity=0); Filter: Progid:DXImageTransform.Miscrosoft.Alpha (opacity=0); -webkit-transition:all 6s Ease-in-out;} . slide4 ul b img{width:300px; height:300px-webkit-transform:scale (0);-webkit-transition:-webkit-transform 6s Ease-in-out;} . slide4 ul li A:hover b{opacity:1; Filter:alpha (opacity=100); Filter:progid:DXImageTransform.Miscrosoft.Alpha ( OPACITY=100); visibility:visible;} . slide4 ul li A:hover b img{-webkit-transform:scale (1);} </style> <div class= "Slide4" > <ul> <li><b></b></li> <li><b> </b></li> <li><b></b></li> <li><b></b></li> </UL&G T </div> </body> </ptml></td> </tr> </table>
Tip: You can modify some of the code before running
