css布局练习

最新推荐文章于 2024-03-18 11:28:08 发布

shiyu18

最新推荐文章于 2024-03-18 11:28:08 发布

阅读量812

点赞数 1

分类专栏： css新手布局练习 css初学文章标签： css html

本文链接：https://blog.csdn.net/shiyu18/article/details/109325164

版权

css初学同时被 2 个专栏收录

3 篇文章 1 订阅

订阅专栏

css新手布局练习

2 篇文章 0 订阅

订阅专栏

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

shiyu18

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
css布局练习

css练习css练习布局，并完成一下布局:要求:主要练习布局，并且精简代码（浏览器加载时提升浏览器加载速度）分析:除首航文字外，其余部分均是图片，并且一二行图片和三四行图片间距，宽高相等。代码实现:1.html部分：<!doctype html><html> <head> <meta charset="utf-8"> <title>2</title> <link rel="stylesheet" ty
复制链接

扫一扫