目录
文章目录隐藏
  1. 网站布局
  2. 使用 <div> 元素的 HTML 布局

网站布局

大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。

注:虽然我们可以使用 HTML table 标签来设计出漂亮的布局,但是 table 标签是不建议作为布局工具使用的 – 表格不是布局工具。

使用 <div> 元素的 HTML 布局

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

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

实例

<style>
#header {
    background-color:black;
    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>

<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">London
Paris
Tokyo</div>
<div id="section">
<h2>London</h2>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</div>
<div id="footer">Copyright ? mybj123.com</div>

效果:

html 布局

HTML 布局 – 使用表格

使用 HTML <table> 标签是创建布局的一种简单的方式。

大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。

下面的例子使用三行两列的表格 – 第一和最后一行使用 colspan 属性来横跨两列:

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

HTML 布局

使用 HTML5 的网站布局

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

HTML5 语义元素

header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(比如侧栏)
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题

这个例子使用 <header>, <nav>, <section>, 以及 <footer> 来创建多列布局:

实例

<header>
<h1>City Gallery</h1>
</header><nav>London
Paris
Tokyo</nav><section>
<h1>London</h1>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</section><footer>Copyright mybj123.com.cn</footer>

HTML 布局 – 有用的提示

使用 CSS 最大的好处是,如果把 CSS 代码存放到外部样式表中,那么站点会更易于维护。通过编辑单一的文件,就可以改变所有页面的布局。

由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局,并优化它们)。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » HTML 布局

发表回复