本文主要是介绍【唯美官网上线倒计时引导页html5源码】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
唯美官网上线倒计时引导页html5源码
- 效果图
- 部分源码
- 领取源码
- 下期更新预报
效果图
部分源码
index.html
<!doctype html><html class="no-js" lang="en"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"><!-- Page Title Here --><title>唯美官网上线倒计时引导页html5源码</title><!-- Page Description Here --><meta name="description" content="孤独"><!-- Disable screen scaling--><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, user-scalable=0"><!-- Place favicon.ico and apple-touch-icon(s) in the root directory --><!-- Initializer --><link rel="stylesheet" href="./css/normalize.css"> <!-- Web fonts and Web Icons --><link rel="stylesheet" href="./css/pageloader.css"><link rel="stylesheet" href="./fonts/opensans/stylesheet.css"><link rel="stylesheet" href="./fonts/asap/stylesheet.css"><link rel="stylesheet" href="./css/ionicons.min.css"><!-- Vendor CSS style --><link rel="stylesheet" href="./css/foundation.min.css"><link rel="stylesheet" href="./js/vendor/jquery.fullPage.css"><link rel="stylesheet" href="./js/vegas/vegas.min.css"><!-- Main CSS files --><link rel="stylesheet" href="./css/main.css"><link rel="stylesheet" href="./css/main_responsive.css"><link rel="stylesheet" href="./css/style-font1.css"><script src="./js/vendor/modernizr-2.7.1.min.js"></script></head><body id="menu" class="alt-bg"><!--[if lt IE 8]><p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="自己的域名">upgrade your browser</a> to improve your experience.</p><![endif]--><!-- Page Loader --><div class="page-loader" id="page-loader"><div><i class="ion ion-loading-d"></i><p>加载中</p></div></div><!-- BEGIN OF site header Menu --><!-- Add "material" class for a material design style --><header class="header-top">
<!-- <header class="header-top material">--><div class="logo"><a href="#home"><img src="img/logo_large.png" alt="Logo Brand"></a></div><div class="menu clearfix"><a href="#about-us">关于</a><!-- Add other menu similar to "about" here --><a href="#contact">合作</a></div></header><!-- END OF site header Menu--><!-- BEGIN OF Quick nav icons at left --><nav class="quick-link count-6 nav-left"><ul id="qmenu"><li data-menuanchor="home"><a href="#home" class=""><i class="icon ion ion-home"></i></a><span class="title">首页</span></li><li data-menuanchor="when"><a href="#when" class=""><i class="icon ion ion-android-alarm"></i></a><span class="title">倒计时</span></li><li data-menuanchor="register"><a href="#register"><i class="icon ion ion-compose"></i></a><span class="title">留言</span></li><li data-menuanchor="about-us"><a href="#about-us"><i class="icon ion ion-android-information"></i></a><span class="title">关于</span></li><li data-menuanchor="contact"><a href="#contact"><i class="icon ion ion-android-call"></i></a><span class="title">合作</span></li><li data-menuanchor="contact"><a href="#contact/message"><i class="icon ion ion-email"></i></a><span class="title">发信</span></li></ul></nav><!-- END OF Quick nav icons at left --><!-- BEGIN OF site cover --><div class="page-cover" id="home"><!-- Cover Background --><div class="cover-bg pos-abs full-size bg-img" data-image-src="img/bg-default.jpg"></div><!-- BEGIN OF Slideshow Background --><!--<div class="cover-bg pos-abs full-size slide-show"><i class='img' data-src='./img/bg-slide1.jpg'></i><i class='img' data-src='./img/bg-slide2.jpg'></i><i class='img' data-src='./img/bg-slide3.jpg'></i><i class='img' data-src='./img/bg-slide4.jpg'></i></div>--><!-- END OF Slideshow Background --><!--BEGIN OF Static video bg - uncomment below to use Video as Background--><!--<div id="container" class="video-container show-for-medium-up"><video autoplay="autoplay" loop="loop" autobuffer="autobuffer" muted="muted"width="640" height="360"><source src="vid/flower_loop.mp4" type="video/mp4"></video></div>--><!--END OF Static video bg--><!-- Solid color as background -->
<!-- <div class="cover-bg pos-abs full-size bg-color" data-bgcolor="rgba(51, 2, 48, 0.12)"></div>--><!-- Solid color as filter -->
<!-- <div class="cover-bg-mask pos-abs full-size bg-color" data-bgcolor="rgba(62, 24, 219, 0.41)"></div>--></div><!--END OF site Cover --><!-- BEGIN OF site main content content here --><main class="page-main" id="mainpage"> <!-- Begin of home page --><div class="section page-home page page-cent" id="s-home"><!-- Logo --><div class="logo-container"><img class="h-logo" src="img/logo_only.png" alt="Logo"></div><!-- Content --><section class="content"><header class="header"><div class="h-left"><h2>即将 <strong>上线</strong></h2></div><div class="h-right"><h3>孤独博客<br>Tigh</h3><h4 class="subhead"><a href="#when">为了更好的遇见</a></h4></div></header></section><!-- Scroll down button --><footer class="p-footer p-scrolldown"><a href="#when"><div class="arrow-d"><div class="before">Page down</div><div class="after">ComeBack</div><div class="circle"></div></div></a> </footer></div><!-- End of home page --><!-- Begin of timer page --><div class="section page-when page page-cent" id="s-when"><section class="content"><div class="clock clock-countdown"><div class="site-config"data-date="05/11/2019" data-date-timezone="+0"></div><header class="header">即将 <strong>揭秘</strong></header><div class="elem-left"><div class="digit hours">00</div><div class="text">小时</div></div> <div class="elem-center"><!-- Optional text at top or image logo --><!--<span class="text top">here in</span>--><!-- Optional logo at top --><span class="text top"><img class="img" alt="Logo" src="img/logo_large.png"></span><div class="digit days">10</div><div class="text">天</div></div><div class=" elem-right"><div class="digit minutes">00</div><div class="text">分钟</div></div><!-- second knob here --><div class="second"><input class="knob container" id="second-knob"data-width="400"data-height="400"data-displayInput=falsedata-fgColor="#fff"data-bgColor="rgba(255,255,255,0)"data-thickness=".07"value="0"data-displayPrevious=truedata-max="6000"/></div></div> </section> <footer class="p-footer p-scrolldown"><a href="#register"><div class="arrow-d"><div class="before">Page down</div><div class="after">ComeBack</div><div class="circle"></div></div></a> </footer></div><!-- End of timer page --><!-- Begin of register page --><div class="section page-register page page-cent" id="s-register"><section class="content"><header class="p-title"><h3>通知 <i class="ion ion-compose"></i></h3> </header><div><form id="mail-subscription" class="form magic send_email_form" method="get" action="ajaxserver/serverfile.php"><p class="invite center">项目上线之初，将会发邮件给您</p><div class="fields clearfix"><div class="input"><label for="reg-email">您的邮箱 </label><input id="reg-email" class="email_f" name="email" type="email" required placeholder="邮箱地址：例如：您的QQ号@qq.com" data-validation-type="email"></div><div class="buttons"><button id="submit-email" class="button email_b" name="submit_email">提交</button></div></div><p class="email-ok invisible"><strong>感谢</strong> 您的订阅~！</p></form></div></section><footer class="p-footer p-scrolldown"><a href="#about-us"><div class="arrow-d"><div class="before">Page down</div><div class="after">ComeBack</div><div class="circle"></div></div></a> </footer></div><!-- End of register page --><!-- Begin of about us page --><div class="section page-about page page-cent" id="s-about-us"><section class="content"><header class="p-title"><h3>关于 我们<i class="ion ion-android-information"></i></h3> <h2><span class="bold">A</span> crazy <span class="bold">boy</span> </h2></header><article class="text"><p>爱好，兴趣，发现好玩，制作好玩<strong>志同道合的小伙伴请联系我QQ：2465829308</p><p>主要业务：编程、游戏</p></article></section><footer class="p-footer p-scrolldown"><a href="#contact"><div class="arrow-d"><div class="before">Page down</div><div class="after">ComeBack</div><div class="circle"></div></div></a> </footer></div><!-- End of about us page --><!-- Begin of Contact page --><div class="section page-contact page page-cent bg-color" data-bgcolor="rgba(95, 25, 208, 0.88)s" id="s-contact"><!-- Begin of contact information --><div class="slide" id="information" data-anchor="information"><section class="content"><header class="p-title"><h3>商务合作<i class="ion ion-location"></i></h3><ul class="buttons"><li class="show-for-medium-up"><a title="About" href="#about-us" ><i class="ion ion-android-information"></i></a></li><!--<li><a title="Contact" href="#contact/information"><i class="ion ion-location"></i></a></li>--><li><a title="Message" href="#contact/message"><i class="ion ion-email"></i></a></li></ul></header><!-- Begin Of Page SubSction --><div class="contact"><div class="row"><div class="medium-6 columns left"><ul><li><h4>Email</h4><p><a href="mailto://2465829308@qq.com">2465829308@qq.com</a></p></li><li><h4>地址</h4><p>新疆<br>喀什市</p></li><li><h4>QQ/WX</h4><p>12345</p></li></ul></div><div class="medium-6 columns social-links right"><ul><!-- legal notice --><li class="show-for-medium-up"><h4>孤独博客</h4><p><a href="自己的域名"www.vip616.cn</a></p></li><li class="show-for-medium-up"><h4></h4><!-- Begin of Social links --><div class="socialnet"><a href="#"><i class="ion ion-social-qq"></i></a></div><!-- End of Social links --></li><li><p><img src="img/logo_large.png" alt="Logo" class="logo"></p><p class="small"> by <strong><a href="http://www.baidu.com/">百度认证</a></strong>. All right reserved 2019</p></li></ul></div></div></div><!-- End of page SubSection --></section> </div><!-- end of contact information --><!-- begin of contact message --> <div class="slide" id="message" data-anchor="message"><section class="content"><header class="p-title"><h3>留言<i class="ion ion-email"></i></h3><ul class="buttons"><li class="show-for-medium-up"><a title="About" href="#about-us"><i class="ion ion-android-information"></i></a></li><li><a title="Contact" href="#contact/information"><i class="ion ion-location"></i></a></li><!--<li><a title="Message" href="#contact/message"><i class="ion ion-email"></i></a></li>--></ul></header><!-- Begin Of Page SubSction --><div class="page-block c-right v-zoomIn"><div class="wrapper"><div><form class="message form send_message_form" method="get" action="ajaxserver/serverfile.php"><div class="fields clearfix"><div class="input"><label for="mes-name">姓名 </label><input id="mes-name" name="name" type="text" placeholder="姓名" required></div><div class="buttons"><button id="submit-message" class="button email_b" name="submit_message">Ok</button></div></div><div class="fields clearfix"><div class="input"><label for="mes-email">邮箱 </label><input id="mes-email" type="email" placeholder="邮箱" name="email" required></div></div><div class="fields clearfix no-border"><label for="mes-text">内容 </label><textarea id="mes-text" placeholder="内容" name="message" required></textarea><div><p class="message-ok invisible">我们收到了您的邮件，感谢！</p></div></div></form></div></div></div><!-- End Of Page SubSction --></section></div><!-- End of contact message --></div><!-- End of Contact page --> </main><!-- END OF site main content content here --> <!-- Begin of site footer --><footer class="page-footer"><span>孤独</span></footer><!-- End of site footer --><!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>--><!-- All Javascript plugins goes here -->
<!-- <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>--><script src="./js/vendor/jquery-1.11.2.min.js"></script><!-- All vendor scripts --><script src="./js/vendor/all.js"></script><!-- Detailed vendor scripts --><!--<script src="./js/vendor/jquery.fullPage.min.js"></script><script src="./js/vendor/jquery.slimscroll.min.js"></script><script src="./js/vendor/jquery.knob.min.js"></script><script src="./js/vegas/vegas.min.js"></script><script src="./js/jquery.maximage.js"></script><script src="./js/okvideo.min.js"></script>--><!-- Downcount JS --><script src="./js/jquery.downCount.js"></script><!-- Form script --><script src="./js/form_script.js"></script><!-- Javascript main files --><script src="./js/main.js"></script><!-- Google Analytics: Uncomment and change UA-XXXXX-X to be your site"s ID. --><!--<script>(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src="//www.google-analytics.com/analytics.js";r.parentNode.insertBefore(e,r)}(window,document,"script","ga"));ga("create","UA-XXXXX-X");ga("send","pageview");</script>--></body>
</html>领取源码
唯美官网上线倒计时引导页html5源码
下期更新预报
一款背景带视频的个人炫酷引导页源码
- 📢博客主页：孤客网络科技工作室官方账号
- 📢欢迎点赞👍收藏⭐️留言 📝如有错误敬请指正！
- 📢本文由孤客原创，若侵权联系作者，首发于CSDN博客
- 📢停下休息的时候不要忘了别人还在奔跑，希望大家抓紧时间学习，全力奔赴更好的生活💻
这篇关于【唯美官网上线倒计时引导页html5源码】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
