浮动的应用

最新推荐文章于 2023-04-30 11:06:22 发布

伶音

最新推荐文章于 2023-04-30 11:06:22 发布

阅读量191

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/adark_lily/article/details/120367761

版权

制作爱奇艺视频播放表

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>爱奇艺视频播放列表</title>
		<link rel="stylesheet" type="text/css" href="css/aiqiy.css" />
	</head>
	<body>
		<h2>热播</h2>
		<ul class="Bbox">
			<li class="box1">
				<img src="img/img1.png">
				<h3>神武赵子龙</h3>

				<p class="ziti">怒，林更新不抱网红抱女神</p>

				<p class="ziti1">点击次数：242445次</p>
			</li>
			<li class="box2">
				<img src="img/img2.png">
				<h3>旋风十一人</h3>

				<p class="ziti">胡歌变教练在撩前女友</p>

				<p class="ziti1">点击次数：242445次</p>
			</li>
			<li class="box3">
				<img src="img/img3.png">
				<h3>太阳的后裔</h3>

				<p class="ziti">宋慧乔吃嫩草</p>

				<p class="ziti1">点击次数：242445次</p>
			</li>
			<li class="box4">
				<img src="img/img4.png">
				<h3>山海经之赤影传说</h3>

				<p class="ziti">娜扎张翰再度联手</p>

				<p class="ziti1">点击次数：242445次</p>
			</li>
		</ul>

	</body>
</html>

CSS代码

.Bbox {
	list-style-type: none;
	/* float: left; */
}

.box1,
.box2,
.box3,
.box4 {
	float: left;
	margin: 5px;
}

h3 {
	font-size: 16px;
	color: #4D4D4D;
}

.ziti {
	font-size: 14PX;
	color: #640000;
}

.ziti1 {
	font-size: 12px;
	color: blue;
}