console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<ul id="header" >
<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>
<li><a href="#">会员中心</a></li>
<li><a href="#">会员中心</a></li>
</ul>
</div>
<div class="nav">
<div class="w">
<div class="logo"><img src="http://zhoushugang.gitee.io/erabbit-client-pc-document/hero.png"></div>
<div class="subnav">
<ul>
<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>
<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="search">
<input type="text">
</div>
</div>
</div>
<div class="contentbox">
<div class="w">
<div class="contentnav">
<ul>
<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>
<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>
</div>
<div class="goodscontainer">
<h1>新鲜好物</h1>
<p>新鲜出炉，品质靠谱</p>
<div class="goods">
<div class="goodsbox">
<img src="https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg">
<h2>Kencoll女士防滑夏季人...</h2>
<p>￥99.9</p>
</div>
<div class="goodsbox">
<img src="https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg">
<h2>Kencoll女士防滑夏季人...</h2>
<p>￥99.9</p>
</div>
<div class="goodsbox">
<img src="https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg">
<h2>Kencoll女士防滑夏季人...</h2>
<p>￥99.9</p>
</div>
<div class="goodsbox">
<img src="https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg">
<h2>Kencoll女士防滑夏季人...</h2>
<p>￥99.9</p>
</div>
</div>
</div>
<div class="product">
<div class="w">
<div class="head">
<h1>美食</h1>
<div class="sub">
<a href="#">网易黑猪</a>
<a href="#">网易黑猪</a>
<a href="#">网易黑猪</a>
<a href="#">网易黑猪</a>
</div>
<a href="#">查看全部</a>
</div>
<div class="cover">
<a href="#">
<img src="https://yanxuan-item.nosdn.127.net/01227c93e9098342be591ea57b8953c7.jpg?quality=95&thumbnail=610x610&imageView">
<strong class="label">
<span>美食馆</span>
<span>全场3件8折</span>
</strong>
</a>
</div>
<div class="goodslist">
<div class="goodsbox">
<img src="https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg">
<h2>Kencoll女士防滑夏季人...</h2>
<p>￥99.9</p>
</div>
<div class="goodsbox">
<img src="https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg">
<h2>Kencoll女士防滑夏季人...</h2>
<p>￥99.9</p>
</div>
<div class="goodsbox">
<img src="https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg">
<h2>Kencoll女士防滑夏季人...</h2>
<p>￥99.9</p>
</div>
<div class="goodsbox">
<img src="https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg">
<h2>Kencoll女士防滑夏季人...</h2>
<p>￥99.9</p>
</div>
<div class="goodsbox">
<img src="https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg">
<h2>Kencoll女士防滑夏季人...</h2>
<p>￥99.9</p>
</div>
<div class="goodsbox">
<img src="https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg">
<h2>Kencoll女士防滑夏季人...</h2>
<p>￥99.9</p>
</div>
<div class="goodsbox">
<img src="https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg">
<h2>Kencoll女士防滑夏季人...</h2>
<p>￥99.9</p>
</div>
<div class="goodsbox">
<img src="https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg">
<h2>Kencoll女士防滑夏季人...</h2>
<p>￥99.9</p>
</div>
</div>
</div>
</div>
<div class="contact">
</div>
<div class="footer">
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.w{
width: 1240px;
margin:0 auto;
position: relative;
}
#header{
display:flex;
justify-content: flex-end;
align-items: center;
width:100%;
height:50px;
background-color: rgb(51,51,51);
}
#header ul{
display: flex;
align-items: center;
margin-right: 100px;
}
#header ul li{
display: list-item;
text-align: -webkit-match-parent;
padding: 10px 10px;
color: grey;
}
#header ul li:hover{
color:rgb(39,187,154);
}
#header ul li:visited{
color:grey;
}
#header ul li a{
color: grey;
}
#header ul li a:hover{
color:rgb(39,187,154);
}
.nav{
background-color: #fff;
height: 150px;
margin:0 auto;
}
.nav .w{
}
.nav .logo img{
float:left;
display: inline-block;
margin-left: 50px;
width: 100px;
height: 100px;
}
.nav .subnav {
float:left;
width: 820px;
}
.nav .subnav ul{
float:left;
margin-left: 50px;
line-height: 150px;
}
.nav .subnav ul li{
float: left;
}
.nav .subnav ul li a{
padding:0 20px;
}
.subnav ul li a:hover{
color: rgb(39,187,154);
border-bottom: 1px, solid, rgb(39,187,154);
}
.nav .subnav ul li a:visited{
color: black;
}
.search{
line-height: 150px;
margin-left: 50px;
}
.contentbox{
clear:both;
display: flex;
height:500px;
width:1240px;
margin:0 auto;
background-image: url(http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/6d202d8e-bb47-4f92-9523-f32ab65754f4.jpg);
background-repeat: no-repeat;
background-position: center;
}
.contentnav{
height:100%;
width:295px;
margin-left: 0%;
background-color: rgb(0,0,0,0.7);
}
.contentnav ul li{
text-align: center;
margin: 0 auto;
height:50px;
line-height: 50px;
}
.contentnav ul li a{
color: #fff;
}
.contentnav ul li:hover{
background-color: rgb(39,187,154);
}
.goodscontainer{
width:1240px;
margin: 0 auto;
}
.goodscontainer h1{
float: left;
color: rgb(83, 83, 83);
font-weight: normal;
margin-top: 25px;
margin-bottom: 25px;
margin-right: 18px;
}
.goodscontainer p{
color:grey;
padding-top: 45px;
}
.goods{
clear: both;
display: flex;
flex-wrap: nowrap;
height:500px;
}
.goods .goodsbox{
height: 400px;
width: 300px;
margin-right: 5px;
}
.goods .goodsbox img{
width:300px;
height: 300px;
}
.goods .goodsbox h2{
text-align: center;
font-weight: normal;
color: rgb(85, 85, 85);
}
.goods .goodsbox p{
text-align: center;
font-size: larger;
color:red;
margin-top: 15px;
padding: 0;
}
.goods .goodsbox:hover{
transform: translate(0,-5px);
}
.product{
display: flex;
justify-content: flex-start;
align-items: center;
width: 1240px;
margin: 0 auto;
}
.head{
display: flex;
align-items: flex-end;
}
.head h1{
flex:1;
height: 36px;
line-height: 36px;
color: rgb(83, 83, 83);
font-weight: normal;
margin-bottom: 25px;
}
.head .sub{
margin-right: 80px;
margin-bottom: 25px;
}
.head .sub a{
color:black;
padding: 2px 12px;
}
.head .sub a:hover{
color:#fff;
background-color: rgb(39,187,154);
}
.head a{
color:grey;
margin-bottom: 25px;
}
.head a:hover{
color:rgb(39,187,154);
}
.cover {
width: 240px;
height: 610px;
margin-right: 10px;
position: relative;
}
.cover img{
width: 100%;
height: 100%;
object-fit: cover;
}
.label{
width: 188px;
height: 66px;
display: flex;
font-size: 18px;
color: #fff;
line-height: 66px;
font-weight: 400;
position: absolute;
left: 0;
top: 50%;
transform: translate3d(0,-50%,0);
}
.label span{
text-align: center;
}
.label span:first-child {
width: 76px;
background: rgba(0,0,0,.9);
}
.label span:last-child {
flex: 1;
background: rgba(0,0,0,.7);
}
.goodslist{
display: flex;
flex-wrap: wrap;
width: 990px;
}
.goodslist .goodsbox{
width: 240px;
height: 300px;
margin-right: 10px;
margin-bottom: 10px;
}
.contact{
display: flex;
width:100%;
height: 250px;
background-color: black;
}
.footer{
display: flex;
width:100%;
height: 370px;
background-color: rgb(56, 56, 56);
}