HTML 布局元素


网站通常以多栏形式显示内容(如杂志或报纸)。


示例

Cities

London

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.

Footer

亲自试一试 »

HTML 布局元素

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框架
  • CSS 浮动属性
  • CSS 弹性盒
  • CSS 网格


CSS 框架

如果你想快速创建布局,你可以使用 CSS 框架,例如W3.CSS或者Bootstrap

曾经听说过91xjr 空间?在这里,您可以从头开始创建您的网站或使用模板,并免费托管它。

免费开始❯

* 无需信用卡


CSS 浮动布局

使用 CSS 进行整个网页布局是很常见的 float属性。 Float 很容易学习 - 你只需要记住如何float clear属性工作。缺点:浮动元素与文档流相关联,这可能会损害灵活性。了解有关浮动的更多信息CSS 浮动和清除章节。

示例

Cities

London

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.

Footer

亲自试一试 »

CSS Flexbox 布局

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

了解有关 Flexbox 的更多信息CSS 弹性盒章节。

示例

Cities

London

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.

Footer

亲自试一试 »

CSS 网格布局

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

了解有关 CSS 网格的更多信息CSS 网格介绍章节。