码云笔记前端博客
Home > HTML/CSS > HTML 布局

HTML 布局

2018-08-09 分类:HTML/CSS 作者:码云 阅读(105)

本文共计1782个字,预计阅读时长需要5分钟。

网站布局

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

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

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

使用 <div> 元素的 HTML 布局

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

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

实例

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
&nbsp;

<style>
#header {<br />
    background-color:black;<br />
    color:white;<br />
    text-align:center;<br />
    padding:5px;<br />
}<br />
#nav {<br />
    line-height:30px;<br />
    background-color:#eeeeee;<br />
    height:300px;<br />
    width:100px;<br />
    float:left;<br />
    padding:5px;<br />
}<br />
#section {<br />
    width:350px;<br />
    float:left;<br />
    padding:10px;<br />
}<br />
#footer {<br />
    background-color:black;<br />
    color:white;<br />
    clear:both;<br />
    text-align:center;<br />
   padding:5px;<br />
}<br />
</style>

&nbsp;

&nbsp;
<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 ? JSRUNs.com</div>

效果:

html布局

HTML 布局 - 使用表格

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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> 来创建多列布局:

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
<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 JSRUN.com.cn</footer>

HTML 布局 - 有用的提示

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

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

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(1) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
1

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - HTML 布局

博客简介

码云笔记网 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记网有你更精彩!
更多博客详情请看关于博客

精彩评论