CSS+DIV

最新推荐文章于 2023-09-23 15:51:54 发布

小丸子i

最新推荐文章于 2023-09-23 15:51:54 发布

阅读量260

点赞数 1

文章标签： CSS+DIV

本文链接：https://blog.csdn.net/qq_41139281/article/details/80440597

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0px auto;
			}
			
			.all {
				width: 1080px;
				height: 310px;
				background-color: white;
			}
			
			.top {
				width: 1080px;
				height: 50px;
				background-color: whitesmoke
			}
			
			.zi {
				line-height: 50px;
				font-size: 18px;
				color: #0AA770;
				margin-left: 30px;
			}
			
			.content {
				width: 1080px;
				height: 260px;
				border: 1px solid black;
			}
			
			.content dl {
				width: 142px;
				height: 230px;
				margin-left: 30px;
				margin-top: 10px;
				float: left;
			}
			
			.content dl a {
				text-decoration: none;
				color: black;
			}
			
			.content dl a:hover {
				color: #0AA770;
				text-decoration: underline;
			}
			
			.content dl dt p {
				font-size: 14px;
				color: silver;
			}
		</style>
	</head>

	<body>
		<div class="all">
			<div class="top">
				<p class="zi">全网首播</p>
			</div>
			<div class="content">
				<dl>
					<dd>
						<a href="#" title="奇葩朵朵"><img src="img/01.png" /></a>
					</dd>
					<dt><a href="#">奇葩朵朵</a></dt>
					<dt><p>张若昀李现学霸争锋</p></dt>
				</dl>
				<dl>
					<dd>
						<a href="#" title="21克拉"><img src="img/02.png" /></a>
					</dd>
					<dt><a href="#">21克拉</a></dt>
					<dt><p>热巴郭京飞互怼</p></dt>
				</dl>
				<dl>
					<dd>
						<a href="#" title="黑豹"><img src="img/03.png" /></a>
					</dd>
					<dt><a href="#">黑豹</a></dt>
					<dt><p>漫威黑富帅来袭</p></dt>
				</dl>
				<dl>
					<dd>
						<a href="#" title="红海行动"><img src="img/04.png" /></a>
					</dd>
					<dt><a href="#">红海行动</a></dt>
					<dt><p>特种部队跨境救援</p></dt>
				</dl>
				<dl>
					<dd>
						<a href="#" title="水形物语"><img src="img/05.png" /></a>
					</dd>
					<dt><a href="#">水形物语</a></dt>
					<dt><p>美女野兽跨族虐恋</p></dt>
				</dl>
				<dl>
					<dd>
						<a href="#" title="三块广告牌"><img src="img/06.png" /></a>
					</dd>
					<dt><a href="#">三块广告牌</a></dt>
					<dt><p>暴力母亲为女寻凶</p></dt>
				</dl>
			</div>
		</div>
	</body>
</html>

代码结果如下图所示：