html5学习小结，float练习。

最新推荐文章于 2023-02-20 21:31:02 发布

duenyang

最新推荐文章于 2023-02-20 21:31:02 发布

阅读量1k

点赞数

文章标签： H5 初学 float 练习

本文链接：https://blog.csdn.net/duenyang/article/details/52065081

版权

经过两天的H5学习之后，做了一下ｆｌｏａｔ属性的练习，要做出来的效果为：

下面为代码部分，所用到的知识不多，不过才现在刚开始，以后要学的东西还有很多，大家继续加油！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>float练习</title>
	<style>
	.all{
		width: 620px;
		text-align: center;
		border:1px solid black;
		overflow: hidden;
	}
	.all .head{
		border:1px solid red;
		width: 122px;
		height: 120px;
		float: left;
	}
	.clear{
		clear: both;height: 0px;overflow: hidden;
	}
	.all .six{
		float: left;
		width: 404px;
		height: 182px;
		border:1px solid black;
	}
	.all .seven{
		width: 212px;
		height: 222px;
		float: right;
		border:1px solid black;
	}
	.all .ba{
		width: 257px;
		height: 187px;
		float: left;
		border:1px solid black;
	}
	.all .jiu{
		width: 145px;
		height: 187px;
		float: left;
		border:1px solid black;
	}
	.all .d10{
		width: 212px;
		height: 246px;
		float: right;
		border:1px solid black;
	}
	.all .d11{
		width: 404px;
		height: 97px;
		float: left;
		border:1px solid black;
	}
	.all .d12{
		float: left;
		width: 618px;
		height: 72px;
		border:1px solid black;
	}
	</style>
</head>
<body>
	<div class="all">
		<div class="head">1</div>
		<div class="head">2</div>
		<div class="head">3</div>
		<div class="head">4</div>
		<div class="head">5</div>
		<div class="clear"></div>
		<div class="six">6</div>
		<div class="seven">7</div>
		<div class="ba">8</div>
		<div class="jiu">9</div>
		<div class="d10">10</div>
		<div class="d11">11</div>
		<div class="d12">12footer</div>
	</div>
</body>
</html>

duenyang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5学习小结，float练习。

经过两天的H5学习之后，做了一下ｆｌｏａｔ属性的练习，要做出来的效果为：下面为代码部分，所用到的知识不多，不过才现在刚开始，以后要学的东西还有很多，大家继续加油！html lang="en">head> meta charset="UTF-8"> title>float练习title> style> .all{ width: 620px; text-align:
复制链接

扫一扫