<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
div {
box-sizing: border-box;
}
.min-content {
width: 980px;
margin: 0 auto;
}
.content {
width: 1280px;
margin: 0 auto;
}
.header {
height: 120px;
line-height: 120px;
background: #fff;
}
.header .logo {
float: left;
height: 80px;
margin-top: 20px;
}
.header .goto {
float: right;
color: #666;
}
.header .goto a {
color: #666;
text-decoration: none;
}
.navbox {
height: 60px;
background: #404042;
line-height: 60px;
color: #fff;
font-size: 18px;
}
.navbox ul li {
padding: 0 42px;
float: left;
}
.navbox ul li:hover {
background-color: #DA5454;
}
.banner img {
width: 100%;
}
.function ul {
display: flex;
}
.function ul li {
padding: 34px 0;
flex: 1 0 0;
border: 1px solid #ddd;
border-top: 0;
border-spacing: 0;
}
.function .item img {
height: 50px;
margin: 0 15px 0 28px;
float: left;
}
.function .item .info .title {
font-size: 17px;
}
.function .item .info .subtitle {
font-size: 14px;
color: #666;
}
.demobox,.newsbox {
margin-top: 10px;
}
.demobox ul .item {
float: left;
margin: 3px 8px;
}
.demobox .title,.newsbox .title {
line-height: 56px;
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
color: #222;
font-size: 18px;
}
.newsbox .itemtitle {
font-size: 15px;
color: #444;
}
.newsbox>ul {
display: flex;
gap: 15px;
}
.newsbox>ul .listbox {
flex: 1 0 0;
border: 1px solid #ddd;
padding: 25px 20px;
}
.newsbox>ul .listbox .itemtitle {
margin-bottom: 5px;
}
.newsbox>ul .listbox ul .item {
border-bottom: 1px solid #ddd;
padding: 20px 0;
}
.newsbox>ul .listbox ul .item img {
float: left;
margin-right: 15px;
}
.newsbox>ul .listbox ul .item .infotitle {
font-size: 16px;
color: #222;
}
.newsbox>ul .listbox ul .item .subtitle {
font-size: 13px;
color: #aaa;
}
.footer {
padding: 46px;
margin-top: 20px;
background-color: #111;
text-align: center;
color: #fff;
line-height: 36px;
font-size: 15px;
}
</style>
</head>
<body>
<div class="content">
<div class="min-content">
<div class="header">
<img class="logo" src="./images/logo.png" alt="logo">
<div class="goto">
<a href="#">登录</a> |
<a href="#">注册</a>
</div>
</div>
</div>
<div class="navbox">
<div class="min-content">
<ul>
<li class="item">首页</li>
<li class="item">设计案例</li>
<li class="item">装修图库</li>
<li class="item">有问必答</li>
<li class="item">逛商品</li>
</ul>
</div>
</div>
<div class="banner">
<img src="./images/banner.jpg" alt="banner">
</div>
<div class="function min-content">
<ul>
<li class="item">
<img src="./images/pic01.jpg" alt="">
<div class="info">
<p class="title">浏览真实设计案例</p>
<p class="subtitle">设计师原创作品</p>
</div>
</li>
<li class="item">
<img src="./images/pic02.jpg" alt="">
<div class="info">
<p class="title">浏览真实设计案例</p>
<p class="subtitle">设计师原创作品</p>
</div>
</li>
<li class="item">
<img src="./images/pic03.jpg" alt="">
<div class="info">
<p class="title">浏览真实设计案例</p>
<p class="subtitle">设计师原创作品</p>
</div>
</li>
<li class="item">
<img src="./images/pic04.jpg" alt="">
<div class="info">
<p class="title">浏览真实设计案例</p>
<p class="subtitle">设计师原创作品</p>
</div>
</li>
</ul>
</div>
<div class="demobox min-content">
<h4 class="title">设计案例</h4>
<ul>
<li class="item">
<img src="./images/pic05.jpg" alt="">
</li>
<li class="item">
<img src="./images/pic06.jpg" alt="">
</li>
<li class="item">
<img src="./images/pic07.jpg" alt="">
</li>
<li class="item">
<img src="./images/pic08.jpg" alt="">
</li>
<li class="item">
<img src="./images/pic09.jpg" alt="">
</li>
<li class="item">
<img src="./images/pic10.jpg" alt="">
</li>
</ul>
</div>
<div class="newsbox min-content">
<h4 class="title">最新动态</h4>
<ul>
<li class="listbox">
<h3 class="itemtitle">有问必答</h3>
<ul class="">
<li class="item">
<img src="./images/pic01.png" alt="">
<div class="info">
<p class="infotitle">家具用品哪个品牌好</p>
<p class="subtitle">回答：谢美家居用品很多错...</p>
</div>
</li>
<li class="item">
<img src="./images/pic02.png" alt="">
<div class="info">
<p class="infotitle">家具用品哪个品牌好</p>
<p class="subtitle">回答：谢美家居用品很多错...</p>
</div>
</li>
<li class="item">
<img src="./images/pic03.png" alt="">
<div class="info">
<p class="infotitle">家具用品哪个品牌好</p>
<p class="subtitle">回答：谢美家居用品很多错...</p>
</div>
</li>
</ul>
</li>
<li class="listbox">
<h3 class="itemtitle">发布需求</h3>
<ul class="">
<li class="item">
<img src="./images/pic04.png" alt="">
<div class="info">
<p class="infotitle">家具用品哪个品牌好</p>
<p class="subtitle">回答：谢美家居用品很多错...</p>
</div>
</li>
<li class="item">
<img src="./images/pic05.png" alt="">
<div class="info">
<p class="infotitle">家具用品哪个品牌好</p>
<p class="subtitle">回答：谢美家居用品很多错...</p>
</div>
</li>
<li class="item">
<img src="./images/pic06.png" alt="">
<div class="info">
<p class="infotitle">家具用品哪个品牌好</p>
<p class="subtitle">回答：谢美家居用品很多错...</p>
</div>
</li>
</ul>
</li>
<li class="listbox">
<h3 class="itemtitle">预约设计师</h3>
<ul class="">
<li class="item">
<img src="./images/pic06.png" alt="">
<div class="info">
<p class="infotitle">家具用品哪个品牌好</p>
<p class="subtitle">回答：谢美家居用品很多错...</p>
</div>
</li>
<li class="item">
<img src="./images/pic07.png" alt="">
<div class="info">
<p class="infotitle">厨房在哪个方位风水好</p>
<p class="subtitle">回答：看风水要结合...</p>
</div>
</li>
<li class="item">
<img src="./images/pic08.png" alt="">
<div class="info">
<p class="infotitle">卧室多大比较合适</p>
<p class="subtitle">回答：一般卧室的大小...</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="footer">
<p>关于我们 | 联系我们 | 意见建议 | 帮助中心 | 使用条款</p>
<p>免责声明：本网站部分内容由用户自行上传，如权利人发现存在误传其作品情形，请及时与本站联系。</p>
</div>
</body>
</html>