参考手册 浏览器支持参考手册 选择器参考手册 组合器参考手册 伪类参考手册 伪元素参考手册 函数参考手册 动画相关属性 网络安全字体 字体回退 单位 颜色 合法颜色值 默认值参考手册 实体 听觉参考手册 accent-color align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function aspect-ratio backdrop-filter backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size block-size border border-block border-block-color border-block-end border-block-end-color border-block-end-style border-block-end-width border-block-start border-block-start-color border-block-start-style border-block-start-width border-block-style border-block-width border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-end-end-radius border-end-start-radius border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-inline border-inline-color border-inline-end border-inline-end-color border-inline-end-style border-inline-end-width border-inline-start border-inline-start-color border-inline-start-style border-inline-start-width border-inline-style border-inline-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-start-end-radius border-start-start-radius border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-reflect box-shadow box-sizing break-after break-before break-inside caption-side caret-color @charset 规则 clear clip clip-path color color-scheme column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns @container 规则 content counter-increment counter-reset counter-set @counter-style 规则 cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face 规则 font-family font-feature-settings font-kerning @font-palette-values 规则 font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight gap grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows hanging-punctuation height hyphens hyphenate-character image-rendering @import 规则 initial-letter inline-size inset inset-block inset-block-end inset-block-start inset-inline inset-inline-end inset-inline-start isolation justify-content justify-items justify-self @keyframes 规则 @layer 规则 left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-block margin-block-end margin-block-start margin-bottom margin-inline margin-inline-end margin-inline-start margin-left margin-right margin-top marker marker-end marker-mid marker-start mask mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type max-block-size max-height max-inline-size max-width @media 规则 min-block-size min-inline-size min-height min-width mix-blend-mode @namespace 规则 object-fit object-position offset offset-anchor offset-distance offset-path offset-position offset-rotate opacity order orphans outline outline-color outline-offset outline-style outline-width overflow overflow-anchor overflow-wrap overflow-x overflow-y overscroll-behavior overscroll-behavior-block overscroll-behavior-inline overscroll-behavior-x overscroll-behavior-y padding padding-block padding-block-end padding-block-start padding-bottom padding-inline padding-inline-end padding-inline-start padding-left padding-top @page 规则 page-break-inside paint-order perspective perspective-origin place-content place-items place-self pointer-events position @property 规则 quotes resize right rotate row-gap scale @scope 规则 scroll-behavior scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start scroll-margin-bottom scroll-margin-inline scroll-margin-inline-end scroll-margin-inline-start scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding scroll-padding-block scroll-padding-block-end scroll-padding-block-start scroll-padding-bottom scroll-padding-inline scroll-padding-inline-end scroll-padding-inline-start scroll-padding-right scroll-padding-top scroll-snap-stop scroll-snap-type scrollbar-color shape-outside @starting-style 规则 @supports 规则 tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-emphasis text-emphasis-color text-emphasis-position text-emphasis-style text-indent text-justify text-orientation text-overflow text-shadow text-transform text-underline-offset text-underline-position top transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function translate unicode-bidi user-select vertical-align visibility white-space widows width word-break word-spacing word-wrap writing-mode z-index zoom 简介 CSS HEX 颜色 HSL 颜色 背景图像 背景重复 背景附着 背景简写 边框宽度 边框颜色 边框各边 简写边框属性 圆角边框 外边距合并 轮廓宽度 轮廓颜色 轮廓简写 轮廓偏移 文本对齐 文字装饰 文本转换 文字间距 文本阴影 字体样式 字体大小 谷歌字体 字体属性 布局 - width 和 max-width 布局 - z-index 布局 - 溢出 布局 - clear 和 clearfix 布局 - 浮动实例 布局 - display: inline-block 垂直导航栏 水平导航栏 计数器 网站布局 特异性 !important 规则 数学函数 圆角 边框图像 多重背景 颜色 颜色关键字 渐变 径向渐变 阴影效果 Box Shadow 文本效果 Web 字体 2D 转换 3D 转换 过渡 动画 工具提示 设置图像样式 object-fit object-position 遮罩 按钮 分页实例 多列 用户界面 变量 覆盖变量 使用 JavaScript 更改变量 在媒体查询中使用变量 @property 规则 Box Sizing Flexbox 媒体查询 媒体查询 - 实例 - 简介 网格容器 网格项目

