CSS 教程

CSS 教程 CSS 简介 CSS 语法 CSS 选择器 CSS 如何使用 CSS 注释 CSS 颜色 CSS 背景 CSS 边框 CSS 外边距 CSS 内边距 CSS 高度/宽度 CSS Box 模型 CSS 轮廓 CSS 文本 CSS 字体 CSS 图标 CSS 链接 CSS 列表 CSS 表格 CSS Display CSS Max-width CSS 定位 CSS 溢出 CSS 浮动 CSS Inline-block CSS 对齐 CSS 组合器 CSS 伪类 CSS 伪元素 CSS 不透明度 CSS 导航栏 CSS 下拉菜单 CSS 图片库 CSS 图像拼合技术 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网站布局 CSS 单位 CSS 特异性

CSS3 高级教程

CSS3 高级教程 CSS3 简介 CSS3 圆角 CSS3 边框图像 CSS3 多重背景 CSS3 颜色 CSS3 渐变 CSS3 阴影 CSS3 文本效果 CSS3 网络字体 CSS3 2D 转换 CSS3 3D 转换 CSS3 过渡 CSS3 动画 CSS3 提示框 CSS3 样式图像 CSS3 object-fit CSS3 按钮 CSS3 分页 CSS3 多列 CSS3 用户界面 CSS3 变量 CSS3 盒子大小 CSS3 媒体查询 CSS3 媒体查询实例 CSS3 弹性盒子

CSS 响应式

RWD 简介 RWD 视口 RWD 网格视图 RWD 媒体查询 RWD 图像 RWD 视频 RWD 框架 RWD 模板

CSS 网格视图

Grid 网络简介 Grid 网格容器 Grid 网格项目

CSS 实例

CSS 模板 CSS 实例 CSS 测验 CSS 练习

CSS 参考手册

CSS 参考手册 CSS 浏览器支持 CSS 选择器 CSS 函数 CSS 网络安全字体 CSS 动画相关属性 CSS 单位 CSS PX-EM 单位转换 CSS 颜色 CSS 颜色值 CSS 默认值 CSS 实体 CSS 听觉


CSS 网站布局

网站布局

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

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


页眉

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

实例

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

Result

Header

亲自试一试 »


导航栏

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

实例

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

/* 导航栏链接 */
.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;
}

Result

亲自试一试 »

内容

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

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

1-column:

 

2-column:

 

3-column:

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

实例

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

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

/* 响应式布局 - 使三列堆叠在一起,而不是在较小的屏幕(600px 宽或更小)上彼此相邻 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

结果:

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

亲自试一试 »

提示: 如需创建 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%;
}

/* 中间列 */
.column.middle {
  width: 50%;
}

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

结果:

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

亲自试一试 »

页脚

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

实例

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

结果:

Footer
亲自试一试 »

响应式网站布局

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

亲自试一试 »