console
<div class="a">
<div class="head">
<div class="welcome">
<a href="#">免费注册</a>
<a href="#">登录</a>
<a href="#">欢迎您：某某用户</a>
</div>
<div class="com">
<span class="logo-text">男女装</span>
<div class="search">
<select style="width: 70px;height: 43px;font-family: '微软雅黑';font-size: 15px;background-color: #DCDCDC;border: 0;">
<option value="man">男装</option>
<option value="woman">女装</option>
<option value="children">童装</option>
</select>
<input type="text" style="width: 500px;height: 38px;border: 0;">
<input type="submit" value="搜索" style="width: 80px; height: 45px;background-color: #8A2BE2;border: 0;color: white;font-size: 15px;font-weight: bold;">
</div>
</div>
</div>
<div class="menu">
<ul>
<li><a href="#">首页</a></li>
<li id="select"><a href="#">品牌</a>
<div class="list-box">
<div class="list clear-fix">
<p>服饰内衣</p>
<ul clear-fix>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
</ul>
</div>
<div class="list clear-fix">
<p>服饰内衣</p>
<ul clear-fix>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
</ul>
</div>
<div class="list clear-fix">
<p>服饰内衣</p>
<ul clear-fix>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
</ul>
</div>
<div class="list clear-fix">
<p>服饰内衣</p>
<ul clear-fix>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
</ul>
</div>
<div class="list clear-fix">
<p>服饰内衣</p>
<ul clear-fix>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
</ul>
</div>
<div class="list clear-fix">
<p>服饰内衣</p>
<ul clear-fix>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
</ul>
</div>
<div class="list clear-fix">
<p>服饰内衣</p>
<ul clear-fix>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
</ul>
</div>
<div class="list clear-fix">
<p>服饰内衣</p>
<ul clear-fix>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
</ul>
</div>
</div>
</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="center">
<div class="pictures">
<div class="p1"><a href=""><img src="https://t1.picb.cc/uploads/2020/05/20/kdmRPG.jpg"/ width="500px" height="300px"></a></div>
<div class="p2">
<a href=""><img src="https://t1.picb.cc/uploads/2020/05/20/kdmD3e.png"/></a><a href=""><img src="https://t1.picb.cc/uploads/2020/05/20/kdmD3e.png"/></a><a href=""><img src="https://t1.picb.cc/uploads/2020/05/20/kdmD3e.png"/></a>
<a href=""><img src="https://t1.picb.cc/uploads/2020/05/20/kdmD3e.png"/></a><a href=""><img src="https://t1.picb.cc/uploads/2020/05/20/kdmD3e.png"/></a><a href=""><img src="https://t1.picb.cc/uploads/2020/05/20/kdmD3e.png"/></a>
<a href=""><img src="https://t1.picb.cc/uploads/2020/05/20/kdmD3e.png"/></a><a href=""><img src="https://t1.picb.cc/uploads/2020/05/20/kdmD3e.png"/></a><a href=""><img src="https://t1.picb.cc/uploads/2020/05/20/kdmD3e.png"/></a>
<a href=""><img src="https://t1.picb.cc/uploads/2020/05/20/kdmD3e.png"/></a><a href=""><img src="https://t1.picb.cc/uploads/2020/05/20/kdmD3e.png"/></a><a href=""><img src="https://t1.picb.cc/uploads/2020/05/20/kdmD3e.png"/></a>
</div>
<div class="p3">
<a href=""><img src="https://t1.picb.cc/uploads/2020/05/20/kdmLpc.png"></a><br />
<a href=""><img src="https://t1.picb.cc/uploads/2020/05/20/kdmEUs.png"></a>
</div>
<hr style="clear: both;margin-left: 510px;margin-top:20px;border: 0;height:1px;background-color: #DCDCDC;">
</div>
<span class="type">女装</span>
<div class="woman_or_man_right"><span>轻薄型</span><span>带帽</span><span>毛领</span></div>
<div class="man_woman">
<div class="photo">
<img src="https://t1.picb.cc/uploads/2020/05/20/kdmF6g.png"><br />
2014冬季新装正品miss欧洲<br />
<div style="margin-top: 7px;">
<span style="color: chocolate;font-weight: bold;">¥298元</span>
<span style="margin-left: 20px;color: darkgray;text-decoration: line-through;">¥995</span>
</div>
</div>
<div class="photo">
<img src="https://t1.picb.cc/uploads/2020/05/20/kdmF6g.png"><br />
2014冬季新装正品miss欧洲<br />
<div style="margin-top: 7px;">
<span style="color: chocolate;font-weight: bold;">¥298元</span>
<span style="margin-left: 20px;color: darkgray;text-decoration: line-through;">¥995</span>
</div>
</div>
<div class="photo">
<img src="https://t1.picb.cc/uploads/2020/05/20/kdmF6g.png"><br />
2014冬季新装正品miss欧洲<br />
<div style="margin-top: 7px;">
<span style="color: chocolate;font-weight: bold;">¥298元</span>
<span style="margin-left: 20px;color: darkgray;text-decoration: line-through;">¥995</span>
</div>
</div>
<div class="photo">
<img src="https://t1.picb.cc/uploads/2020/05/20/kdmF6g.png"><br />
2014冬季新装正品miss欧洲<br />
<div style="margin-top: 7px;">
<span style="color: chocolate;font-weight: bold;">¥298元</span>
<span style="margin-left: 20px;color: darkgray;text-decoration: line-through;">¥995</span>
</div>
</div>
<div class="photo">
<img src="https://t1.picb.cc/uploads/2020/05/20/kdmF6g.png"><br />
2014冬季新装正品miss欧洲<br />
<div style="margin-top: 7px;">
<span style="color: chocolate;font-weight: bold;">¥298元</span>
<span style="margin-left: 20px;color: darkgray;text-decoration: line-through;">¥995</span>
</div>
</div>
<div class="photo">
<img src="https://t1.picb.cc/uploads/2020/05/20/kdmF6g.png"><br />
2014冬季新装正品miss欧洲<br />
<div style="margin-top: 7px;">
<span style="color: chocolate;font-weight: bold;">¥298元</span>
<span style="margin-left: 20px;color: darkgray;text-decoration: line-through;">¥995</span>
</div>
</div>
<div class="photo">
<img src="https://t1.picb.cc/uploads/2020/05/20/kdmF6g.png"><br />
2014冬季新装正品miss欧洲<br />
<div style="margin-top: 7px;">
<span style="color: chocolate;font-weight: bold;">¥298元</span>
<span style="margin-left: 20px;color: darkgray;text-decoration: line-through;">¥995</span>
</div>
</div>
<div class="photo">
<img src="https://t1.picb.cc/uploads/2020/05/20/kdmF6g.png"><br />
2014冬季新装正品miss欧洲<br />
<div style="margin-top: 7px;">
<span style="color: chocolate;font-weight: bold;">¥298元</span>
<span style="margin-left: 20px;color: darkgray;text-decoration: line-through;">¥995</span>
</div>
</div>
<div class="photo">
<img src="https://t1.picb.cc/uploads/2020/05/20/kdmF6g.png"><br />
2014冬季新装正品miss欧洲<br />
<div style="margin-top: 7px;">
<span style="color: chocolate;font-weight: bold;">¥298元</span>
<span style="margin-left: 20px;color: darkgray;text-decoration: line-through;">¥995</span>
</div>
</div>
<div class="photo">
<img src="https://t1.picb.cc/uploads/2020/05/20/kdmF6g.png"><br />
2014冬季新装正品miss欧洲<br />
<div style="margin-top: 7px;">
<span style="color: chocolate;font-weight: bold;">¥298元</span>
<span style="margin-left: 20px;color: darkgray;text-decoration: line-through;">¥995</span>
</div>
</div>
</div>
<span class="type">男装</span>
<div class="woman_or_man_right"><span>轻薄型</span><span>带帽</span><span>毛领</span></div>
<div class="man_woman"></div>
</div>
</div>
*{
margin: 0 auto;
padding: 0 auto;
}
.clear-fix::after{
content: "";
clear: both;
display: block;
}
li{
list-style-type: none;
}
.a{
width: auto;
height: 3500px;
}
.head{
width: 100%;
height: 150px;
}
.welcome{
width: 1300px;
height: 50px;
background-color: gainsboro;
padding-left:200px;
}
.welcome a{
color: red;
text-decoration: none;
margin-left: 10px;
font-family: "微软雅黑";
line-height: 45px;
font-size: 14px;
}
.welcome a:hover{
color: crimson;
}
.com{
width: 1140px;
height: 100px;
padding: 0 180px 0 180px;
}
.search{
float: right;
border: solid 2px #8A2BE2;
margin-top: 20px;
}
.menu{
width: 100%;
height: 50px;
background-color: blueviolet;
text-align: center;
position: relative;
}
.menu>ul>li{
display: inline-block;
}
.menu>ul>li>a {
display:inline-block;
padding:0 40px;
color:#FFF;
text-decoration:none;
font:17px/50px arial;
}
.menu>ul>li a:hover{
color: #DCDCDC;
}
.menu>ul #select li:hover{
background: white;
}
.menu>ul #select a:hover{
color: red;
font-weight:bold;
}
.center{
width: 1100px;
height: 3000px;
background-color: darkcyan;
}
.pictures{
width: 1100px;
height: 320px;
background-color: aliceblue;
margin-top: 10px;
}
.p1{
width: 500px;
height: 300px;
float: left;
}
.p2{
width: 300px;
height: 270px;
float: left;
margin-left: 10px;
}
.p2 img{
width: 80px;
height: 30px;
margin: 20px 0px 0 20px;
}
.p3{
width: 280px;
height: 270px;
float: right;
}
.p3 img{
width: 200px;
height: 110px;
margin: 10px 0 0 35px;
}
.type{
font-size: 25px;
color: #8A2BE2;
font-weight: bold;
display: inline-block;
margin-bottom: 10px;
margin-top: 10px;
}
.man_woman{
width: 1100px;
height: 600px;
border: solid 1px black;
text-align: center;
}
.woman_or_man_right{
width: 200px;
height: 50px;
float: right;
line-height: 70px;
color: dimgrey;
}
.woman_or_man_right span{
border-right: solid #696969 1px;
padding:0 10px 0 10px;
}
.photo{
width: 170px;
height: 230px;
background-color: white;
color: #696969;
font-size: 13px;
margin: 20px 10px 20px 20px;
display: inline-block;
}
.photo img{
width: 170px;
height: 170px;
}
.com .logo-text{
color: purple;
font-size: 40px;
line-height: 100px;
}
.list-box{
display: none;
}
.menu>ul #select:hover .list-box{
display: block;
}
.menu .list-box{
background-color: white;
border: pink 5px solid;
border-top: none;
height:350px;
width:1000px;
position: absolute;
left: 0;
right: 0;
}
.menu .list{
margin-left: 20px;
float: left;
height: 120px;
margin-top: 30px;
width: 200px;
}
.menu .list p{
text-align: left;
border-bottom:dotted blue 2px;
font-weight: bold;
}
.menu .list ul{
width: 100%;
height: 100%;
padding:0 0;
}
.menu .list ul li{
float: left;
margin-right: 10px;
}