css第九天盒子布局

最新推荐文章于 2024-01-10 20:24:43 发布

流浪的小宇

最新推荐文章于 2024-01-10 20:24:43 发布

阅读量156

点赞数

分类专栏： css基础

本文链接：https://blog.csdn.net/b150461/article/details/100525814

版权

css基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

效果图：

在这里插入图片描述

html代码：

<!doctype html>
<html>
	<head>
		<title>
			盒子加强版
		</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="outcat.css">
	</head>
	<body>
		<div>
			<ul class="ul-box">
				<li><a href="#"><img src="1.jpg"><span>往后余生</span></a></li>
				<li><a href="#"><img src="2.jpg"><span>风雪是你</span></a></li>
				<li><a href="#"><img src="3.jpg"><span>平淡是你</span></a></li>
				<li><a href="#"><img src="4.jpg"><span>清贫也是你</span></a></li>
				<li><embed src="cat2.mp4"><a href="#"><span>珍惜彼此</span></a></li>
				<li><embed src="cat2.mp4"><a href="#"><span>相扶到老</span></a></li>
			</ul>
		</div>
	</body>
</html>

css代码：

div{
	width:800px;
	height:550px;
	margin:10px 0 0 150px;
}
.ul-box{
	list-style-type:none;
}
.ul-box li{
	float:left;
	width:190px;
	height:200px;
	margin-top:25px;
	margin-left:30px;
} 
.ul-box  img, embed{
	width:140px;
	height:120px;
	margin:10px 0 0 30px;
}
a:link{
	color:black;
	text-decoration:none;
}
a:hover{
	font-size:200%;
	color:red;
	text-decoration:underline;
}
.ul-box span{

	font-family:'华文楷体';
	display:block;
	width:180px;
	height:70px;
	text-align:center;

}