没有实现具体的功能 主要是学习了一下灵活布局
代码奉上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美团网</title>
<link rel="stylesheet" href="./css/iconfont.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/iconfont2.css">
</head>
<body>
<header>
<div class="navbar">
<div class="navbar-left">
<span class="nav-city">湖北 <i class="icon-downarrow"></i></span>
</div>
<div class="nav-search">
<input type="text" placeholder="请输入商家名、品类或者商圈">
</div>
</div>
</header>
<main>
<div class="banner">
<img src="images/download_banner.png" alt="广告图">
</div>
<nav class="navlist">
<ul>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont meishi" style="background:#fd9d21"></span>
<span class="nav-des">美食</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont dianying" style="background:#ff6767"></span>
<span class="nav-des">电影</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont jiudian" style="background:#8a90fa"></span>
<span class="nav-des">酒店</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont xiuxianyule" style="background:#fde030"></span>
<span class="nav-des">休闲娱乐</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont waimai" style="background:#fd9d21"></span>
<span class="nav-des">外卖</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont ktv" style="background:#fde030"></span>
<span class="nav-des">KTV</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont zhoubianyou" style="background:#4dc6ee"></span>
<span class="nav-des">周边游</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont liren" style="background:#ff80c2"></span>
<span class="nav-des">丽人</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont xiaochikuaican" style="background:#fd9d21"></span>
<span class="nav-des">小吃快餐</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont quanbu" style="background:#00d3be"></span>
<span class="nav-des">全部分类</span>
</a>
</li>
</ul>
</nav>
<div class="pintuan boxWrapper">
<h4 class="title">附近拼团</h4>
<div class="box-list">
<div class="box-item">
<img src="images/food.jpg" alt="美食团">
<div class="item-title">牛小灶牛腩牛杂煲</div>
<div class="price">
<span class="strong">¥129</span>
<span class="line-price">¥198</span>
</div>
</div>
<div class="box-item">
<img src="images/ktv.jpg" alt="KTV">
<div class="item-title">好声音KTV欢唱4小时限时优惠</div>
<div class="price">
<span class="strong">¥69</span>
<span class="line-price">¥299</span>
</div>
</div>
</div>
</div>
<div class="guesslike">
<div class="title">- 猜你喜欢 -</div>
<ul class="list">
<li class="guessItem">
<a href="#" class="item-href">
<div class="item-box">
<div class="item-img">
<img src="images/food.jpg" alt="预览图">
</div>
<div class="item-des">
<div class="item-name">牛小灶牛腩牛杂煲</div>
<div class="item-title">[5店通用]2人套餐,提供免费wifi</div>
<div class="price">
<span class="strong">¥129</span>
<span class="retail">门市价:¥159</span></br>
<span class="selNum">已售:30859</span>
</div>
</div>
</div>
</a>
</li>
<li class="guessItem">
<a href="#" class="item-href">
<div class="item-box">
<div class="item-img">
<img src="images/food.jpg" alt="预览图">
</div>
<div class="item-des">
<div class="item-name">牛小灶牛腩牛杂煲</div>
<div class="item-title">[5店通用]2人套餐,提供免费wifi</div>
<div class="price">
<span class="strong">¥129</span>
<span class="retail">门市价:¥159</span></br>
<span class="selNum">已售:30859</span>
</div>
</div>
</div>
</a>
</li>
<li class="guessItem">
<a href="#" class="item-href">
<div class="item-box">
<div class="item-img">
<img src="images/food.jpg" alt="预览图">
</div>
<div class="item-des">
<div class="item-name">牛小灶牛腩牛杂煲</div>
<div class="item-title">[5店通用]2人套餐,提供免费wifi</div>
<div class="price">
<span class="strong">¥129</span>
<span class="retail">门市价:¥159</span></br>
<span class="selNum">已售:30859</span>
</div>
</div>
</div>
</a>
</li>
<li class="guessItem">
<a href="#" class="item-href">
<div class="item-box">
<div class="item-img">
<img src="images/food.jpg" alt="预览图">
</div>
<div class="item-des">
<div class="item-name">牛小灶牛腩牛杂煲</div>
<div class="item-title">[5店通用]2人套餐,提供免费wifi</div>
<div class="price">
<span class="strong">¥129</span>
<span class="retail">门市价:¥159</span></br>
<span class="selNum">已售:30859</span>
</div>
</div>
</div>
</a>
</li>
<li class="guessItem">
<a href="#" class="item-href">
<div class="item-box">
<div class="item-img">
<img src="images/food.jpg" alt="预览图">
</div>
<div class="item-des">
<div class="item-name">牛小灶牛腩牛杂煲</div>
<div class="item-title">[5店通用]2人套餐,提供免费wifi</div>
<div class="price">
<span class="strong">¥129</span>
<span class="retail">门市价:¥159</span></br>
<span class="selNum">已售:30859</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</main>
<footer>
<nav>
<ul class="nav-menu">
<li class="nav-item">
<a href="#" class="active">
<i class="iconfont2 iconshouye"></i>
<span>首页</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<i class="iconfont2 iconicon_order"></i>
<span>订单</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<i class="iconfont2 iconwode"></i>
<span>我的</span>
</a>
</li>
</ul>
</nav>
</footer>
</body>
</html>
*{
margin:0;
padding: 0;
}
body{
background: #f9f7f8;
padding: 45px 0 70px 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
header{
/* margin-bottom: 7px; */
position: fixed;
top: 0;
width: 100%;
margin-bottom: 5px;
}
.navlist{
padding-top: 15px;
}
.navbar{
display: flex;
background: #fff;
height: 40px;
color: black;
}
.navbar .navbar-left{
height: 40px;
line-height: 40px;
}
.navbar .nav-city{
font-size: 14px;
margin: 0 15px;
font-weight: bolder;
}
.icon-downarrow{
display: inline-block;
width: 6px;
height: 6px;
border-left: 2px solid black;
border-bottom: 2px solid black;
transform: rotate(-45deg);
margin: 0 0 3px 0;
}
.nav-search{
flex: 1;
background: #f3f3f3;
height: 30px;
line-height: 30px;
border-radius: 15px;
padding:0 25px;
margin: 5px 15px 0 0 ;
}
.nav-search input{
display: block;
width: 100%;
height: 100%;
background-color: transparent;
font-size: 14px;
border: none;
outline: none;
}
/* 广告图 */
.banner img{
width: 100%;
}
.banner{
margin: 7px;
background: #fff;
box-shadow: 0px 1px 5px rgba(0, 0,0, 0.2);
}
/* 导航菜单 */
.navlist{
background: #fff;
}
.navlist ul{
display: flex;
flex-wrap: wrap;
}
.navlist .nav-item{
flex: 0 0 20%;
text-align: center;
}
.nav-item .nav-icon{
display: block;
width: 40px;
height: 40px;
margin: auto;
border-radius: 50%;
background: #fd9121;
margin:10px auto;
color: #fff;
font-size: 25px;
line-height: 40px;
}
.nav-item .nav-des{
color :#333;
font-size:14px;
/* font-weight: 500; */
}
/* 拼团 */
.boxWrapper{
background: #ffffff;
margin-top: 10px;
padding: 5px;
}
.boxWrapper h4{
color: #333;
}
.box-item img{
width: 100%;
border-radius: 7px;
}
.box-list{
display: flex;
justify-content: space-between;
}
.box-list .box-item{
display: inline-block;
width: 47%;
margin: 5px 5px;
text-align: center;
}
.box-item .price .strong{
font-size:18px;
padding: 0 10px 0 0;
color: #f63;
}
.box-item .item-title{
font-size: 16px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: 0 15px;
}
.box-item .price .line-price{
font-size:14px;
text-decoration: line-through;
color: #666666;
}
.guesslike{
background: #fff;
margin-top: 10px;
padding: 0 10px ;
}
.guesslike .title{
text-align:center;
padding: 10px 0;
border-bottom: 1px solid #ddd8ce;
color: #666;
}
.guessItem .item-href{
display: block;
padding: 15px 0;
}
.guessItem .item-href .item-box{
display: flex;
}
.guessItem .item-img{
display: inline-block;
width: 120px;
height: 90px;
}
.item-img img{
width: 100%;
height: 100%;
}
.guessItem .item-des{
flex:1;
margin-left:10px;
}
.guessItem .item-name{
font-size: 18px;
color: #333;
margin-bottom: 8px;
}
.guessItem .item-title{
color: #666;
font-size: 15px;
margin-bottom: 12px;
}
.guessItem .price{
font-size: 14px;
color: #666;
position: relative;
}
.guessItem .price .strong{
font-size: 20px;
color: #ff0000;
}
.guessItem .price .strong::before{
/* content: '\A5'; */
font-size: 14px;
color: #f00;
margin-left: 5px;
}
.guessItem .price .selNum{
position: absolute;
font-size: 12px;
right:10px;
bottom: 4px;
}
.guesslike .guessItem{
border-bottom: 1.5px solid #ddd8ce;
}
/* 底部菜单 */
footer{
position: fixed;
bottom:0;
width: 100%;
background: #fff;
}
footer .nav-menu{
display: flex;
}
.nav-item{
flex:1;
text-align: center;
padding: 8px 0;
}
.nav-item a{
display: block;
color: #333;
}
.nav-item .iconfont2{
display: block;
font-size: 24px;
}
.nav-item .active{
color: #f63;
}
.nav-item span {
font-size: 14px;
}
项目很小 主要是练练手用的