移动版点餐系统、微信导航栏
一、移动版点餐系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=2.0,width=device-width" >
<title>移动端</title>
<link rel="stylesheet" href="CSS/reset.css"/>
<link rel="stylesheet" href="CSS/iconfont.css"/>
<link rel="icon" href="images/title.ico"/> <!-- 引入图标-->
<link rel="stylesheet" href="CSS/index.css"/>
</head>
<body>
<!--导航栏开始-->
<div class="nav">
<div class="city">昆明<a href="city.html" class="iconfont"></a></div>
<div class="title">诚创纵横点餐系统一</div>
<div class="search"><a href="#" class="iconfont"></a></div>
</div>
<!--导航栏结束-->
<!--轮播图开始-->
<div class="carousel">
<img src="images/banner1.png" id="imgBox"/>
<div class="click">
<ul class="click_use" id="click">
<li onclick="change(0)"></li>
<li onclick="change(1)"></li>
<li onclick="change(2)"></li>
<li onclick="change(3)"></li>
<li onclick="change(4)"></li>
</ul>
</div>
</div>
<!--轮播图结束-->
<!--消息栏开始-->
<div class="massage">
<i class="iconfont"></i><span>唯有品尝才能告诉你一切!</span>
</div>
<div class="mess">
<div>
<img src="images/menu1.png"><br/>
立即订餐
</div>
<div>
<img src="images/menu2.png"><br/>
叫外卖
</div>
<div>
<img src="images/menu3.png"><br/>
餐厅定位
</div>
<div>
<img src="images/menu4.png"><br/>
健康主食
</div>
</div>
<!--消息栏结束-->
<!--推荐餐厅开始-->
<div class="tj_box">
<h3>推荐餐厅</h3>
<div class="tj">
<img src="images/shangjia2.png">
<div class="sj">
<a href="#">商家名称</a>
<p>人均:20.00 |10人预订</p>
<div class="start">
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
</div>
</div>
<div class="zi">订</div>
</div>
<h4>南屏街金乌坊</h4>
<div class="tj">
<img src="images/shangjia2.png">
<div class="sj">
<a href="#">商家名称</a>
<p>人均:20.00 |10人预订</p>
<div class="start">
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
</div>
</div>
<div class="zi">订</div>
</div>
<h4>南屏街金乌坊</h4>
<div class="tj">
<img src="images/shangjia2.png">
<div class="sj">
<a href="#">商家名称</a>
<p>人均:20.00 |10人预订</p>
<div class="start">
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
</div>
</div>
<div class="zi">订</div>
</div>
<h4>南屏街金乌坊</h4>
<div class="tj">
<img src="images/shangjia2.png">
<div class="sj">
<a href="#">商家名称</a>
<p>人均:20.00 |10人预订</p>
<div class="start">
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
</div>
</div>
<div class="zi">订</div>
</div>
<h4>南屏街金乌坊</h4>
<div class="tj">
<img src="images/shangjia2.png">
<div class="sj">
<a href="#">商家名称</a>
<p>人均:20.00 |10人预订</p>
<div class="start">
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
</div>
</div>
<div class="zi">订</div>
</div>
<h4>南屏街金乌坊</h4>
<div class="tj">
<img src="images/shangjia2.png">
<div class="sj">
<a href="#">商家名称</a>
<p>人均:20.00 |10人预订</p>
<div class="start">
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
</div>
</div>
<div class="zi">订</div>
</div>
<h4>南屏街金乌坊</h4>
</div>
<!--推荐餐厅结束-->
<!--页脚开始-->
<div class="footer">
<div>
<i class="iconfont"></i><br/>
首页
</div>
<div>
<i class="iconfont">󰁏</i><br/>
附近
</div>
<div>
<i class="iconfont"></i><br/>
我的
</div>
<div>
<i class="iconfont"></i><br/>
更多
</div>
</div>
<!--页脚结束-->
<script src="js/index.js"></script>
</body>
</html>
(index.css)
body{
background: url("../images/bg-img.png");
}
/*导航栏开始*/
.nav{
width: 100%;
height: 50px;
background-color: rgb(0,127,95);
display: flex; /*弹性盒子水平排列*/
position: fixed;
left: 0;
top: 0;
z-index: 88;
}
.city{
width: 64px;
height: 50px;
background-color: rgb(255,186,69);
float: left;
line-height: 50px;
color: white;
}
.city a{
color: white;
font-size: 14px;
}
.title{
height: 50px;
flex-grow:1;
line-height: 50px;
color: white;
font-size: 20px;
}
.search a{
width: 40px;
height: 50px;
color: white;
line-height: 50px;
font-size:25px;
}
/*导航栏结束*/
/*轮播图开始*/
.carousel{
position: relative;
}
.carousel img{
width: 100%;
}
.carousel .click{
position: absolute;
width: 100%;
height: 5%;
left: 0;
bottom: 5%;
}
.click_use{
width: 60%;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.click_use li{
width: 18%;
height: 100%;
background-color: rgb(0,127,95);
}
/*轮播图结束*/
/*消息栏开始*/
.massage{
height: 30px;
width: 100%;
background-color: #eeeeee;
margin-top: 10px;
line-height: 30px;
text-align: left;
padding:10px 0;
}
.massage i,span{
color: #817E5c;
}
.mess{
display: flex;
}
.mess div{
flex-grow: 1;
/*margin-top: 10px;*/
padding: 10px 0;
color: #b0b0b0;
}
.mess div img{
width: 45px;
height: 45px;
margin-bottom: 10px;
}
.mess div:first-child{
color: rgb(0,127,95);
}
/*消息栏结束*/
/*推荐餐厅栏开始*/
.tj_box h3{
height: 25px;
line-height: 25px;
text-align: left;
background-color:#eeeeee ;
padding-left: 15px;
}
.tj{
height: 80px;
background: white;
display: flex;
position: relative;
}
.tj img{
display: flex;
width: 70px;
margin: 0 10px;
}
.sj{
text-align: left;
}
.sj .start{
float: left;
}
.start i{
float: left;
color: red;
}
.start i:last-child{
color: #eeeeee;
}
.sj a{
color: black;
font-weight: bold;
font-size: 16px;
}
.tj_box h4{
height: 30px;
color: #A6A6A6;
background: #eeeeee;
font-size: 16px;
line-height: 30px;
text-align: left;
padding-left: 15px;
}
.tj .zi{
position: absolute;
width: 15px;
height: 15px;
background: rgb(0,127,95);
color: white;
top: 30px;
right: 10px;
}
.tj_box{
margin-bottom: 75px;
}
/*推荐餐厅栏结束*/
/*页脚开始*/
.footer{
width: 100%;
background-color: white;
display: flex;
position: fixed;
left: 0;
bottom: 0;
}
.footer>div{
flex-grow: 1;
margin: 5px 0;
font-size: 18px;
color: #a6a6a6;
}
.footer>div:first-child{
background-color: rgb(0,127,95);
}
.footer>div:hover{
background-color: rgb(0,127,95);
}
/*页脚结束*/
(reset.css)
a{
text-decoration: none;
}
ol,dl,li,ul{
list-style: none;
}
ol,dl,li,ul,div{
margin: 0px;
padding: 0px;
text-align: center;
color: #333;
font-size: 14px;
font-family: "宋体";
}
(iconfont.css)
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1492689152095'); /* IE9*/
src: url('iconfont.eot?t=1492689152095#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff?t=1492689152095') format('woff'), /* chrome, firefox */
url('iconfont.ttf?t=1492689152095') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1492689152095#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
页面显示:
二、微信导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微信导航栏(一)</title>
<style>
*{
margin: 0;
padding: 0;
}*
body{
background: url("images/wrap.jpg") repeat-x;
}
.box{
height: 75px;
}
ul{
list-style: none;
}
.box li a{
display: block;
background: url("images/lTcb_ve.png") no-repeat;
padding-left: 15px;
color: #fff;
font-size: 14px;
line-height: 33px;
text-decoration: none;
}
.box li a span{
display: block;
line-height: 33px;
background: url("images/lTcb_ve.png") no-repeat right center;
padding-right: 15px;
}
.box li a:hover{
background-image: url("images/ao.png") ;
}
.box li a:hover span{
background-image: url("images/ao.png") ;
}
.box li{
float: left;
margin: 0 10px;
padding-top: 21px;
}
<img src="../../../untitled/CSS3雪碧图、滑动门/images/ao.png" height="33" width="384"/>
.box .photo{
padding-left: 50px;
padding-top: 30px;
float:left;
}
</style>
</head>
<body>
<div class="box">
<ul type="none">
<li> <img src="images/weixin.PNG" class="photo"></li>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>帮助和反馈</span></a></li>
<li><a href="#"><span>公众平台</span></a></li>
<li><a href="#"><span>开放平台</span></a></li>
<li><a href="#"><span>微信支付</span></a></li>
<li><a href="#"><span>微信网页版</span></a></li>
<li><a href="#"><span>表情开发平台</span></a></li>
<li><a href="#"><span>微信广告</span></a></li>
</ul>
</div>
</body>
</html>
页面显示: