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

来源：互联网发布：服务器自动备份软件编辑：程序博客网时间：2024/05/16 07:34

一.效果图

二。首页参考源码

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="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/

阅读全文

0 0