1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。<div id="slideShowContainer"> <div id="slideShow"> <ul> <li><img src="images/photos/1.jpg" width="100%" alt="Fish" /></li> <li><img src="images/photos/2.jpg" width="100%" alt="Ancient" /></li> <li><img src="images/photos/3.jpg" width="100%" alt="Industry" /></li> <li><img src="images/photos/4.jpg" width="100%" alt="Rain" /></li> </ul> </div> <a id="previousLink" href="#">»</a> <a id="nextLink" href="#">«</a> </div>
4、书写css代码。* { margin: 0; padding: 0; }html { background: url('../images/page_bg_tile.jpg') #202027; }body { color: #999; background-image: url('../images/contour.png'), url('../images/page_bg.jpg'); background-repeat: no-repeat, no-repeat; background-position: center 117px, center -200px; font: 15px Calibri, Arial, sans-serif; border: 1px solid transparent; }#slideShowContainer { width: 510px; height: 510px; position: relative; margin: 20px auto 50px; }#slideShow { position: absolute; height: 490px; width: 490px; background-color: #fff; margin: 10px 0 0 10px; z-index: 100; -moz-box-shadow: 0 0 10px #111; -box-shadow: 0 0 10px #111; box-shadow: 0 0 10px #111; }#slideShow ul { position: absolute; top: 15px; right: 15px; bottom: 15px; left: 15px; list-style: none; overflow: hidden; }#slideShow li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }#slideShowContainer > a { border: none; text-decoration: none; text-indent: -99999px; overflow: hidden; width: 36px; height: 37px; background: url('../images/arrows.png') no-repeat; position: absolute; top: 50%; margin-top: -21px; }#previousLink { left: -38px; }#previousLink:hover { background-position: bottom left; }a#nextLink { right: -38px; background-position: top right; }#nextLink:hover { background-position: bottom right; }.note { margin-bottom: 40px; text-align: center; }.credit { font-size: 12px; }.credit a { color: #bbb !important; }a, a:visited { text-decoration: underline; outline: none; color: #97CAE6; }a:hover { text-decoration: none; }
5、代码整体结构。
6、查看效果。
