web前端布局小练习

最新推荐文章于 2024-10-07 21:54:14 发布

csdn_yzm

最新推荐文章于 2024-10-07 21:54:14 发布

阅读量4.4k

点赞数 5

参考于 https://blog.csdn.net/liushaozhuanyong/article/details/57407175

以下为自己写的代码（与原著者有所不同，或许是黑科技吧）：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			/*居中
			 * margin: 0 auto;*/
			#all {
				width: 970px;
				height: 593px;
				margin: 0 auto;
			}
			
			#top-left {
				width: 277px;
				height: 103px;
				background-color: red;
			}
			
			#top-right {
				margin-top: -103px;
				width: 679px;
				height: 103px;
				float: right;
			}
			
			#top-right1 {
				margin-left: 542px;
				width: 137px;
				height: 49px;
				background-color: green;
			}
			
			#top-right2 {
				margin-top: 8px;
				width: 679px;
				height: 46px;
				background-color: green;
			}
			
			#center {
				margin-top: 10px;
			}
			
			#center-left {
				float: left;
				width: 310px;
				height: 435px;
				background-color: yellow;
			}
			
			#lanse1 {
				float: left;
				width: 450px;
				height: 240px;
				background-color: skyblue;
				margin-left: 10px;
			}
			
			#lanse2 {
				float: left;
				width: 450px;
				height: 110px;
				background-color: skyblue;
				margin-top: 10px;
				margin-left: 10px;
			}
			
			#lanse3 {
				float: left;
				width: 450px;
				height: 30px;
				background-color: skyblue;
				margin-top: 10px;
				margin-left: 10px;
			}
			
			#zise {
				float: left;
				width: 190px;
				height: 400px;
				background-color: purple;
				margin-top: -360px;
				margin-left: 10px;
			}
			
			#lvse {
				width: 650px;
				height: 25px;
				background-color: green;
				float: left;
				margin-left: 10px;
				margin-top: 10px;
			}
			
			#bottom {
				width: 975px;
				height: 35px;
				background-color: #0000FF;
				margin-top: 10px;
				float: left;
			}
		</style>
	</head>

	<body>
		<div id="all">
			<div id="top">
				<div id="top-left"></div>
				<div id="top-right">
					<div id="top-right1"></div>
					<div id="top-right2"></div>
				</div>
			</div>

			<div id="center">
				<div id="center-left"></div>
				<div id="center-right">
					<div id="lanse">
						<div id="lanse1"></div>
						<div id="lanse2"></div>
						<div id="lanse3"></div>
					</div>
					<div id="zise"></div>
					<div id="lvse"></div>
				</div>
			</div>

			<div id="bottom"></div>
		</div>

	</body>

</html>