如何通过css格子布局一个简单的页面

文链接： https://getflywheel.com/layout/css-grid-layouts-how-to/

栅格布局的思想起源源自于印刷设计。栅格是用来将设计元素精确定位到页面上的的测量工具。这种想法经常被用在网页上来进行内容组织和统一，提升用户的视觉体验。

网页设计刚起步的时候，设计和布局都是是相当简单的，通常包含头部，侧边栏，内容区域和页脚。现在，随着网络的演变，网页的布局也变得更加复杂，做网页设计师的人也随之增加。我们经常需要大量的内容区域，响应式设计，多页面模板设计，以及许多其他的。浮动和定位在实现这些设计的时候，是必不可少的。但浮动听起来简单，实际操作起来却很棘手。

但接下来，我们会介绍一种简单的设计布局。随着CSS栅格布局的不断发展，成为设计师也会变得越来越容易。

CSS栅格兼容性

作为一名设计师，需要了解网页设计的未来。CSS栅格布局将改变现有规则，为设计师处理头痛了许多年的定位。虽然目前还不是主流的做法，但是这是一件值得期待的事情。

在我们真的深入了解栅格布局之前，要强调的一件事，浏览器并不普遍支持，希望这种工作方式在未来可以得到越来越多的浏览器支持。不过，好消息是，您可以轻松地尝试使用CSS栅格布局，以及了解它是如何工作的。

在使用示例之前，请你确保你的浏览器支持。目前只有Internet Explorer 10+和 edge 支持。其他的浏览器通过一些手段也可以浏览，但因为它不是官网支持，所以你只能是不断的去尝试。（If you view the Can I Use documentation on CSS Grid Layouts, at the time of this post, you will notice little flag indicators. These show that you will need to be in “flag mode.”）如果你边使用Can I Use来查看栅格布局的兼容性，边看这篇文章，那么你就可以注意到每个细节的不同。

当您在测试栅格布局的时候，你需要做几件事情帮助你正确地看到布局。使用Chrome查看，你需要启用“实验性网络平台功能”。如何启用呢？在Chrome 浏览器中打开chrome://flags 这个地址。当url 链接chrome://flags加载完毕之后，向下滚动页面，找到该选项，设置为“启用实验性网络平台功能”。

火狐也允许您查看栅格布局，通过“layout.css.grid.enabled”参数设置。开启方法类似于Chrome浏览器的说明。在Firefox浏览器中URL输入 about:config。向下滚动页面，设置为启用 “layout.css.grid.enabled” 。

如果你想马上开始使用CSS栅格布局，对于不支持它的浏览器还有一个变通方案。如果你熟悉polyfills的想法，那已经有解决方案了。如果你不熟悉polyfills，可以利用浏览器后退，利用JavaScript的力量，允许现代的浏览器功能（例如CSS栅格布局）在旧的浏览器运行。

Polyfills超出本教程范围，但随着越来越多的设计师开始使用这项技术，更多的polyfill 技术将会涌现。如果你准备尝试，这里是一个推荐的 polyfill option。请务必阅读作者的文档，了解有关如何使用它的详细信息。

那么，在承诺100%使用CSS栅格布局之前，要确保使用的生产代码，做一些深入的测试。

CSS栅格布局基本知识

通过利用CSS，栅格布局将有助于您的网页内容的呈现。这里有一篇相对较新的定义的属性的CSS栅格布局规范。这是学习栅格设计的一个很好的资源。CSS栅格设计有助于简化的东西，使创建布局更加容易。想象一下，栅格作为一种结构，尺寸可以被定义。

栅格的组成

行(lines)

在上图中，有五条垂直线和三条水平线。线从1开始编号。示例中，垂直线从左至右，这取决于书写方向。如果书写方向是由右至左，顺序就颠倒过来。可以给线起名（可选），方便在CSS中引用。

轨道(tracks)

轨道是两条平行线之间的空间。在图中，有四个垂直轨道和两个水平的轨道。这是线和轨道的共同结果。线是记录内容的起点和终点。轨道是内容真实存在的位置。

单元格(cells)

单元格是水平和垂直轨道的相交处。图中有八个单元格。

面(areas)

单元格指定面的时候发挥作用。面是矩形形状，可以跨越多个单元格。像线一样，面也可以任意命名。如在图中的几个标签：“A”，“B”，和“C”。

创建栅格布局

用老方格纸，布局之前，先勾勒轮廓。

HTML栅格

<div class="grid header">Header</div>

<div class="grid sidebar">Sidebar</div>

