新手学习web第六弹

4.9

今天我们学习了web中的新知识点，框架设置，页面布局

页面布局

含义

所谓页面布局就是给内容“排座位，划分区域”，决定页面里各个元素放哪、多大、怎么对齐、怎么适配不同屏幕

核心作用

定结构：把标题、导航、内容、侧边栏、页脚等模块划分区域，让页面有清晰骨架。
控位置：规定元素是左/中/右、横排/竖排、是否浮动、是否重叠。
管尺寸：控制宽度、高度、间距、内外边距，保证整齐不拥挤。
做适配：在电脑、平板、手机等不同设备上自动调整，保证可用好看。

提体验：引导视觉流，突出重点，降低阅读/操作成本

学会了左右布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>左右结构布局</title>
		<style type="text/css">
			.parent{
				width: 1000px;
				margin: 0 auto;
			}
			.right{
			    /*display: inline-block;*/
			   /*实现左右布局用浮动布局*/
			   float: right;
				width: 400px;
				height: 600px;
				background-color: #0000FF;
			}
			.left{
				/*display: inline-block;*/
				float: left;
				width: 600px;
				height: 600px;
				background-color: yellowgreen;
			}
			
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="left">左部</div>
		<div class="right">右部</div>
		</div>
		
	</body>
</html>

上下布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>上下结构布局</title>
		<style type="text/css">
			body{
				color: yellowgreen;
				font-family: "微软雅黑";
				font-size: 40px;
			}
			.top{
				margin: 0 auto;
				width:1000px;
				height:200px ;
				background-color: #0000FF;
				/*水平居中*/
				text-align: center;
				line-height: 200px;
			}
			.bottom{
				margin:0 auto;
				width: 1000px;
				height: 600px;
				background-color:gold;
				text-align: center;
				line-height: 600px;
			}
		</style>
	</head>
	<body>
		<div class="top">上部</div>
		<div class="bottom">下部</div>
	</body>
</html>

T型布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>T型布局</title>
		<style type="text/css">
			 .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;
			 }
			
		</style>
	</head>
	<body>
		<div class="top">上部</div>
		<div class="bottom">
			<div class="left">下部左</div>
			<div class="right">下部右</div>
		</div>
	</body>
</html>

posted on 2026-04-09 21:10 沉鱼舟作晚阅读(23) 评论(1) 收藏举报

刷新页面返回顶部

cyzzs

导航

公告

新手学习web第六弹

4.9

页面布局

含义

核心作用