简单的布局练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.main{
width: 300px;
/*一般不设置高度*/
/*height: 600px;*/
margin: 0 auto;
background-color: gray;
}
.nav{
height: 50px;
}
a{
color: black;
text-decoration:none;
margin-left: 30px;
display: inline-block;
margin-top: 15px;
}
.book{
height:500px;
background-color: skyblue;
}
.main>.book>div{
width:70px;
height: 200px;
display: inline-block;
background-color: yellow;
margin-top: 20px;
margin-left: 15px;
}
</style>
</head>
<body>
<div class="main">
<!-- 导航栏 -->
<div class="nav">
<a href="https://www.baidu.com/">百度</a>
<a href="https://www.taobao.com/">淘宝</a>
<a href="https://www.jd.com/">京东</a>
</div>
<!-- 内容 -->
<div class="book">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2c52fd3c990096fcb1db83aee56b9b92.png#pic_center)
升级版本的豆瓣图书布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>豆瓣2</title>
<style type="text/css">
span{
color: rgb(62,125,171);
}
img{
height: 200px;
width: 150px;
margin-left: 10px;
margin-top: 10px;
}
a{
color: rgb(62,125,171);
display: block;
text-decoration: none;
text-align: center;
}
.picture{
display: inline-block;
}
h2,h3{
display: inline-block;
margin-right: 10px;
}
</style>
</head>
<body>
<div style="width: 900px;">
<!-- 标题 -->
<div style="height: 50px;">
<h2>电子图书</h2>
<span>查看全部》</span>
</div>
<div style="height: 1px;"><hr></div>
<!-- 主要内容 -->
<div>
<!-- 热门电子书 -->
<div>
<h3>热门电子书</h3>
<span>更多》</span>
</div>
<!-- 图片 -->
</div>
<div style="height: 150px">
<div class="picture">
<img src="img/5475.jpg">
<a href="">克拉拉与太阳</a>
<center>29.99元</center>
</div>
<div class="picture">
<img src="img/7592.jpg">
<a href="">我在京都居酒屋</a>
<center>45.00元</center>
</div>
<div class="picture">
<img src="img/2685.jpg">
<a href="">爱的艺术</a>
<center>14.99元</center>
</div>
<div class="picture">
<img src="img/1396.jpg">
<a href="">还是要相信</a>
<center>35.4元</center>
</div>
<div class="picture">
<img src="img/9639.jpg">
<a href="">给贤南哥的信</a>
<center>19.99元</center>
</div>
<div class="picture">
<img src="img/8495.jpg" >
<a href="">救猫咪</a>
<center>39.00元</center>
</div>
<div class="picture">
<img src="img/5478.jpg">
<a href="">司腾</a>
<center>30.00元</center>
</div>
<div class="picture">
<img src="img/9396.jpg">
<a href="">飞行家</a>
<center>19.99元</center>
</div>
<div class="picture">
<img src="img/3213.jpg">
<a href="">晚婚</a>
<center>14.99元</center>
</div>
<div class="picture">
<img src="img/5404.jpg">
<a href="">沉默的病人</a>
<center>16.99元</center>
</div>
</div>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e762fc5891103211e1eb8f0ea03d96c7.png#pic_center)