First take a look at the finished product demo page
pai-daxing1.github.io/weixin/
Project Structure:
HTML code:
<! 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, the maximum - scale = 1.0, user - scalable = no"</title> <meta name="author" content="The CSDN blog of the Sea" />
<meta name="keywords" content="The CSDN blog of the Sea" />
<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 ><divclass="text3 fl"</div> <divclass="blank0"></div>
</div>
<p><div class="text2""> < p style =" max-width: 100%; clear: both; min-height: 1em; </div></p> <divclass="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#wec hat_redirect" class="item pc_download item_pc" style="margin-bottom:15px;"< p style = "max-width: 100%; clear: both; min-height: 1em"https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI1ODIxNzI3OA==&scene=122&from=timeline&isappinstalled=0#wec hat_redirect" class="item pc_download item_pc"> </a> <aclass="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#wec hat_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"> those things </h2> <pclass="notes"< p> <divclass="blank10"></div>
<ul class="clearfix"Travel > < li > < / li > < li > attractions < / li > < li > culture < / li > < li > gold beach < / li > < li > travel guide < / li > < li > travel network < / li > < / ul > < div > < aclass="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"> those things </h2> <pclass="notes"< p> <ulclass="clearfix"> < li > tourist attractions < / li > < li > travel guide < / li > < li > mazu culture < / li > < li > hotel < / li > < li > view < / li > < li > putian < / li > < / ul > < div > < aclass="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=""<span style = "max-width: 100%; clear: both; min-height: 1emclass="">|</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/"> about us < / a > < span > | < / span > < a href ="/about/ad/"> Advertising collaboration </a> <labelclass="bottom_tips">
<span>|</span>
<a href="/about/copyright/"> disclaimer < / a > < span > | < / span > < a href ="/about/contact/"> Contact us </a> </label> <br /> <p>Copyright ©1999-2021Those things source :<a href="https://blog.csdn.net/qq_44273429/" target="_blank"</a></p> </div> </div> </body> </ HTML >Copy the codePartial CSS code:
body.html {
font-family: Microsoft Yahei;
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;
}
Copy the codeThe complete code has been packaged and uploaded
Method: pay attention to the author’s public number [la la la want biu point what] reply [wechat public number display page template] free access
I will continue to update similar free fun H5 games, Java games, fun, practical projects and software, and so on
The related content
- Simple snow effects with HTML
- Brave rabbit crazy running games
- GitHub’s favorite download artifact :youtube-dl
- YouTube – DL installation and practical methods
- Build your own blog based on Hexo and GitHub
- Java backgammon game contains free source code
- Free and easy to use GIF recording software LICEcap
And finally, don’t forget ❤ or 📑