CSS高级

accent-color align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function aspect-ratio backdrop-filter backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size block-size border border-block border-block-color border-block-end border-block-end-color border-block-end-style border-block-end-width border-block-start border-block-start-color border-block-start-style border-block-start-width border-block-style border-block-width border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-end-end-radius border-end-start-radius border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-inline border-inline-color border-inline-end border-inline-end-color border-inline-end-style border-inline-end-width border-inline-start border-inline-start-color border-inline-start-style border-inline-start-width border-inline-style border-inline-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-start-end-radius border-start-start-radius border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-reflect box-shadow box-sizing break-after break-before break-inside caption-side caret-color @charset 规则 clear clip clip-path color color-scheme column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns @container 规则 content counter-increment counter-reset counter-set @counter-style 规则 cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face 规则 font-family font-feature-settings font-kerning @font-palette-values 规则 font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight gap grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows hanging-punctuation height hyphens hyphenate-character image-rendering @import 规则 initial-letter inline-size inset inset-block inset-block-end inset-block-start inset-inline inset-inline-end inset-inline-start isolation justify-content justify-items justify-self @keyframes 规则 @layer 规则 left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-block margin-block-end margin-block-start margin-bottom margin-inline margin-inline-end margin-inline-start margin-left margin-right margin-top marker marker-end marker-mid marker-start mask mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type max-block-size max-height max-inline-size max-width @media 规则 min-block-size min-inline-size min-height min-width mix-blend-mode @namespace 规则 object-fit object-position offset offset-anchor offset-distance offset-path offset-position offset-rotate opacity order orphans outline outline-color outline-offset outline-style outline-width overflow overflow-anchor overflow-wrap overflow-x overflow-y overscroll-behavior overscroll-behavior-block overscroll-behavior-inline overscroll-behavior-x overscroll-behavior-y padding padding-block padding-block-end padding-block-start padding-bottom padding-inline padding-inline-end padding-inline-start padding-left padding-top @page 规则 page-break-inside paint-order perspective perspective-origin place-content place-items place-self pointer-events position @property 规则 quotes resize right rotate row-gap scale @scope 规则 scroll-behavior scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start scroll-margin-bottom scroll-margin-inline scroll-margin-inline-end scroll-margin-inline-start scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding scroll-padding-block scroll-padding-block-end scroll-padding-block-start scroll-padding-bottom scroll-padding-inline scroll-padding-inline-end scroll-padding-inline-start scroll-padding-right scroll-padding-top scroll-snap-stop scroll-snap-type scrollbar-color shape-outside @starting-style 规则 @supports 规则 tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-emphasis text-emphasis-color text-emphasis-position text-emphasis-style text-indent text-justify text-orientation text-overflow text-shadow text-transform text-underline-offset text-underline-position top transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function translate unicode-bidi user-select vertical-align visibility white-space widows width word-break word-spacing word-wrap writing-mode z-index zoom

CSS响应式设计

CSS网格教程

CSS实例

CSS教程

浏览7438
更新时间2025-07-16

网站布局

网站通常分为页眉、菜单、内容和页脚:

有很多不同的布局设计可供选择。但是,以上结构是最常见的结构之一,我们将在本教程中对其进行仔细研究。

页眉

页眉(header)通常位于网站顶部(或顶部导航菜单的正下方)。它通常包含徽标(logo)或网站名称:

实例

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

结果:

页眉 运行实例 »

点击 "运行实例" 按钮查看在线实例

导航栏

导航栏包含链接列表,以帮助访问者浏览您的网站:

实例

/* navbar 容器 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar 链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 链接 - 悬停时改变颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

结果:

  • Link
  • Link
  • Link
  • Link
运行实例 »

点击 "运行实例" 按钮查看在线实例

内容

使用哪种布局通常取决于您的目标用户。最常见的布局是以下布局之一(或将它们组合在一起):

  • 1-列布局(通常用于移动浏览器)
  • 2-列布局(通常用于平板电脑和笔记本电脑)
  • 3-列布局 (仅用于台式机)

1-列:

2-列:

3-列:

我们将创建 3 列布局,并在较小的屏幕上将其更改为 1 列布局:

实例

/* 创建三个相等的列,它们彼此相邻浮动 */
.column {
  float: left;
  width: 33.33%;
}

