网站顶部3D立体广告图片展示特效代码

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代艨位雅剖码。<div id="page"><h1 id=媪青怍牙"logoh1"> </h1><div id="phoneCarousel"> <div class="previous arrow"></div> <div class="next arrow"></div> <div id="stage"> <img id="iphone" class="default" src="images/phones/iphone.png" width="270" height="400"/> <img id="nexus" src="images/phones/nexus_one.png" width="270" height="400" /> <img id="nokia" src="images/phones/nokia.png" width="270" height="400"/> <img id="blackberry" src="images/phones/blackberry.png" width="270" height="400" /> </div></div></div>

4、书写css代码。* { margin: 0; padding: 0; }body { font-siz髫潋啜缅e: 14px; color: #515151; background: url('../images/bg.png') repeat-x #f6f8f9; font-family: 'Myriad Pro', Arial, Helvetica, sans-serif; }#logoh1 { margin: 40px 0 0; }#page { width: 1000px; min-height: 700px; margin: 0 auto; background: url('../images/bokeh.jpg') no-repeat 0 120px; position: relative; padding-top: 1px; }#phoneCarousel { height: 390px; margin: 90px auto 120px; position: relative; width: 800px; }#phoneCarousel .arrow { width: 44px; height: 44px; background: url('../images/arrows.png') no-repeat; position: absolute; top: 50%; margin-top: -22px; left: 0; cursor: pointer; }#phoneCarousel .next { background-position: right top; left: auto; right: 0; }#phoneCarousel .arrow:hover { background-position: left bottom; }#phoneCarousel .next:hover { background-position: right bottom; }#logo { background: url('../images/logo.png') no-repeat; height: 40px; text-indent: -9999px; width: 210px; display: block; }#stage { left: 50%; margin-left: -350px; position: absolute; width: 700px; height: 100%; }#stage img { display: none; }#stage .default { display: block; left: 50%; margin-left: -135px; position: absolute; }#stage .animationReady { display: block; position: absolute; top: 0; left: 0; }.text { margin-top: 70px; width: 700px; }.text p, .text h3 { padding-bottom: 15px; line-height: 1.4; text-align: justify; }.text h3 { font-size: 30px; }.text p { font-size: 20px; }.thumb { float: left; margin-right: 40px; }.availableAppStore { float: right; }h2 { font-size: 22px; font-style: italic; font-weight: normal; position: absolute; right: 0; top: 52px; }h2 a { color: #666666; }#thanks { color: #aaa; font-size: 12px; text-align: center; padding: 50px; }#thanks a { color: #888; }a, a:visited { text-decoration: none; outline: none; }a:hover { text-decoration: underline; }a img { border: none; }

5、书写并添加js代码。<script src="1.4.2/jquery.min.js"></script><script src="js/script.js"></script>js包，可以网上下载。

6、代码整体结构。

7、查看效果。