<div class="grid content">Main Content</div>

<div class="grid extra">Extra Content</div>

<div class="grid footer">Footer</div>

</div>

容器Container是非常重要的。容器内是用于显示网站的不同的内容块。内容块的顺序并不重要。接下来，我们将使用CSS将它们按照我们的布局显示。

CSS样式

HTML完成后，我们来写CSS。给container设置display:grid 或者 display:inline-grid. 如果你希望设置块级元素，那使用 display:grid ; 如果你希望设置成内联元素，那使用display:inline-grid。想了解更多细节，可以查看文档

.container {

display: grid;

grid-template-columns: 0.25fr 15px 0.75fr;

grid-template-rows: auto 25px auto 25px auto 25px auto;

}

.grid {

background-color: #444;

color: #fff;

padding: 25px;

font-size: 3rem;

}

grid-template-columns和grid-template-rows属性用于指定行和列的宽度。这个布局定义了五列。15px是两个元素之间的间距。第三列占用0.25份的剩余空间。同样地，第五列占用0.75份的剩余空间。（疑问：图中根本没有第五列啊，感觉作者写错了）

There are responsive customizations that can be made, but this is a great step to take prior to that. It may seem like using pixel measurements would be limiting, however, using auto for the first row in grid-template-rows allows the row to expand as necessary based on the content inside it. The 25px row acts as a gutter.

对于响应式布局这个规范是很便利的，如果使用像素，则会被限定死。第一行使用grid-template-rows来表示，随着内容需要的变化而变化。设置padding 成 25 像素，与头部留有间隙。

元素看起来很紧凑，但再加一些规范，元素将初具规模。

这个例子先放置的头部，但元素位置可以按您喜欢的任意顺序摆放。如果你想从页脚开始，也可以。

我们先从头部开始，从列1开始到列4结束，从行1开始到行2结束，CSS看起来就像这样：

.header {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 2;

}

您可能会注意到侧边栏被压住了，我们无法看到它。我们需要重新排列一下。在这种布局,通过行的位置进行排列。以行作为标准。头部占一行和二行的位置，侧边栏，从三行开始，到六行结束。头部到第二行结束，侧边栏从第三行开始正好可以显示到头部下面。要查看示例，请参见该项目Codepen。

我们使用grid-column-start指定一个元素起始垂直线。在本例中,它将被设置为3。grid-column-end表示一个元素的结束垂直线。在这种情况下,这个属性就等于四。其他行值也用同样的方式设置。侧边栏的位置是存在的,它只是覆盖的内容区。

.sidebar {

grid-column-start: 1;

grid-column-end: 2;

grid-row-start: 3;

grid-row-end: 6;

background: #a0c263;

}

主要内容在第三列开始，第四列结束。侧边栏和内容区域的顶部对齐，所以他们都从grid-row-start第三行开始。你可能想让内容栏比侧边栏高很多。通过设置容器上的高度，假如400像素，这个时候，它就会比其它元素高很多。

.content {

grid-column-start: 3;

grid-column-end: 4;

grid-row-start: 3;

grid-row-end: 4;

background: #f5c531;

height: 400px;

}

最后两个内容区域是额外内容区域和页脚。

.extra {

grid-column-start: 3;

grid-column-end: 4;

grid-row-start: 5;

grid-row-end: 6;

background: #898989;

}

.footer {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 7;

grid-row-end: 8;

background: #FFA500;

}

响应式优势

布局已经创建好了，似乎很像一个“桌面”。那么平板电脑和移动设备怎么显示？CSS栅格布局加上媒体查询可以适应不同的屏幕尺寸。真正酷的是，你可以在这些不同的媒体查询范围里，改变内容区域。作为一个设计师，这意味着你选择什么是最适合你的布局在不同的断点。例如，如果你想要将“次要内容”被放在“内容”区域之上，可以指定正确的行和列。

/* For mobile phones: */

.header {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 2;

}

.extra {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 3;

grid-row-end: 4;

}

.content {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 5;

grid-row-end: 6;

background: #f5c531;

height: 400px;

}

通过设置成列1开始，列4结束，来设置成内容全宽。将“次要内容”显示在了“内容”之上。

CSS栅格布局是一种新型的布局方式。正如你所看到的，这种方法很容易创建一个简单的页面布局去运行。上面这个简单的例子也可以为如何创建更复杂的布局打下良好的基础。假如这个技术获得普及，在设计各种设备和尺寸，布局大小自定义的时候，这个技术会是一个优势。

问切 wenqie（.cn），是切图网旗下关注用户体验，专注H5移动适配的品牌网站。

