HTML布局

最新推荐文章于 2024-08-09 17:24:43 发布

小韩学长

最新推荐文章于 2024-08-09 17:24:43 发布

阅读量8.3k

点赞数 4

分类专栏： HTML学习篇

本文链接：https://blog.csdn.net/weixin_39036700/article/details/80641875

版权

HTML学习篇专栏收录该内容

12 篇文章 5 订阅

订阅专栏

HTML网页布局常用的是：div和table元素。

1、使用div元素的网页布局

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用div元素的网页布局</title>
</head>
<body>
	<div id="container" style="width:500px">

		<div id="header" style="background-color:#FFA500;">
			<h1 style="margin-bottom:0;">主要的网页标题</h1>
		</div>

		<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
			<b>菜单</b>
			<br>
			HTML<br>
			CSS<br>
			JavaScript
		</div>

		<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
		内容在这里
		</div>

		<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
		版权 © runoob.com
		</div>

	</div>
 
</body>
</html>

效果：

2、使用table元素的网页布局

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用table元素的网页布局</title>
</head>
<body>

	<table width="500" border="0">
	<tr>
		<td colspan="2" style="background-color:#FFA500;">
		<h1>主要的网页标题</h1>
		</td>
	</tr>
	
	<tr>
		<td style="background-color:#FFD700;width:100px;vertical-align:top;">
		<b>菜单</b><br>
		HTML<br>
		CSS<br>
		JavaScript
		</td>
		<td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">
		内容在这里</td>
	</tr>
	
	<tr>
		<td colspan="2" style="background-color:#FFA500;text-align:center;">
		版权 © runoob.com</td>
	</tr>
	</table>

</body>
</html>

效果：

补充：

<div>定义文档区块，块级(block-level)

<span>定义 span，用来组合文档中的行内元素。

示例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

    <p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我得父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>
    <div style="color:#0000FF">
      <h3>这是一个在 div 元素中的标题。</h3>
      <p>这是一个在 div 元素中的文本。</p>
    </div>
</body>
</html>