首先看一下成品
演示页面
https://pai-daxing1.github.io/weixin/
项目结构：
HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>啦啦啦好像biu点什么</title> <meta name="author" content="海拥CSDN博客" /> <meta name="keywords" content="海拥CSDN博客" /> <link rel="shortcut icon" href="https://wanghao221.github.io/favicon.ico" /> <link rel="stylesheet" href="style/css/jquery.fullPage.css" /> <link rel="stylesheet" href="style/css/base.css" /> <link rel="stylesheet" href="style/css/welcome.css" /> <link rel="stylesheet" href="style/css/jquery.bxslider.css"> <script src="style/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="style/js/jquery.fullPage.min.js"></script> <script type="text/javascript" src="style/js/jquery.bxslider.js"></script> <script type="text/javascript" src="style/js/main.js"></script> <script type="text/javascript"> $(document).ready(function() { my_section1.init(); $('#welcome').fullpage({ 'verticalCentered': false, 'css3': true, 'sectionsColor': ['#6cbb52','#e89c38', '#40a3e1'], 'navigation': true, 'navigationPosition': 'right', //'easing' : 'easeInOutBounce', 'afterRender' : function (index,anchorLink ) { $(".iphone_img").addClass('fadeInTop'); }, 'afterSlideLoad':function(index ) { } , 'afterLoad': function(anchorLink, index){ if( index == 2) { $(".iphone_img").removeClass('fadeInTop'); } if(index==3){ my_section1.init(); } if(index==1){ my_section1.init(); } if(index==2){ my_section2.init(); } }, 'onLeave': function(index, nextIndex, direction){ if( nextIndex == 1 ) { $(".iphone_img").addClass('fadeInTop'); } if(index==1){ my_section1.anim(); } if(index==3){ my_section1.anim(); } if(index==2){ my_section2.anim(); } } }); }); </script> </head> <body> <div id="welcome"> <div class="section" id="section0"> <div class="my_section"> <div class="my_codoon fl"> <div class="text1_box"> <div class="text1 fl">公众号：</div><div class="text3 fl">啦啦啦好像biu点什么</div> <div class="blank0"></div> </div> <p><div class="text2">全中国最大的微信公众平台！</div></p> <div class="download_box"> <div class="left"> <div class="icon erweima"></div> </div> <div class="right"> <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI1ODIxNzI3OA==&scene=122&from=timeline&isappinstalled=0#wechat_redirect" class="item pc_download item_pc" style="margin-bottom:15px;">iPhone版下载</a> <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI1ODIxNzI3OA==&scene=122&from=timeline&isappinstalled=0#wechat_redirect" class="item pc_download item_pc">Andriod版下载</a> <a class="item mobile_download mobile_icon"><img src="style/images/now_download.png" alt="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI1ODIxNzI3OA==&scene=122&from=timeline&isappinstalled=0#wechat_redirect"></a> </div> <div class="blank10"></div> </div> </div> <div class="iphone fr"> <div class="iphone_icon iphone_img"> <div id="iphone_slider_wrapper"> <div id="iphone_slider"> <ul id="iphone_slider_ul"> <li><img src="style/images/iphone1.png"></li> <li><img src="style/images/iphone2.png"></li> <li><img src="style/images/iphone3.png"></li> <li><img src="style/images/iphone4.png"></li> <li><img src="style/images/iphone5.png"></li> <li><img src="style/images/iphone6.png"></li> </ul> </div> </div> <img class="iphone_xxoo" src="style/images/iphone_xxoo.png"> </div> </div> <div class="blank0"></div> </div> </div> <div class="section" id="section1"> <div class="my_section "> <div class="rom_txt fr"> <h2 class="bigtit">那些事</h2> <p class="notes">关注发展，分享精彩</p> <div class="blank10"></div> <ul class="clearfix"> <li>旅游</li> <li>景点</li> <li>文化</li> <li>黄金沙滩</li> <li>旅游攻略</li> <li>旅游网</li> </ul> <div><a class="rom_download mobile_icon" href="http://www.toutiao.com/m52334417813/"><img src="style/images/download.png" alt=""></a></div> </div> <div class="cod_rom fl"> <img src="style/images/rom1.png" alt=""> <img src="style/images/rom2.png" alt=""> <img src="style/images/rom3.png" alt=""> <img src="style/images/rom4.png" alt=""> <img src="style/images/rom5.png" alt=""> <img src="style/images/rom6.png" alt=""> <img src="style/images/rom7.png" alt=""> <img src="style/images/rom8.png" alt=""> <img src="style/images/rom9.png" alt=""> <img src="style/images/rom10.png" alt=""> </div> <div class="blank0"></div> </div> </div> <div class="section" id="section2"> <div class="my_section"> <div class="rom_txt fl souhuan"> <h2 class="bigtit">那些事</h2> <p class="notes">掌控生活，旅游资讯，吃喝玩乐</p> <ul class="clearfix"> <li>旅游景点</li> <li>旅游攻略</li> <li>妈祖文化</li> <li>酒店</li> <li>风景</li> <li>莆田</li> </ul> <div><a class="rom_download mobile_icon" id="buy" href="http://kuaibao.qq.com/s/MEDIANEWSLIST?chlid=5371135&from=singlemessage&isappinstalled=1"><img src="style/images/buy_smartband.png" alt=""></a></div> </div> <div class="shouhuanImg fr"> <img src="style/images/shouhuan.png" alt=""> </div> </div> </div> </div> <div class="fixed head"> <div class="head_content"> <div class="icon logo logo_blue fl" style="width: 193px; height: 46px"></div> <div class="fr login_box"> <a href="#" class="">微信号</a> <span class="">|</span> <a href="#" class="">wh1836360</a> </div> </div> <div class="line"></div> </div> <div class="fixed bottom"> <div class="bottom_content"> <a href="/about/aboutus/">关于我们</a> <span>|</span> <a href="/about/ad/">广告合作</a> <label class="bottom_tips"> <span>|</span> <a href="/about/copyright/">免责声明</a> <span>|</span> <a href="/about/contact/">联系我们</a> </label> <br /> <p>Copyright © 1999-2021 那些事 来源:<a href="https://blog.csdn.net/qq_44273429/" target="_blank">海拥CSDN</a></p> </div> </div> </body> </html>
部分CSS代码
body,html { font-family: "微软雅黑"; font-size: 14px; } .fixed { position: fixed } html { width: 100%; height: 100%; } .icon { background: url(img/icon.png) no-repeat; overflow: hidden; } .iphone_icon { background: url(img/iphone.png) no-repeat; } .download_box .item_pc { text-align: center!important; border: 1px solid #fff; } .head { top: 0px; left: 0px; width: 100%; height: 57px; padding-top: 10px; border-bottom: 1px solid rgba(48, 48, 48,0.14); overflow: hidden; } .head .head_content { width: 74%; max-width: 1000px; height: 57px; margin: 0 auto; } .head .login_box, .head .login_box a { color: #fff; margin-right: 10px; font-size: 105%; } .head .login_box { margin-top: 2%; margin-right: 3%; } .head .login_box span { margin-right: 10px; } .head .logo { width: 113px; height: 46px; background: url(img/logo.png) no-repeat; } .head .logo_blue { } .head .logo_green { background-position: -11px -61px; } .bottom { width: 100%; bottom: 10px; } .bottom .bottom_content { width: 74%; max-width: 1045px; margin: 0 auto; } .bottom a, .bottom span { float: left; margin-right: 5px; color: #000000; font-size: 10px; opacity: .4; } .bottom p { font-size: 12px; opacity: .4; } .my_section { width: 74%; max-width: 1000px; margin: 0 auto; padding-top: 64px; position: relative; transform:scale(1); -webkit-transform:scale(1); -moz-transform-origin:top left; }
完整代码已打包上传
方法一：CSDN资源下载：https://download.csdn.net/download/qq_44273429/14978410
