布局结构

以下是布局结构笔记

点击查看代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>口型布局</title>
		<style type="text/css">
			/*将所有属性去掉*/
			*{margin: 0; padding: 0;}
			 .top{
			 	margin: 0 auto;
			 	width:1000px ;
			 	height: 400px;
			 	background-color: chartreuse;
			 }
			 .bottom{
			 	margin: 0 auto;
			 	width:1000px ;
			 	height: 600px;
			 	background-color: wheat;
			 }
			 .left{
			 	width:400px ;
			 	height: 600px;
			 	background-color: bisque;
			 	float: left;
			 }
			 .right{
			 	width:600px ;
			 	height: 600px;
			 	background-color: yellow;
			 	float: left;
			 }
			  .a{
			 	width:600px ;
			 	height: 400px;
			 	background-color: black;
			 }
			 .c{
			 	width:400px ;
			 	height: 400px;
			 	background-color: gray;
			 	float: left;
			 }
			 .d{
			 	width:200px ;
			 	height: 400px;
			 	background-color: palegreen;
			 	float: left;
			 }
			 .b{
			 	width:600px ;
			 	height: 200px;
			 	background-color: chocolate;
			 }
			
		</style>
	</head>
	<body>
		<div class="top">上部</div>
		<div class="bottom">
			<div class="left">下部左</div>
			<div class="right">
				<div class="a">
					<div class="c">
						尚座
					</div>
					<div class="d">
						下游
					</div>
				</div>
				<div class="b">
					下右下
				</div>
			</div>
		</div>
	</body>
</html>
课后作业
点击查看代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>课后作业</title>
		<style type="text/css">
			/**{margin: 0; padding: 0;}*/   /*把所有元素内外边距消零*/
			.parent{
				margin: 0 auto;
				width: 1000px;
				height: 500px;
				/*使文本水平居中*/
				text-align: center;
			}
			.son{
				/*将块元素转换成行内块，因为块元素能更改宽高，但自动换行，行内块也能改变宽高，但不自动换行*/
				display: inline-block;
			   /*float: left;*/
				width: 150px;
				height: 120px;
				/*设置背景色*/
				background-color:#fff;
				/*给元素加一个边框，宽度是一，solid为实线*/
				border: 1px solid;
				/*给元素设置一个内边距*/
				padding: 10px;
				
			}
			
			img{
				width:150px;
				height:120px;
				/*text-align: center;*/
			}
		</style>
			
		
	</head>
	<body>
		<div class="parent">
			<div class="son"><img src="img/漂亮照片.jpg"/></div>
			<div class="son"><img src="img/漂亮照片.jpg"/></div>
			<div class="son"><img src="img/漂亮照片.jpg"/></div>
			<div class="son"><img src="img/漂亮照片.jpg"/></div>
			
		</div>
	</body>
</html>
posted @ 2026-07-08 20:45  lvxuel  阅读(10)  评论(0)    收藏  举报