<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document1</title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
color: #666;
text-decoration: none;
}
.content {
width: 1280px;
margin: 0 auto;
}
.nav {
height: 600px;
background: url("images/bg.png") center;
background-size: cover;
}
.navlist {
padding: 30px 60px;
box-sizing: border-box;
text-align: center;
}
.navlist ul li {
float: left;
line-height: 60px;
padding: 0 50px;
font-size: 16px;
}
.seach {
position: relative;
width: 128px;
height: 36px;
margin-top: 12px;
}
.seach img {
height: 16px;
position: absolute;
top: calc(50% - 8px);
left: 10px;
z-index: 10;
}
.seach .input {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: none;
border-radius: 18px;
font-size: 12px;
padding-left: 32px;
box-sizing: border-box;
outline: none;
color: #666
}
.hot {
text-align: center;
margin-top: 20px;
}
.hotlist {
margin-top: 20px;
text-align: left;
padding: 0 60px;
box-sizing: border-box;
}
.hotlist .item .img img {
width: 100%;
}
.hotlist .item .title {
padding: 10px;
box-sizing: border-box;
font-weight: bold;
font-size: 18px;
color: #333;
border-bottom: 1px solid #ddd;
}
.hotlist .item .info {
padding: 10px;
padding-bottom: 30px;
color: #bbb;
box-sizing: border-box;
}
.hotlist {
display: flex;
gap: 80px;
}
.bottomimage img {
width: 100%;
}
.life {
background-color: #E1EBF2;
margin-top: 50px;
text-align: center;
padding: 30px 0;
}
.life ul {
text-align: center;
}
.life ul li {
display: inline-block;
margin: 20px 20px;
}
.footer {
height: 80px;
background: url("images/footer_bg.jpg");
color: #fff;
text-align: center;
line-height: 80px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="content">
<div class="nav">
<div class="navlist">
<ul>
<li>
<img class="logo" src="./images/logo.png" alt="">
</li>
<li><a href="#">网站首页</a></li>
<li><a href="#">床和床垫</a></li>
<li><a href="#">卧室纺织品</a></li>
<li><a href="#">灯具照明</a></li>
<li class="seach">
<img src="./images/f.png" alt="">
<input class="input" type="text" placeholder="输入商品名称">
<li>
</ul>
</div>
</div>
<div class="hot">
<img src="./images/dongtai.jpg" alt="">
<ul class="hotlist">
<li class="item">
<dt class="box">
<dd class="img">
<img src="./images/news1.jpg" alt="">
</dd>
<dd class="title">BEST贝达</dd>
<dd class="info">将杂乱无章的物品收纳到视线之外，在我怕门后要展示台的心爱之物！</dd>
<dd class="bottomimage"><img src="./images/yinying.jpg" alt=""></dd>
</dt>
</li>
<li class="item">
<dt class="box">
<dd class="img">
<img src="./images/news2.jpg" alt="">
</dd>
<dd class="title">BEST贝达</dd>
<dd class="info">将杂乱无章的物品收纳到视线之外，在我怕门后要展示台的心爱之物！</dd>
<dd class="bottomimage"><img src="./images/yinying.jpg" alt=""></dd>
</dt>
</li>
<li class="item">
<dt class="box">
<dd class="img">
<img src="./images/news3.jpg" alt="">
</dd>
<dd class="title">BEST贝达</dd>
<dd class="info">将杂乱无章的物品收纳到视线之外，在我怕门后要展示台的心爱之物！</dd>
<dd class="bottomimage"><img src="./images/yinying.jpg" alt=""></dd>
</dt>
</li>
</ul>
</div>
<div class="life">
<img src="./images/shenghuo.png" alt="">
<ul>
<li><img src="./images/img1.jpg" alt=""></li>
<li><img src="./images/img2.jpg" alt=""></li>
<li><img src="./images/img3.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="footer">
爱家居版权所有2016-2026京ICP备222222222号 京公网安备2222222222222
</div>
</body>
</html>