盒子模型实战

最新推荐文章于 2023-02-08 10:53:47 发布

gocpplua

最新推荐文章于 2023-02-08 10:53:47 发布

阅读量981

点赞数

CC 4.0 BY-SA版权

分类专栏： PHP从入门到精通文章标签：独立开发者er 盒子模型入门盒子模型实战

本文链接：https://blog.youkuaiyun.com/chenqiai0/article/details/42815981

PHP从入门到精通专栏收录该内容

15 篇文章

订阅专栏

开门见山，先来一张效果图：

我写的盒子模型只要修改一个参数就可以控制一行图片放几张，每张间的间距等等。

还是直接上代码。

box.html

	<meta charset="UTF-8"/>
	<title>盒子模型2</title>
	<link rel="stylesheet" type="text/css" href="box2.css">
</head>

<body>
	<!-- div1在布局中起到一个控制整个内容显示的位置作用 -->
	<div class="div1">
	<!-- ul在布局中作用是可以控制显示内容的多少 -->
	<ul class="faceul">
		<li>
			<img src="2.PNG"/>
		</li>
		<li>
			<img src="2.PNG"/>
		</li>
		<li>
			<img src="2.PNG"/>
		</li>
		<li>
			<img src="2.PNG"/>
		</li>
		<li>
			<img src="2.PNG"/>
		</li>
		<li>
			<img src="2.PNG"/>
		</li>
	</ul>		
	</div>
</body>
</html>

box2.css

.div1
{
	width: 900px;
	height: 300px;
	border: 1px solid blue;
	margin: 5px 0px 0px 5px;
	/*padding-top: 80px;*?  /* 注意：padding会将盒子撑破 */
	padding-left: 0px;
}

.faceul
{
	width: 500px; /* 控制一行有几个 */
	height: 250;
	border: 1px solid red;
	padding-left: 0px; /* 让li可以靠近ul */
	margin-left: 5px;
}

.faceul li
{
	list-style-type: none;
	float: left; /* 左浮动 */
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-right: 5px;
	margin-top: 5px;

}

.faceul li img
{
	width: 90px;
	height: 90px;
	margin-left: 5px;
	margin-top: 5px;
}

大家可以试着修改参数，然后看效果，我觉得这样学习是最快的！