【小白学前端】化腐朽为神奇-CSS实现书皮带阴影效果(day01-1)

【小白学前端】化腐朽为神奇-CSS实现书皮带阴影效果(day01-1)_第1张图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圆角带阴影效果的书皮</title>
		<style>
			.book{
				margin: 20px;	/* 外层空20像素 */
				padding: 10px; /* 内层空10像素 */
				color: white;	/* 字体颜色白色 */
				width: 200px;	/* 宽度200像素 */
				height: 280px;	/* 高度280像素 */
				background-color: red;	/* 背景色红色 */
				border-radius: 10px 19px 19px 10px;	/* 圆角 */
				box-shadow: 5px 5px 5px #888888;	/* 阴影 */
				float: left;	/* 居左排列 */
			}
			.book-green{
				background-color: green;	/* 背景色 */
			}
			.book-black{
				background-color: black;	/* 背景色 */
			}
			.title{
				padding-top: 10px;	/* 内层上面空10像素 */
				font-size: 24px;		/* 字体大小 */
				font-weight: bold;	/* 字体加粗效果 */
			}
			.subtitle{
				padding: 10px 0px 0px 70px;	/* 内层留白 */
				font-size: 14px;		/* 字体大小 */
				font-weight: bold;	/* 字体加粗效果 */
			}
			.author{
				font-size: 9px;padding:5px;	/* 可以写在一行上 */
			}
			.publish{
				font-size: 9px;padding-top:150px;padding-left: 50px;	/* 内层留白可以分别设置 */
			}
		</style>
	</head>
	<body>
			<div class="book">
				<div class="title">分布式互联网架构</div>
				<div class="subtitle">权威指南</div>
				<div class="author">作者:chenzs</div>
				<div class="publish">出版:清华出版社</div>
			</div>
			<div class="book book-green">
				<div class="title">分布式互联网架构</div>
				<div class="subtitle">权威指南</div>
				<div class="author">作者:chenzs</div>
				<div class="publish">出版:清华出版社</div>
			</div>
			<div class="book book-black">
				<div class="title">分布式互联网架构</div>
				<div class="subtitle">权威指南</div>
				<div class="author">作者:chenzs</div>
				<div class="publish">出版:清华出版社</div>
			</div>
			<div class="book">
				<div class="title">分布式互联网架构</div>
				<div class="subtitle">权威指南</div>
				<div class="author">作者:chenzs</div>
				<div class="publish">出版:清华出版社</div>
			</div>
			<div class="book book-green">
				<div class="title">分布式互联网架构</div>
				<div class="subtitle">权威指南</div>
				<div class="author">作者:chenzs</div>
				<div class="publish">出版:清华出版社</div>
			</div>
			<div class="book book-black">
				<div class="title">分布式互联网架构</div>
				<div class="subtitle">权威指南</div>
				<div class="author">作者:chenzs</div>
				<div class="publish">出版:清华出版社</div>
			</div>
	</body>
</html>

你可能感兴趣的:(front-end,大前端,html,css3)