轻松上手,快乐学习!

HTML 布局元素和技巧


网站常常以多列显示内容(就像杂志和报纸)。


实例

城市

伦敦是英格兰的首都。 它是英国人口最多的城市,拥有超过 1300 万居民的大都市区。

伦敦位于泰晤士河畔,两千年来一直是主要定居点,其历史可追溯至罗马人建国,并将其命名为 Londinium。

页脚

亲自试一试 »

HTML 布局元素

网站常常以多列显示内容(就像杂志和报纸)。

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

您可以在我们的 HTML 语义 一章中阅读更多关于语义元素的内容。


HTML 布局技巧

创建多列布局有四种不同的技术。每种技术都有其优缺点:

  • CSS frame 框架
  • CSS float 浮动布局
  • CSS flexbox 盒子
  • CSS grid 网格

CSS 框架

如果你想快速创建布局,你可以使用CSS框架,比如 W3.CSSBootstrap


CSS Float 浮动布局

使用 CSS float 属性进行整个 web 布局是很常见的。

float 很容易学习-您只需要记住:float和 clear属性是如何工作的。

缺点: 浮动元素与文档流绑定,这可能会损害灵活性。在 CSS Float 和 Clear 章节中了解更多关于浮动的信息。

实例

Cities

伦敦是英格兰的首都。 它是英国人口最多的城市,拥有超过 1300 万居民的大都市区。

伦敦位于泰晤士河畔,两千年来一直是主要定居点,其历史可追溯至罗马人建国,并将其命名为 Londinium。

页脚

亲自试一试 »

CSS Flexbox 布局

当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,使用 flexbox 可以确保元素的行为是可预测的。

CSS Flexbox 一章中了解更多关于flexbox的信息。

实例

Cities

伦敦是英格兰的首都。 它是英国人口最多的城市,拥有超过 1300 万居民的大都市区。

伦敦位于泰晤士河畔,两千年来一直是主要定居点,其历史可追溯至罗马人建国,并将其命名为 Londinium。

页脚

亲自试一试 »

CSS Grid 网格布局

CSS 网格布局模块提供了一个基于网格的布局系统,具有行和列,使得设计网页更容易,而不必使用浮动和定位。

CSS 网格视图 一章中了解更多关于CSS网格的信息。