一.效果图
二。首页参考源码
home.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>SmartHome</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="css/style2.css"> <link rel="stylesheet" href="css/weui.min.css"> <link rel="stylesheet" href="css/jquery-weui.css"> </head> <body ontouchstart> <div id="wrap"> <header class="home-header"> <h1 class="home-title">MY HOME</h1> </header> <div class="weui-grids"> <a href="temp.html" class="weui-grid js-grid" id="button1"> <div class="weui-grid__icon"> <img src="image/icon_nav_cell.png" alt=""> </div> <p class="weui-grid__label">TEMPHUMI</p> </a> <a href="light.html" class="weui-grid js-grid"> <div class="weui-grid__icon"> <img src="image/icon_nav_button.png" alt=""> </div> <p class="weui-grid__label">LIGHT</p> </a> <a href="light.html" class="weui-grid js-grid"> <div class="weui-grid__icon"> <img src="image/icon_nav_actionSheet.png" alt=""> </div> <p class="weui-grid__label">MOTOR</p> </a> <a href="light.html" class="weui-grid js-grid"> <div class="weui-grid__icon"> <img src="image/icon_nav_noti.png" alt=""> </div> <p class="weui-grid__label">SMOKE ALARM</p> </a> <a href="light.html" class="weui-grid js-grid"> <div class="weui-grid__icon"> <img src="image/icon_nav_panel.png" alt=""> </div> <p class="weui-grid__label">ULTRASONICUL</p> </a> <a href="light.html" class="weui-grid js-grid"> <div class="weui-grid__icon"> <img src="image/icon_nav_search_bar.png" alt=""> </div> <p class="weui-grid__label">TIMER</p> </a> </div> <!-- <div class="pagebottom2"> <h2>SMART HOME</h2> <p>your personal butler</p> </div>--> <div class="weui-tabbar"> <a href="#" class="weui-tabbar__item"> <div class="weui-tabbar__icon"> <img src="image/icon_nav_up.png" alt=""> </div> <p class="weui-tabbar__label">首页</p> </a> <a href="help.html" class="weui-tabbar__item"> <div class="weui-tabbar__icon"> <img src="image/icon_nav_article.png" alt=""> </div> <p class="weui-tabbar__label">帮助</p> </a> <a href="aboutus.html" class="weui-tabbar__item"> <div class="weui-tabbar__icon"> <img src="image/icon_nav_cell.png" alt=""> </div> <p class="weui-tabbar__label">我</p> </a> </div> </div> <script src="js/jquery-2.1.4.js"></script> <script src="js/fastclick.js"></script> <script> $(function() { FastClick.attach(document.body); }); </script> <script src="js/jquery-weui.js"></script> </body> </html>
style.css
@charset "utf-8"; body, html{ height:100%; } #wrap{ height:736px; background:url(../image/7.jpg); background-attachment:fixed; background-repeat:no-repeat; background-size:cover; background-position:center center; } .home-title{ text-align:center; font-size:24px; padding-top:150px; color:#333; letter-spacing:4px; } .weui-grids{ padding-top:100px; } .demos-header{ font-size:20px; font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; color:#FFf; } #wrap2{ height:636px; background:url(../image/15.jpg); background-attachment:fixed; background-repeat:no-repeat; background-size:cover; background-position:center center; padding-top:100px; } .show{ border:1px solid #444; height:200px; width:350px; margin-left:31px; } .weui-slider-box{ margin:auto; } .demos-header{ margin-top:40px; } #sliderValue{ color:#333; font-size:26px; } #sliderTrack{ height:10px; } #sliderInner{ height:10px; } .demos-content-padded{ padding-top:100px; } .pagebottom{ padding-top:145px; } .pagebottom h2{ border-top:1px solid #666; border-bottom:1px solid #666; text-align:center; font-size:20px; color:#666; } .pagebottom p{ text-align:center; font-size:16px; color:#666; letter-spacing:5px; } .pagebottom2{ padding-top:200px; } .pagebottom2 h2{ border-top:1px solid #666; border-bottom:1px solid #666; text-align:center; font-size:20px; color:#666; } .pagebottom2 p{ text-align:center; font-size:16px; color:#666; letter-spacing:5px; } .wrap4{ height:736px; background:url(../image/7.jpg); background-attachment:fixed; background-repeat:no-repeat; background-size:cover; background-position:center center; } .wrap3{ height:736px; background:url(../image/7.jpg); background-attachment:fixed; background-repeat:no-repeat; background-size:cover; background-position:center center; }
此代码仅为首页的html css代码，本人为初学者，做得很简单的一个小东西，希望与大家分享，正在学习前端的小盆友们，一起努力啊
学习WEUI请参考http://jqweui.com/
