HTML 布局
<h2><span style=“color: #00ccff;”><strong>前言：</strong></span></h2>
<p>网站常常以多列显示内容（就像杂志和报纸）。</p>
<h2><span style=“color: #00ccff;”><strong>HTML 布局 - 使用div元素</strong></span></h2>
<p><div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。</p>
<h2><span style=“color: #00ccff;”><strong>HTML 布局 - 使用table元素</strong></span></h2>
<p>使用 HTML <table> 标签是创建布局的一种简单的方式。</p>
<h2><span style=“color: #00ccff;”><strong>使用 HTML5 的网站布局</strong></span></h2>
<p>HTML5 提供的新语义元素定义了网页的不同部分：
HTML5 语义元素</p>
<div style=" width:100%; height:340px; margin:0 auto; border:1px solid black;">
<p><span style=“color:red;”><strong>header：</strong></span>定义文档或节的页眉</p>
<hr />
<p><span style=“color:red;”><strong>nav：</strong></span>定义导航链接的容器</p>
<hr />
<p><span style=“color:red;”><strong>section：</strong></span>定义文档中的节</p>
<hr />
<p><span style=“color:red;”><strong>article：</strong></span>定义独立的自包含文章</p>
<hr />
<p><span style=“color:red;”><strong>aside：</strong></span>定义内容之外的内容（比如侧栏）</p>
<hr />
<p><span style=“color:red;”><strong>footer：</strong></span>定义文档或节的页脚</p>
<hr />
<p><span style=“color:red;”><strong>details：</strong></span>定义额外的细节</p>
<hr />
<p><span style=“color:red;”><strong>summary：</strong></span>定义 details 元素的标题</p>
</div>
<p>这个例子使用 <header>, <nav>, <section>, 以及 <footer> 来创建多列布局：</p>
<h3></h3>
<pre class=“line-numbers language-html”><code class=“language-html”><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>陌上花-blog</title>
<style>
header {
background-color:#FFA500;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<header>
<h1>陌上花-blog</h1>
</header>
<nav>
首页<br>
关于<br>
</nav>
<section>
<h1>London</h1>
<p>
内容在这里
</p>
</section>
<footer>
版权 © 陌上花
</footer>
</body>
</html></code></pre>
<p>以及id命名法：</p>
<pre class=“line-numbers language-html”><code class=“language-html”><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>陌上花-blog</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">陌上花-blog</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>首页</b><br>
关于<br>
</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;">
版权 © 陌上花</div>
</div>
</body>
</html></code></pre>
<p>下面的例子使用表格制作：</p>
<pre class=“line-numbers language-html”><code class=“language-html”><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>陌上花-blog</title>
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>陌上花-blog</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>首页</b><br>
关于<br>
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © 陌上花</td>
</tr>
</table>
</body>
</html></code></pre>
<p><span style=“color: red;”><strong>注：即使可以使用 HTML 表格来创建漂亮的布局，但表格的目的是呈现表格化数据，不是布局工具！</strong></span></h2></p>
评论区
<无法渲染
LinuxChrome
什么意思 /小纠结
AndroidChrome
>还有这个
LinuxChrome
一群狂魔
LinuxChrome
(⊙o⊙)
AndroidChrome
DIV狂魔 居然无法渲染
LinuxChrome