html 盒子练习

最新推荐文章于 2024-06-29 22:14:07 发布

asnone0

最新推荐文章于 2024-06-29 22:14:07 发布

阅读量193

点赞数 1

分类专栏：书本文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_53912756/article/details/127718049

版权

书本专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		body{
			background-color: #f5f5f5;
		}
		a{
			color: #333;
			text-decoration: none;
		}
		.box{
			width: 298px;
			height: 415px;
			background-color: #fff;
			/* 让块级盒子水平居中对齐 */
			margin: 100px auto;
		}
		.box img{
			/* 图片的宽度和父元素的一样宽 */
			width: 100%;
		}
		.box .review{
			font-size: 14px;
			height: 70px;
			/* 因为这个段落没有width属性 所以padding不会撑开盒子的宽度 */
			padding: 0 28px;
			margin-top: 30px;
		}
		.box .appraise{
			color: #b0b0b0;
			font-size: 12px;
			margin-top: 20px;
			padding: 0 28px;
		}
		.info{
			font-size: 14px;
			margin-top: 15px;
			padding: 0 28px;
		}
		.box .info h4{
			display: inline-block;
			font-weight: 400;
		}
		.box .info span{
			color: #ff6700;
		}
		.box .info em{
			margin: 0 6px 0 15px;
			font-style: normal;
			color: #ebe4e0;

		}
	</style>
</head>
<body>
	<div class="box">
		<img src="5.jpg" alt="">
		<p class="review">
			不仅是头上的两根角，还包括粉红色的头发等，都是零二与其他女孩子的明显的区别
		</p>
		<div class="appraise">来自于百度的详细描述</div>
		<div class="info">
			<h4><a href="#">叫龙公主</a></h4>
			<em>|</em>
			<span>母体</span>
		</div>

	</div>

</body>
</html>