css布局练习

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: 调整一致

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值