跳转到帖子
在手机APP中查看

一个更好的浏览方法。了解更多

OKCCN - XenForo & IPS Plugin Marketplace

主屏幕上的全屏APP,带有推送通知、徽章等。

在iOS和iPadOS上安装此APP
  1. 在Safari中轻敲分享图标
  2. 滚动菜单并轻敲添加到主屏幕
  3. 轻敲右上角的添加按钮。
在安卓上安装此APP
  1. 轻敲浏览器右上角的三个点菜单 (⋮) 。
  2. 轻敲添加到主屏幕安装APP
  3. 轻敲安装进行确认。
  • 选择语言

HTML Layout Elements and Techniques

推荐的帖子

  • 行政经理

HTML Layout Elements and Techniques


Websites often display content in multiple columns (like a magazine or a newspaper).


Example

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 Layout Elements

HTML has several semantic elements that define the different parts of a web page:

HTML5 Semantic Elements
<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element
HTML5 Semantic Elements
  • <header> - Defines a header for a document or a section
  • <nav> - Defines a set of navigation links
  • <section> - Defines a section in a document
  • <article> - Defines independent, self-contained content
  • <aside> - Defines content aside from the content (like a sidebar)
  • <footer> - Defines a footer for a document or a section
  • <details> - Defines additional details that the user can open and close on demand
  • <summary> - Defines a heading for the <details> element

You can read more about semantic elements in our HTML Semantics chapter.


HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:

  • CSS frameworks
  • CSS float property
  • CSS flexbox
  • CSS grid


CSS Frameworks

If you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap.

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template.

Get started for free ❯

* no credit card required


CSS Float Layout

You can create entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and Clear chapter.

Example

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 Layout

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

Learn more about flexbox in our CSS Flexbox chapter.

Example

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 Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Learn more about CSS grids in our CSS Grid Intro chapter.

参与讨论

你可立刻发布并稍后注册。 如果你有帐户,立刻登录发布帖子。

游客
回帖…

帐户

导航

搜索

搜索

配置浏览器推送通知

Chrome (安卓)
  1. 轻敲地址栏旁的锁形图标。
  2. 轻敲权限 → 通知。
  3. 调整你的偏好。
Chrome (台式电脑)
  1. 点击地址栏中的挂锁图标。
  2. 选择网站设置。
  3. 找到通知选项并调整你的偏好。