<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document2</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.main {
width: 980px;
margin: 0 auto;
}
.top {
background: url("images/logo.jpg") no-repeat;
background-position: 50px;
height: 56px;
line-height: 56px;
margin-top: 10px;
}
.top .user {
float: right;
margin-right: 50px;
}
.top .user a {
color: #FF9C00;
text-decoration: none;
}
.nav {
background-color: #FF9C00;
height: 46px;
margin-top: 10px;
text-align: center;
line-height: 46px;
font-size: 16px;
}
.navlist li {
display: inline-block;
height: 100%;
}
.navlist li a {
height: 100%;
padding: 0 25px;
color: #B55F23;
text-decoration: none;
display: inline-block;
}
.navlist li a:hover {
background-color: #fca76a;
}
.banner {
height: 432px;
background: url("./images/banner.jpg") no-repeat center;
background-size: cover;
}
.infobox {
height: 160px;
background-color: #E7BF80;
}
.infobox ul {
text-align: center;
}
.infobox ul li {
width: 120px;
height: 120px;
border-radius: 50%;
display: inline-block;
margin: 0 20px;
margin-top: 20px;
overflow: hidden;
position: relative;
}
.infobox ul li .icon {
width: 120px;
position: absolute;
left: 0;
}
.infobox ul li .title {
color: #A47167;
position: absolute;
text-align: center;
top: 76px;
width: 100%;
}
.shoplist {
background-color: #F8F5BC;
padding: 50px 80px;
padding-bottom: 60px;
}
.shoplist ul {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.shoplist .item {
flex: 20%;
background-color: #fff;
border: 1px solid #ddd;
padding: 10px;
box-sizing: border-box;
}
.shoplist .item img {
width: 100%;
}
.shoplist .item .title,.shoplist .item .price {
color: #A47167;
margin-top: 5px;
}
.shoplist .item .name,.shoplist .item .price span {
color: #FDA6A0;
margin-top: 5px;
}
.footer {
height: 120px;
line-height: 120px;
text-align: center;
color: #fff;
background: url("./images/footer.png") repeat-x;
margin-top: -10px;
}
</style>
</head>
<body>
<div class="main">
<div class="top">
<div class="user">
<a href="#">登录 |</a>
<a href="#">注册</a>
</div>
</div>
<div class="nav">
<ul class="navlist">
<li><a href="#">首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">美食甜品</a></li>
<li><a href="#">用户留言</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div class="banner"></div>
<div class="infobox">
<ul>
<li>
<img class="icon" src="./images/list1.png" alt="">
<p class="title">提拉米苏</p>
</li>
<li>
<img class="icon" src="./images/list2.png" alt="">
<p class="title">甜甜圈</p>
</li>
<li>
<img class="icon" src="./images/list3.png" alt="">
<p class="title">芝士蛋糕</p>
</li>
<li>
<img class="icon" src="./images/list4.png" alt="">
<p class="title">马卡龙</p>
</li>
<li>
<img class="icon" src="./images/list5.png" alt="">
<p class="title">西式甜点</p>
</li>
</ul>
</div>
<div class="shoplist">
<ul>
<li class="item">
<img src="./images/con1.jpg" alt="">
<p class="title">爱的N次方</p>
<p class="name">马卡龙</p>
<p class="price">价格：<span>30元</span></p>
</li>
<li class="item">
<img src="./images/con2.jpg" alt="">
<p class="title">果肉果冻</p>
<p class="name">双色马卡龙</p>
<p class="price">价格：<span>30元</span></p>
</li>
<li class="item">
<img src="./images/con3.jpg" alt="">
<p class="title">芒果味</p>
<p class="name">补丁马卡龙</p>
<p class="price">价格：<span>30元</span></p>
</li>
<li class="item">
<img src="./images/con4.jpg" alt="">
<p class="title">果冻荔枝味</p>
<p class="name">多彩马卡龙</p>
<p class="price">价格：<span>30元</span></p>
</li>
<li class="item">
<img src="./images/con5.jpg" alt="">
<p class="title">果冻巧克力</p>
<p class="name">西式甜点</p>
<p class="price">价格：<span>30元</span></p>
</li>
<li class="item">
<img src="./images/con6.jpg" alt="">
<p class="title">流动水果</p>
<p class="name">提拉米苏</p>
<p class="price">价格：<span>30元</span></p>
</li>
<li class="item">
<img src="./images/con7.jpg" alt="">
<p class="title">玫瑰花型</p>
<p class="name">马卡龙</p>
<p class="price">价格：<span>30元</span></p>
</li>
<li class="item">
<img src="./images/con8.jpg" alt="">
<p class="title">木买奶油</p>
<p class="name">芝士蛋糕</p>
<p class="price">价格：<span>30元</span></p>
</li>
</ul>
</div>
<div class="footer">
西式甜点网版权所有2000-2016京ICP备08001421号 京公网安备110108007702
</div>
</div>
</body>
</html>