Web开发基础-CSS-17_css17-CSDN博客

本文链接：https://blog.csdn.net/Coder_Boy_/article/details/80947846

案例练习：主要练习CSS中元素浮动与盒子模型【BOX模型】的使用

案例版本修改（1）：照片墙

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>照片墙</title>
		<style type="text/css">
			body {
				background-color: #066;
			}
			
			ul {
				width:780px;
				border:1px solid red;
				margin:30px auto;
				/* 去掉列表前面的符号 */
				list-style:none;
			}
			
			li {
				width:218px;	
				padding:10px;
				margin:10px;
				border:1px solid #ccc;
				background-color:#fff;
				/* float: left; */
			}
			
			p{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<img alt="" src="../images/01.jpg">
				<p>啊，致敬青春！</p>
			</li>
			<li>
				<img alt="" src="../images/02.jpg">
				<p>你是美好的！</p>
			</li>
			<li>
				<img alt="" src="../images/03.jpg">
				<p>多希望时光可以倒流！</p>
			</li>
			<li>
				<img alt="" src="../images/04.jpg">
				<p>只是一厢情愿的愿望而已！</p>
			</li>
			<li>
				<img alt="" src="../images/05.jpg">
				<p>把握当下就是珍惜</p>
			</li>
			<li>
				<img alt="" src="../images/06.jpg">
				<p>时光可以的定格在心中！</p>
			</li>
		</ul>
	</body>
</html>

最终页面效果: