04作业--项目布局
2018-08-10 本文已影响0人
大白python学习分享
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>当当网图书_小说传记_青春文学_成功励志_投资理财_各品类图书畅销榜</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.head1{
width: 1349px;
height: 35px;
background-color: red;
}
.head2{
width: 1349px;
height: 100px;
background-color: yellow;
}
.shop_class{
width: 1349px;
height: 43px;
background-color: green;
}
.rank{
width: 1349px;
height: 31px;
background-color: blue;
}
.bd{
width: 1349px;
height: 5084px;
background-color: pink;
/*与上面块的间距*/
margin-top: 15px;
}
.dibu{
width: 1349px;
height: 420px;
background-color: orange;
margin-top: 15px;
}
.last{
width: 1349px;
height: 79px;
background-color: yellowgreen;
border-bottom: 1px solid rgb(255,255,255);
border-top: 1px solid red;
}
.dibu_nav{
width: 1349px;
height: 169px;
background-color: rgb(102,217,139);
}
.dibu_hotci{
width: 1349px;
height: 37px;
background-color: red;
}
</style>
</head>
<body>
<div class="head1"></div>
<div class="head2"></div>
<div class="shop_class"></div>
<div class="rank"></div>
<div class="bd"></div>
<div class="dibu">
<div class="last"></div>
<div class="dibu_nav">
<div class="dibu_hotci"></div>
</div>
</div>
</body>
</html>
效果
QQ截图20180810111939.png
QQ截图20180810112044.png