/* 在列后清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 响应式布局 - 使三列堆叠,而不是在较小的屏幕(宽度为 600 像素或更小)上并排 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

结果:

完整的网站技术参考手册

我们的参考手册涵盖了网站技术的方方面面。

其中包括W3C标准技术:HTML、CSS、XML 。以及其他技术,诸如 JavaScript、PHP、SQL 等。

在线实例测试工具

在 W3School,我们提供上千个实例。

通过使用我们的在线编辑器,你可以编辑这些例子,并对代码进行实验。

快捷易懂的学习方式

一寸光阴一寸金,因此,我们为您提供快捷易懂的学习内容。

在这里,您可以通过一种易懂的便利的模式获得您需要的任何知识。

运行实例 »

点击 "运行实例" 按钮查看在线实例

提示:如需创建 2 列布局,请将宽度更改为 50%。如需创建 4 列布局,请使用 25%。

提示:您是否想知道 @media 规则如何工作?请在我们的 CSS 媒体查询 这一章中学习更多相关知识。

提示:创建列布局的一种更现代的方法是使用 CSS Flexbox。但是,Internet Explorer 10 和更早版本不支持它。如果需要 IE6-10 支持,请使用浮动(如上所示)。

如需了解有关 Flexible Box 布局模块的更多信息,请阅读我们的 CSS Flexbox 教程。

不相等的栏

主要内容(main content)是您网站上最大、最重要的部分。

列宽不相等的情况很常见,因为大部分空间都为主内容保留。附属内容(如果有)通常用作替代导航或指定与主要内容有关的信息。您可以随意更改宽度,只要记住它的总和应为 100%:

实例

.column {
  float: left;
}

/* 左和右列 */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* 响应式布局 - 使三列堆叠,而不是并排 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

结果:

完整的网站技术参考手册

我们的参考手册涵盖了网站技术的方方面面。

其中包括W3C标准技术:HTML、CSS、XML 。以及其他技术,诸如 JavaScript、PHP、SQL 等。

在线实例测试工具

在 W3School,我们提供上千个实例。

通过使用我们的在线编辑器,你可以编辑这些例子,并对代码进行实验。

快捷易懂的学习方式

一寸光阴一寸金,因此,我们为您提供快捷易懂的学习内容。

在这里,您可以通过一种易懂的便利的模式获得您需要的任何知识。

运行实例 »

点击 "运行实例" 按钮查看在线实例

页脚

页脚位于页面底部。它通常包含诸如版权和联系方式之类的信息:

实例

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

结果:

页脚 运行实例 »

点击 "运行实例" 按钮查看在线实例

响应式网站布局

通过使用上面的这些 CSS 代码,我们创建了一个自适应的网站布局,会根据屏幕宽度切换两列与全宽列:

运行实例 »

点击 "运行实例" 按钮查看在线实例

相关视频

更多

免费

前端入门_HTML5
初级前端入门_HTML5

64.1万次学习

收藏

免费

30分钟学会网站布局
初级30分钟学会网站布局

24.4万次学习

收藏

免费

CSS视频教程-玉女心经版
初级CSS视频教程-玉女心经版

40.7万次学习

收藏

免费

JavaScript极速入门_玉女心经系列
初级JavaScript极速入门_玉女心经系列

75.6万次学习

收藏

精品课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

64.4万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

40.9万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

76万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

63.7万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

24.1万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

35.8万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

131.8万人学习

热门下载

更多
phpStudy 2018最新版
phpStudy 2018最新版

集成PHP7,16种组合,超全大合集

下载

VC9 32位
VC9 32位

VC9 32位 phpstudy集成安装环境运行库

下载

VC11 32位
VC11 32位

VC11 32位 phpstudy集成安装环境运行库​

下载

php程序员工具箱完整版
php程序员工具箱完整版

程序员工具箱 v1.0 php集成环境

下载

VC14 32位
VC14 32位

VC14 32位 phpstudy安装环境运行库

下载

SublimeText3汉化版
SublimeText3汉化版

中文版,非常好用

下载

Notepad++ Windows版
Notepad++ Windows版

Notepad++ 8.9.7 Windows版官方安装包,适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。

下载