新建html文档。

准备好需要用到的图标。

书写hmtl代码。

 

 

 

 

 

                    

 

书写css代码。* { margin: 0; padding: 0; }body { font-size: 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; }

书写并添加js代码。 js包，可以网上下载。

代码整体结构。

查看效果。