您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
一纸荒年 发布于2019年09月18日 19:44

原创 HTML 布局

88 次浏览 读完需要≈ 8 分钟 HTML

内容目录

使用 <div> 元素的 HTML 布局

<div> 素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。

这个例子使用了五个<div>元素来创建多列布局:

<body>
<div id="header">顶部(header)</div>
<div id="main">
	<div class="menu">菜单(menu)</div>
	<div class="content">内容(content)</div>
	<div class="sidebar">右侧(sidebar)</div>
</div>
<div id="footer">底部(footer)</div>
</body>

运行代码


使用 HTML5 的网站布局

HTML5 提供的新语义元素定义了网页的不同部分:

标签 描述
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(比如侧栏)
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
<body>
	<header>顶部(header)</header>
	<section>
		<aside>菜单(menu)</aside>
		<article>内容(content)</article>
		<aside>右侧(sidebar)</aside>
	</section>
	<footer>底部(footer)</footer>
</body>

运行代码


使用表格的 HTML 布局

<table>元素不是作为布局工具而设计的,主要作用是显示表格化的数据。

使用 <table>元素能够取得布局效果,因为能够通过 CSS 设置表格元素的样式:

<body>
	<table border="0">
		<tr>
			<td id="header" colspan="2">
				<h3>顶部(header)</h3>
			</td>
		</tr>
		<tr id="section">
			<td id="menu">菜单(menu)</td>
			<td id="content">内容(content)</td>
			<td id="sidebar">右侧(sidebar)</td>
		</tr>
		<tr>
			<td id="footer" colspan="2">
				<h3>底部(footer)</h3>
			</td>
		</tr>
	</table>
</body>

运行代码

  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论

打开导航菜单