简易版移动端智能家居前端实现--WEUI

一.效果图

二。首页参考源码

home.html

   

       

MY HOME

       

       

       
             
           

               
               

               

TEMPHUMI

             
             
             
           

               
               

               

LIGHT

             
             
           

               
               

               

MOTOR

             
             
           

               
                
               

               

SMOKE ALARM

             
               
           

               
                    
               

               

ULTRASONICUL

             
               
           

               
               

               

TIMER

             
 
          
           
       

         
          


     

  
       
         

           
         

         

首页

       
       
         

           
         

         

帮助

       
       
       
         

           
         

         

我

       
     

   

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/