CSS布局实战-优快云博客

本文链接：https://blog.youkuaiyun.com/shiyu18/article/details/109325164

css练习

css练习布局，并完成一下布局: 网上截下的图片
要求:主要练习布局，并且精简代码（浏览器加载时提升浏览器加载速度）

分析:除首航文字外，其余部分均是图片，并且一二行图片和三四行图片间距，宽高相等。
代码实现:
1.html部分：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2</title>
		<link rel="stylesheet" type="text/css" href="style1-1.css">
	</head>
	<body>
		<div id="a1">
			<div class="h1"></div>
			<div style="height:18px"></div>
			<div class="img1"><img src="./style2.png"></div>
			<div class="img2"><img src="./style3.png"></div>
			<div class="img3"><img src="./style4.png"></div>
			<div class="img4"><img src="./style5.png"></div>
			<div class="img5"><img src="./style6.png"></div>
			<div class="img6"><img src="./style7.png"></div>
			<div class="img1"><img src="./style8.png"></div>
			<div class="img2"><img src="./style9.png"></div>
			<div class="img3"><img src="./style10.png"></div>
			<div class="img4"><img src="./style11.png"></div>
			<div class="img5"><img src="./style12.png"></div>
			<div class="img6"><img src="./style13.png"></div>
		</div>
	</body>
</html>

2.css部分：

#a1{
	width:1785px;
	height:1213px;
	margin:0 auto;
	background-color:#ffffff;
}
.h1{
	background-image:url(./style1.png);
	float:left;
	width:1785px;
	height:86px;
}
.img1{
	float:left;
	width:748px;
	height:245px;
	margin:15px 0 0 9px;
}
.img2{
	float:left;
	width:591px;
	height:245px;
	margin:15px 0 0 15px;
}
.img3{
	float:left;
	width:401px;
	height:245px;
	margin:15px 0 0 15px;
}
.img4{
	float:left;
	width:400px;
	height:245px;
	margin:15px 0 0 8px;
}
.img5{
	float:left;
	width:592px;
	height:245px;
	margin:15px 0 0 13px;
}
.img6{
	float:left;
	width:748px;
	height:245px;
	margin:15px 0 0 13px;
}

实现效果：
在这里插入图片描述
总结：可能是自己练习还不够熟练，在做的过程中遇到了一个问题，代码只需要设置前两行图片，但是由于自己抠图尺寸不统一导致在写图片高的时候也不是一样的，写前两行图片时没有出现问题但是在直接添加后两行图片时出现问题 float:left 左对齐因为前两行图片高度属性不一致，导致出现空白，无法正常左对齐排列。
解决办法：需要把盒子高度 height: 调整一致

css布局练习

css练习