前端学院学习，复杂静态页面

最新推荐文章于 2021-05-14 11:37:28 发布

qq_40891002

最新推荐文章于 2021-05-14 11:37:28 发布

阅读量264

点赞数

分类专栏： css 文章标签： html css

本文链接：https://blog.csdn.net/qq_40891002/article/details/106138800

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前言

在做静态页面的时候会遇到诸多问题，自己现在也没能解决，比如如何能够准确判断单个盒子在页面的位置，设置多少像素才能和设计图百分之99吻合，做的过程还发现弹性盒子都没有理解好，于是又翻书，觉得最好用的还是绝对定位，和相对定位权当记录一下吧，菜鸟学习之路还好漫长还有一个问题，代码的不规范性问题，比如命名，最后命的我都头大

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复杂页面实现</title>
		<link rel="stylesheet" type="text/css" href="复杂页面实现.css">
	</head>
	<body>
	<div class="zuidahezi">
		<div class="zuo">
			<div class="changfangxing">
			<div class="fanghe1"><img src="images/12_15_03.png"></div>
			<div class="fanghe2"><img src="images/12_15_06.png"></div>
			<div class="fanghe3"><img src="images/12_15_08.png"></div>
			<div class="fanghe4"><img src="images/12_15_10.png"></div>
			</div>
			<div class="zuoxia">
				<div class="smallbox1"><img src="images/12_15_12.png"></div>
				<div class="smallbox2"><img src="images/12_15_14.png"></div>
			</div>
		</div>
		<div class="zhong">
			<div class="zhong1"><img src="images/12_15_03%20(2).png"></div>
			<div class="zhong2"><img src="images/12_15_05.png"></div>
			<div class="zhong3"><img src="images/12_15_06%20(2).png"></div>
			<div class="zhong4"><img src="images/12_15_07.png"></div>
			<div class="zhong5"><img src="images/12_15_08%20(2).png"></div>
			<div class="zhong6"><img src="images/12_15_09.png"></div>
			<div class="zhong7"><img src="images/12_15_10%20(2).png"></div>
			<div class="zhong8"><img src="images/12_15_11.png"></div>
			<div class="zhong9"><img src="images/12_15_12%20(2).png"></div>
			<div class="zhong10"><img src="images/12_15_13.png"></div>
			<div class="zhong11"><img src="images/12_15_14%20(2).png"></div>
			<!-- <div class="zhong12"><img src="images/12_15_15.png"></div>
			<div class="zhong13"><img src="images/12_15_16.png"></div>
			<div class="zhong14"><img src="images/12_15_18.png"></div> -->
		</div>
		<div class="you">
			
			<div class="top"><img src="images/12_15_03%20(3).png"></div>
			<div class="content">
				<div class="content1"><img src="images/12_15_06%20(3).png"></div>
			<div class="content2"><img src="images/12_15_08%20(3).png"></div>
			</div>
		</div>
	</div>
	</body>
</html>

css部分