HTML的世界里，一切都是由容器和内容构成的。容器，就如同一个个盒子，用来装载各种元素；而内容，则是这些盒子里的珍宝。理解了这一点，我们就迈出了探索HTML布局的第一步。

在HTML中，布局标签主要用于控制页面的结构和样式。本文将介绍一些常用的布局标签及其使用方法，并通过代码示例进行演示。

一、理解布局的重要性

布局在我们前端开发中担任什么样的角色呢？想象一下，你面前有一堆散乱的积木，无序地堆放在那里。

而你的任务，就是将这些积木按照图纸拼装成一个精美的模型。HTML布局标签的作用就像那张图纸，它指导浏览器如何正确、有序地显示内容和元素，确保网页的结构和外观既美观又实用。

下面我们就来看看在HTML中常用的基础布局标签有哪些，如何使用这些布局标签完成我们的开发目标。

二、常用的布局标签

1、div标签

div标签是一个块级元素，它独占一行，用于对页面进行区域划分。它可以包含其他HTML元素，如文本、图片、链接等。通过CSS样式可以设置div的布局和样式。

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>
</head>
<body>

<div>这是一个div元素

</div>

</body>
</html>

运行结果：

2、span标签

span标签是一个内联元素，它不独占一行，用于对文本进行区域划分。它主要用于对文本进行样式设置，如字体、颜色等。与div类似，span也可以包含其他HTML元素。
示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
  .text {
    color: blue;
    font-size: 20px;
  }
</style>
</head>
<body>

<p>这是一个<span>span元素</span>。</p>

</body>
</html>

运行结果：

3、table标签

table标签用于创建表格，它包含多个tr（行）元素，每个tr元素包含多个td（单元格）或th（表头单元格）元素。

<table> 定义一个表格，<tr> 定义表格中的行，而 <td> 则定义单元格。通过这三个标签，我们可以创建出整齐划一的数据表，让信息的展示更加直观明了。

需要注意的是：

<table>和</table>标记着表格的开始和结束。
<tr>和</tr>标记着行的开始和结束，几组表示该表格有几行。
<td>和</td>标记着单元格的开始和结束，表示这一行中有几列。

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
  table, th, td {
    border: 1px solid black;
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>
</body>
</html>

运行结果：

4、form标签

<form>标签的主要作用是定义一个用于用户输入的HTML表单。这个表单可以包含各种输入元素，如文本字段、复选框、单选按钮、提交按钮等。

<form>元素可以包含以下一个或多个表单元素：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>和<output>等。

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
  form {
    display: flex;
    flex-direction: column;
  }
</style>
</head>
<body>

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="提交">
</form>

</body>
</html>

运行结果：

5、列表标签

1）无序列表

指没有顺序的列表项目
始于<ul>标签，每个列表项始于<li>
type属性有三个选项：disc实心圆、circle空心圆、square小方块。默认属性是disc实心圆。

示例代码：

<!DOCTYPE html>
<htmml>
<head>
<meta charst = "UTF-8">
<title>html--无序列表</title>
</head>
<body>
<ul>
<li>默认的无序列表</li>
<li>默认的无序列表</li>
<li>默认的无序列表</li>
</ul>
<ul>
<li type = "circle">添加circle属性</li>
<li type = "circle">添加circle属性</li>
<li type = "circle">添加circle属性</li>
</ul>
<ul>
<li type = "square">添加square属性</li>
<li type = "square">添加square属性</li>
<li type = "squaare">添加square属性</li>
</ul>
</body>
</html>

运行结果：

也可以使用CSS list-style-type属性定义html无序列表样式。

想要快速入门前端开发吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！「链接」

2）有序列表

指按照字母或数字等顺序排列的列表项目。
其结果是带有前后顺序之分的编号,如果插入和删除一个列表项，编号会自动调整。
始于<ol>标签，每个列表项始于<li>。

示例代码：

<ol>
<li>默认的有序列表</li>
<li>默认的有序列表</li>
<li>默认的有序列表</li>
</ol>
<ol type = "a" start = "2">
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li value ="20">第四项</li>
</ol>
<ol type = "Ⅰ" start = "2">
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
</ol>

运行结果：

同样也可以使用CSS list-style-type属性定义html有序列表样式。

3）自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。
用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号。
基本语法：

<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>

<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
</dl>

<dl>即“definition list（定义列表）”，
<dt>即“definition term（定义名词）”，
而<dd>即“definition description（定义描述）”。

示例代码：

<dl>
<dt>计算机</dt>
<dd>用来计算的仪器</dd>

<dt>显示器</dt>
<dd>以视觉方式显示信息的装置</dd>
</dl>

运行结果：

以上就是HTML中常用的布局标签及其使用方法。在实际开发中，还可以结合CSS和JavaScript来实现更复杂的布局和交互效果。

掌握了这些HTML常用布局标签，你已经拥有了构建网页的基础工具。记住，好的布局不仅需要技术，更需要创意和对细节的关注。现在，打开你的代码编辑器，开始你的布局设计之旅吧！

家好，我是IT共享者，人称皮皮。这篇我们来讲讲CSS网页布局。

一、网页布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

1. 头部区域

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 项目(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}


/* 头部样式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>


<div class="header">
  <h1>头部区域</h1>
</div>


</body>
</html>

2. 菜单导航区域

菜单导航条包含了一些链接，可以引导用户浏览其他页面：

例

/* 导航条 */
.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;
}

3. 内容区域

内容区域一般有三种形式:

1 列：一般用于移动端。
2 列：一般用于平板设备。
3 列：一般用于 PC 桌面设备。

不相等的列

不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。

例：

.column {
  float: left;
}
 
/* 左右侧栏的宽度 */
.column.side {
  width: 25%;
}
 
/* 中间列宽度 */
.column.middle {
  width: 50%;
}
 
/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

4. 底部区域

底部区域在网页的最下方，一般包含版权信息和联系方式等。

例

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

二、响应式网页布局

通过以上等学习我们来创建一个响应式等页面，页面的布局会根据屏幕的大小来调整：

案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>项目</title>
<style>
* {
  box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 
/* 头部标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}
 
.header h1 {
  font-size: 50px;
}
 
/* 导航条 */
.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;
}
 
/* 创建两列 */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}
 
/* 右侧栏 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
 
/* 图像部分 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
 
/* 文章卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
 
/* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>


<div class="header">
  <h1>我的网页</h1>
  <p>重置浏览器大小查看效果。</p>
</div>


<div class="topnav">
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#" style="float:right">链接</a>
</div>


<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>文章标题</h2>
      <h5>xx 年xx月 xx日</h5>
      <div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div>
      <p>文本...</p>
      <p>当热诚变成习惯，恐惧和忧虑即无处容身。缺乏热诚的人也没有明确的目标。热诚使想象的轮子转动。一个人缺乏热诚就象汽车没有汽油。
      善于安排玩乐和工作，两者保持热诚，就是最快乐的人。热诚使平凡的话题变得生动。！</p>
    </div>
    <div class="card">
      <h2>文章标题</h2>
      <h5>xx 年 xx 月xx日</h5>
      <div class="fakeimg" style="height:200px;"><img src="img/border.png"></div>
      <p>文本...</p>
      <p>一切事无法追求完美，唯有追求尽力而为。这样心无压力，出来的结果反而会更好！</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>关于我</h2>
      <div class="fakeimg" style="height:100px;"></div>
      <p>6666</p>
    </div>
    <div class="card">
      <h3>热门文章</h3>
      <div class="fakeimg"><img src="img/fy2_wp.png">\</div>
    
    </div>
    <div class="card">
      <h3>关注我</h3>
      <p>本站发布的系统与软件仅为个人学习测试使用，请在下载后24小时内删除，
      不得用于任何商业用途，否则后果自负，请支持购买正版软件！如侵犯到您的权益,请及时通知我们,我们会及时处理。


声明：为非赢利性网站 不接受任何赞助和广告。</p>
    </div>
  </div>
</div>


<div class="footer">
  <h2>底部区域</h2>
</div>


</body>
</html>

三、总结

本文主要介绍了Html的网页布局结构，如何去了解网络的布局，介绍了常见的移动设备的三种网页模式，最后通过一个小项目，总结之前讲解的内容。

代码很简单，希望可以帮助你学习。

在线咨询

上一篇：到底什么HTML是语义标记？做前端开发为什么要学写它
下一篇：肖sir_html之基本使用（1）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

如何通过css格子布局一个简单的页面

一、理解布局的重要性

二、常用的布局标签

1、div标签

2、span标签

3、table标签

4、form标签

5、列表标签

1）无序列表

2）有序列表

3）自定义列表

家好，我是IT共享者，人称皮皮。这篇我们来讲讲CSS网页布局。

一、网页布局

1. 头部区域

2. 菜单导航区域

3. 内容区域

不相等的列

4. 底部区域

二、响应式网页布局

案例

三、总结

您的项目需求