Web开发基础-CSS-17

案例练习：主要练习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>

最终页面效果:

案例细节分析：

我们会发现<ul>列表中li的左外边距默认为40px。ul总宽度780=img宽度218*3+（外边距10*2+内边距10*2）*3+线宽*6

图示解析:

我们添加左浮动代码

float: left;

再看下修改后页面效果

猜你喜欢