二维码
搜索 ×

CSS 网站布局

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

CSS 网站布局

网站布局

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

有大量不同的布局设计可供选择。但是，上面的结构是最常见的结构之一，我们将在本教程中仔细研究它。

页眉

标题通常位于网站顶部（或顶部导航菜单的正下方）。它通常包含徽标或网站名称：

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

结果

导航栏

导航栏包含一个链接列表，可帮助访问者浏览您的网站：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* The navbar container */  
.topnav {  overflow: hidden;  
  background-color: #333;}  

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

/* Links - change color on hover */  
.topnav a:hover {  background-color: #ddd;  
  color: black;}

结果

内容

此部分中的布局通常取决于目标用户。最常见的布局是 以下一项（或组合）：

  • 1 列（通常用于移动浏览器）
  • 2 列（通常用于平板电脑和笔记本电脑）
  • 3 列布局（仅用于桌面）

我们将创建一个3列布局，并在较小的屏幕上将其更改为1列布局：

1
2
3
4
5
6
7
8
9
10
11
/* Create three equal columns that float next to each other */  
.column {  float: left;  
  width: 33.33%;}  

/* Clear floats after the columns */  
.row:after {  content: "";  
  display: table;  
  clear: both;}  

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */  
@media screen and (max-width: 600px) {  .column {    width: 100%;  }}

结果

提示： 若要创建 2 列布局，请将宽度更改为 50%。要创建 4 列布局，请使用 25% 等。

提示： 你想知道@media规则是如何运作的吗？[阅读更多关于它在我们的CSS媒体查询章节中]。

提示： 创建列布局的更现代方法是使用 CSS Flexbox。 但是，Internet Explorer 10 及更早版本不支持它。如果需要 IE6-10 支持，请使用浮点数（如上所示）。

要了解有关灵活框布局模块的更多信息， [请阅读我们的CSSFlexbox章节]

不相等的列

主要内容是您网站最大和最重要的部分。

常见于列宽不等，使大部分空间 保留用于 主要内容。侧面内容（如果有的话）通常用作替代导航或指定与主要内容相关的信息。根据需要更改宽度，只需记住它总共应加起来达到100%：

1
2
3
4
5
6
7
8
9
10
.column {  float: left;}  

/* Left and right column */  
.column.side {  width: 25%;}  

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

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */  
@media screen and (max-width: 600px) {  .column.side, .column.middle {    width: 100%;  }}

结果

页脚

页脚位于页面底部。它通常包含版权和联系信息等信息：

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

结果

响应式网站布局

通过使用上面的一些CSS代码，我们创建了一个响应式网站布局，该布局在两列和全角列之间变化，具体取决于屏幕宽度：

推荐教程