Web开发基础-CSS-17

最新推荐文章于 2024-08-02 18:01:26 发布

原创最新推荐文章于 2024-08-02 18:01:26 发布 · 242 阅读

1 ·

CC 4.0 BY-SA版权

Web开发专栏收录该内容

108 篇文章

订阅专栏

本文通过实例演示如何利用CSS中的浮动属性与盒子模型创建一个美观的照片墙布局。具体包括设置列表项的宽度、内外边距及浮动等属性，实现图片与文字的合理排列。

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

最终页面效果: