河南省孟州网站建设-孟州网络公司-优化-制作-设计推广-孟州网站建设服务中心

站布局

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

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

页眉

页眉（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-列布局 （仅用于台式机）

我们将创建 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%;
  }}

结果：

亲自试一试