HTML基础-09-布局（使用＜div＞实现，使用＜table＞实现）

文章目录

1. 使用div实现

示例要求

用div创建一个 宽500px的块：

  • 顶端，画一个id="header"的框写标题
  • 中间，画一个id="menu"的框（高200，宽100）写菜单
  • 中间，画一个id="content"的框（高200，宽400）写内容
  • 底端，画一个id="footer"的框，写网站信息

完整代码

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>蜀</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;">
      版权 © xishu.com</div>
 
  </div>
 
</body>
 
</html>

说明：
margin-bottom:0：边框距离为0
float:left： 靠左浮动对齐
text-align:center：文本居中对齐

  • 显示结果
    在这里插入图片描述

2. 使用table实现

示例要求

用 table 创建一个 宽500px的块：

  • 顶端，画一个id="header"的框写标题
  • 中间，画一个id="menu"的框（高200，宽100）写菜单
  • 中间，画一个id="content"的框（高200，宽400）写内容
  • 底端，画一个id="footer"的框，写网站信息

完整代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>蜀</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;">
			版权 © xishu.com</td>
	</tr>
	</table>
</body>
</html>
  • 结果显示
    在这里插入图片描述

posted on   运维开发玄德公  阅读(66)  评论(0)  编辑  收藏  举报  

相关博文：
· CSS基础-09-布局（定位 position、浮动float，元素对其、图像对其、文本对齐、元素内内容对齐，元素堆叠）
· CSS基础-05-表格（表格边框、 折叠边框 border-collapse、水平对齐 text-align、垂直对齐 vertical-align 、表格填充 padding）
· html中使用table进行布局
· css +div 实现上中下布局
· HTML 布局
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示