HTML---布局（详解）

文章目录网页布局常用标签网页布局实例实例1:用div实现：实例2:用table实现我们在完成老师布置的前端html任务时，往往布局是最关键的，我们必须先从宏观上把握页面大致的构成，通过标签先确定下页面总体有那些东西，将整体框架写好，之后才是对各个部分进行细致的填充。网页布局常用标签div：是块级元素，它可用于组合其他 HTML 元素的容器，它没有确切的含义，天生是用来进行页面布局的，除此之外，由于

Philo`

13974人浏览 · 2022-01-12 22:14:11

Philo` · 2022-01-12 22:14:11 发布

文章目录

网页布局常用标签
网页布局实例
- 实例1:用div实现：
- 实例2:用table实现

我们在完成老师布置的前端html任务时，往往布局是最关键的，我们必须先从宏观上把握页面大致的构成，通过标签先确定下页面总体有那些东西，将整体框架写好，之后才是对各个部分进行细致的填充。

网页布局常用标签

div：是块级元素，它可用于组合其他 HTML 元素的容器，它没有确切的含义，天生是用来进行页面布局的，除此之外，由于它属于块级元素，浏览器会在其前后进行换行。
table：是表格元素，每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等,这样也给我们提供了很好的容器进行页面布局。

网页布局实例

先给出目标页面大致样式：
在这里插入图片描述

实例1:用div实现：

1.首先肯定是在一个大的div内实现
2.其次，可以明显发现该页面分为上中下三个大部分，中间部分又包含两个部分
3.进行大致的框架实现：

<body>
		<!-- 整体 -->
		<div>
			<!-- 顶部 -->
			<div id="top">	
			</div>
			
			<!-- 中间部分 -->
			<div id="middle">	
				<div id="middle-left">
				</div>
				
				<div id="middle-right">
				</div>
			</div>
			
			<!-- 底部 -->
			<div id="bottom">	
			</div>
			
		</div>
		
		
	</body>

4.完善各个部分：
4.1顶部实现：

效果图：
在这里插入图片描述

关键字解释：
background-color设置的是背景颜色，一般用在块级元素中
text-align设置的是块级元素中的文本位置，不可用在span标签中，无作用

4.2中间部分实现：

效果图：
在这里插入图片描述

关键字解释：
list-style: none;设置的是列表不显示格式，所以列表前端无.
float:left;设置的是块级元素左浮动，这里的左边部分设置的是左浮动，右边部分设置的是右浮动。
值得注意:的是，这里的两个部分设置的宽和高是经过计算的，因为整体宽是500px，所以左右两部分的宽和为500px

4.3底部实现：
效果图：
在这里插入图片描述

以上就是一步一步进行的布局实现，一定要从大到小进行设计和完善。

实例2:用table实现

具体代码为：

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>菜鸟教程(runoob.com)</title> 
	</head>
	<body>
		<!-- 整体 -->
		<table width="500px">
			<!-- 顶部实现 -->
			<tr>
				<td colspan="2" style="background-color:#FFA500; text-align: center;">
					<h1>主要的网页标题</h1>
				</td>
			</tr>
			<!-- 中间部分实现 -->
			<tr>
				<td style="background-color:#FFD700;width:200px;vertical-align:top;">
					<ul style="list-style: none;">
						<li>菜单</li>
						<li>HTML</li>
						<li>CSS</li>
						<li>JavaScript</li>
					</ul>
				</td>
				<td style="background-color:#eeeeee;height:200px;width:300px;vertical-align:top;text-align: center;">
					内容在这里</td>
			</tr>
			<!-- 底部实现 -->
			<tr>
				<td colspan="2" style="background-color:#FFA500;text-align:center;">
					@好好学习</td>
			</tr>
		</table>

	</body>
</html>