豆瓣图书布局练习

最新推荐文章于 2024-08-30 11:12:09 发布

逝水年华哎

最新推荐文章于 2024-08-30 11:12:09 发布

阅读量71

点赞数

文章标签： html5 html

本文链接：https://blog.csdn.net/qq_44572030/article/details/116721290

版权

简单的布局练习

<!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>

在这里插入图片描述

升级版本的豆瓣图书布局

<!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>

在这里插入图片描述

逝水年华哎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
豆瓣图书布局练习

简单的布局练习<!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;
复制链接

扫一扫