html5&css&js代码 013 常见布局
- 一、代码
- 二、解释
一个简单的网页布局。
一、代码
<!DOCTYPE html>
<html lang="zh-cn">
<head><!-- 页面标题和样式定义 --><title>编程笔记 html5&css&js HTML布局 常见布局 </title><meta charset="utf-8"/><style>body {color: cyan; /* 文本颜色 */background-color: teal; /* 背景颜色 */}</style>
</head>
<body>
<table align="center" width="700" border="0"><!-- 网页标题区域 --><tr><td colspan="2" style="background-color: darkblue"><h1 align="center">这里是网页的标题</h1></td></tr><!-- 菜单和内容区域 --><tr><td style="background-color: yellowgreen; width: 200px"><!-- 菜单栏 --><b>这里可以写菜单</b><br/><br/>HTML编程笔记<br/>CSS编程笔记<br/>JavaScript编程笔记</td><!-- 主要内容区域 --><td style="background-color: teal; height: 200px; width: 400px">这里写网页的内容<br/><br/>少年软件工程师是一个成长计划</td></tr><!-- 底部版权区域 --><tr><td colspan="2" style="background-color: #ffa500; text-align: center">版权 © https://www.hyrj.com</td></tr>
</table>
</body>
<!-- 页面底部信息 -->
<footer style="text-align: center;margin: 20px;font-size: 1.5rem;font-weight: bold;color: #ffcc00;">HTML+CSS+JavaScript编程配套代码 作者：明月看潮生
</footer>
</html>
二、解释
这段HTML代码定义了一个简单的网页布局，功能包括：
- 页面标题和样式定义：通过
<title>标签设置页面标题，通过<style>标签定义了body的文本颜色和背景颜色。 - 网页标题区域：使用一个表格的行（
<tr>）和单元格（<td>）来布局，设置单元格的背景颜色和文本居中对齐。 - 菜单和内容区域：使用表格的另一行来布局，左侧单元格显示菜单内容，右侧单元格显示网页主要内容，通过
<br/>标签添加换行。 - 底部版权区域：使用表格的最后一行来显示底部版权信息，设置单元格的背景颜色和文本居中对齐。
- 页面底部信息：使用
<footer>标签定义页面底部信息，设置文本居中、字体大小、加粗和颜色。
整个网页使用了表格（<table>）来进行布局，通过单元格的合并（colspan）和样式属性来实现不同的布局效果。
 Robsense SwarmLink)
