01-homework-模仿商品网站部分结构搭建
2018-08-15 本文已影响0人
阅心_5cc2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*这个是样式清除*/
*{
margin:0;
padding:0;
text-decoration: none;
}
.global{
width:1080px;
background-color:#DCDCDC;
margin:0 auto;
}
/*这个是标题和第一部分样式*/
#title{
height:60px;
width:1080px;
background-color:#00BFFF;
margin:0 auto;
line-height:60px;
text-align: center;
font-size:24px;
}
.con1{
height:410px;
/*background-color:greenyellow;*/
text-align: center;
display:block;
}
.con1 div{
display:block;
height:400px;
width:330px;
background-color:#ffffff;
margin:6px 15px;
float:left;
}
.cc div{
height:160px;
width:298px;
background-color:#00BFFF;
}
.cr div{
height:160px;
width:298px;
background-color:#00BFFF;
}
/*这个是第二部分样式*/
.con2{
width:1080px;
height:300px;
background-color:#DCDCDC;
display:block;
text-align: center;
}
.con2 div{
display:block;
height:240px;
width:330px;
background-color:#ffffff;
margin:6px 15px;
float:left;
}
.brand{
height:140px;
width:80px;
background:rgba(160,160,160,0.7);
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
margin:160px 0 0 1000px;
position: fixed;
}
</style>
</head>
<body>
<div class="global">
<div class="brand">brand</div>
<div class="brand" style="height:40px;margin-top:310px"><a href="#title">^回顶</a></div>
<div id="title" >—— 居家优品 ——</div>
<!--这个是第一部分内容-->
<div class="con1">
<div><a href="#"><img src=""/></a>img</div>
<div class="cc">
<div style="height:40px;">
<a href="#">家电馆</a> 家电好物节
<img src=""/>
</div>
<div>
<span><img src=""/>img</span>
<span><img src=""/>img</span>
</div>
<div>
</div>
</div>
<div class="cr">
<div style="height:40px;">
<a href="#">家电馆</a> 家电好物节
<img src=""/>
</div>
<div>
<span><img src=""/>img</span>
<span><img src=""/>img</span>
</div>
<div>
</div>
</div>
</div>
<!--这个是第二部分内容-->
<div class="con2">
<div><img src=""/>img</div>
<div><img src=""/>img</div>
<div><img src=""/>img</div>
</div>
</div>
</body>
</html>
火狐截图_2018-08-15T15-40-51.211Z.png
