盒子模型

最新推荐文章于 2025-02-07 20:14:20 发布

HGG-

最新推荐文章于 2025-02-07 20:14:20 发布

阅读量91

点赞数

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/qq_40959562/article/details/99701645

版权

web前端专栏收录该内容

17 篇文章

订阅专栏

在这里插入图片描述

使用盒子模型创建如下效果图：

（附图）
<html>
	<head>
		<title>小猫</title>
		<style>
			.d1{
				border:1px solid blue;
				margin:2px;
				float:left;
			}
			.d2{
				border:1px solid red;
				width:500px;
				height:300px;
				background-color:greenyellow;
			}
		</style>
	</head>
	<body>
		
	<div class="d2">
		<ul>
			<div class="d1"><img src="xm.png"/></div>
			<div class="d1"><img src="xm.png"/></div>
			<div class="d1"><img src="xm.png"/></div>
			<div class="d1"><img src="xm.png"/></div>
			<div style="clear:both"/>
			<div class="d1"><img src="xm.png"/></div>
			<div class="d1"><img src="xm.png"/></div>
			<div class="d1"><img src="xm.png"/></div>
			<div class="d1"><img src="xm.png"/></div>
			<div style="clear:both"/>
			<div class="d1"><img src="xm.png"/></div>
			<div class="d1"><img src="xm.png"/></div>
			<div class="d1"><img src="xm.png"/></div>
			<div class="d1"><img src="xm.png"/></div>
		</ul>
	</div>
	</body>
</html>