.zuidahezi{
	position: relative;
	width: 100%;
	height: 600px;
	/* background-color: black; */
}
*{
	margin: 0px;
	padding: 0px;
}
.zuo{
	width: 82px;
	height: 604px;
/* 	border: 1px solid black; */
	position: absolute;
	left: 0px;
 	background-color: black; 
	padding: 0px;
	/* background-color: black; */
	
}
.zhong{
	width: 250px;
	height: 604px;
	/* border: 1px solid red; */
	position: absolute;
	left: 82px;
	background-color: black;
}
.you{
	width:946px;
	/* border: 1px solid black; */
	position: absolute;
	left: 330px;
	height: 604px;
	/* background-color: red; */
}
.fanghe1,.fanghe2,.fanghe3,.fanghe4{
	width: 50px;
	height: 50px;
/* 	border: 1px solid black; */
	margin: 0px 15px 15px 10px;

}
.fanghe1 img,.fanghe2 img,.fanghe3 img,.fanghe4 img{
	width: 60px;
	height: 60px;
}
.zuoxia{
	height:30px;
	width: 60px;
	/* border: 1px solid blue; */
	margin: 300px 2px 3px 8px;
	display: flex;
	position: fixed;
	bottom: 0px;
	left: 0px;
	
}
.smallbox1{
	width: 2px;
	height: 27px;
	/* border: 1px solid black; */
	flex: 1;
	background-color: blue;
	margin: 2px;
}
.smallbox2{
	width: 2px;
	height: 27px;
	/* border: 1px solid black; */
	flex: 1;
	margin: 2px;
}
.smallbox1 img{
	width: 24px;
	height: 27px;
}
.smallbox2 img{
	width: 25px;
	height: 27px;
}
.zhong1{
	width: 248px;
	height: 38px;
/* 	border: 1px solid black; */
	margin: 0px 0px 0px 0px;
}
.zhong1 img{
	width: 250px;
	height:38px;
}
.zhong2{
	width:249px;
	height: 155px;
/* 	border: 1px solid black; */
	margin: 0px 0px 0px 0px;
}
.zhong2 img{
	width: 250px;
	height: 155px;
}
.zhong3{
	width:250px;
	height: 52px;
/* 	border: 1px solid blue; */
	margin: 0px 0px 0px 0px;
}
.zhong3 img{
	width: 250px;
	height: 52px;
}
.zhong4{
	width: 250px;
	height: 40px;
}
.zhong4 img{
	width: 250px;
	height: 40px;
}
.zhong5{
	width: 250px;
	height: 40px;
}
.zhong5 img{
	width: 250px;
	height: 40px;
}
.zhong6{
	width: 250px;
	height: 40px;
}
.zhong6 img{
	width: 250px;
	height: 40px;
}
.zhong7{
	width: 250px;
	height: 50px;
}
.zhong7 img{
	width: 250px;
	height: 50px;
}
.zhong8{
	width: 250px;
	height: 50px;
}
.zhong8 img{
	width: 250px;
	height: 50px;
}
.zhong9{
	width: 250px;
	height: 40px;
}
.zhong9 img{
	width: 250px;
	height: 40px;
}
.zhong10{
	width: 250px;
	height: 40px;
}
.zhong10 img{
	width: 250px;
	height: 40px;
}
.zhong11{
	width: 250px;
	height: 40px;
}
.zhong11 img{
	width: 250px;
	height: 40px;
}
.zhong12{
	width: 250px;
	height: 40px;
}
.zhong12 img{
	width: 250px;
	height: 40px;
}
.zhong13{
	width: 250px;
	height: 40px;
}
.zhong13 img{
	width: 250px;
	height: 40px;
}
.zhong14{
	width: 250px;
	height: 70px;
	position: fixed;
	bottom: 0px;
	left: 84px;
}
.zhong14 img{
	width: 250px;
	height: 70px;
}
.changfangxing{
	position: fixed;
	top: 0px;
	left: 0px;
}
.top{
	width: 946px;
	float: right;
	height: 50px;
	/* border: 1px solid red; */
	position: fixed;
	top: 0px;
	right: 0px;
	background-color: red;
	
}
.top img{
	width: 946px;
	height:50px;
}
 .content{
	width: 944px;
	height: 553px;
	/* border: 1px solid green; */
  /*  background-color: black; */
	/* display: flex; */
	margin: 50px 0px 0px 0px;
	position: relative;
} 
/*s*/
 .content1{
	
	width: 300px;
	height: 546px;
/* 	border: 1px solid blue; */
	position: absolute;
	left: 1px;
	top: 3px;
/* 	background-color: blue; */
} 
.content1 img{
	width: 300px;
	height: 544px;
}
.content2{
	width: 640px;
	height: 546px;
/* 	border: 1px solid blue; */
	position: absolute;
	left: 301px;
	top: 3px;
}
.content2 img{
	width: 640px;
	height: 546px;
}

完！！