您现在的位置是: 文字教程> 前端教程> HTML教程>

HTML教程第15课,HTML布局-

2019-03-20 11:02:223
HTML布局,我们日常生活中打开的网页总是规章有序,看着让人很舒服,但是你知道他们是怎么做到的?他们就是利用我们的HTML元素+一些css样式进行的布局,那么我们今天来学习怎么给页面布局吧。

HTML布局

我们日常生活中打开的网页总是规章有序,看着让人很舒服,但是你知道他们是怎么做到的?他们就是利用我们的HTML元素+一些css样式进行的布局,那么我们今天来学习怎么给页面布局吧。


网站布局

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

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

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

提示:网页布局对改善网站的外观非常重要,请慎重设计您的网页布局。


HTML 布局 - 使用div 元素

div 元素是用于分组 HTML 元素的块级元素。


实例

下面的例子使用五个 div 元素来一些简单的css样式创建多列布局:

 div 元素

上面的 HTML 代码会产生如下结果:

上面的 HTML 代码会产生如下结果

使用表格的 HTML 布局

注意:table元素不是作为布局工具而设计的。

table元素的作用是显示表格化的数据。

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


实例

使用table元素来布局

使用table元素来布局


代码运行结果:

代码运行结果

HTML布局 

Tip: 使用 CSS 最大的好处是,如果把 CSS 代码存放到外部样式表中,那么站点会更易于维护。通过编辑单一的文件,就可以改变所有页面的布局。如需学习更多有关 CSS 的知识,请访问我们的CSS 教程.

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

例如使用 Bootstrap

Bootstrap 是使用现成的 CSS 框架。

Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

Bootstrap 帮助您开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机:

如需学习 Bootstrap 的知识,请阅读我们的 Bootstrap教程。


本网站免费提供学习前端、HTML教程免费SEO学习,喜欢就记得关注我们

文章评论