（1）打开首页index.aspx，切换到【服务器行为】面板，双击数据集（Ztre），在弹出的数据集对话框中，单击“高级”按钮，如图5-1-5所示。选择【SQL】文本区域中的SQL命令进行复制，建议把它粘贴到新建立的记事本或Word文本中，它在以后步骤中将会有很大作用（熟悉SQL语言，可以跳过此步骤）。
（2）单击“简单”按钮，在【筛选】下拉菜单中选择筛选字段为LMID，选“URL参数”作为参数传递方式，输入参数变量为menanw，按“确定”键.
（3）对首页进行IE浏览，浏览结果没有记录.
Dreamweaver构建Blog全程实录(1)ⷼA href="http://tech.163.com/05/0325/14/1FMS7KET00091589.html" target=_blank>Dreamweaver构建Blog(2):构建开发环境
Dreamweaver构建Blog(3):数据库的设计和连接ⷼA href="http://tech.163.com/05/0325/15/1FMSJHL300091589.html" target=_blank>Dreamweaver构建Blog(4):首页的实现
（4）在首页IE浏览中，单击链接“网络编程”，结果如上章的图4-3-3所示，显示出所有网络编程的学习笔记。
“等等，这与原先的设计思路不符合！只有按分栏显示，不能显示所有学习笔记！”这里还有个ASP.NET页间数据传递的问题：Windows应用程序中的各Form窗体间数据传递可以通过定义全局变量（Public static 变量）等方法来实现。而这些方法却无法用以ASP.NET中各Web页面数据传递。例如：当点击数据集导航条会有个Ztre_currentPage的数据传递，却不能传递menanw的数据，也就是说当点击数据集导航条的任何一个超级链接，menan传递的数据永远是空值，这就不能既实现分栏显示，又同时进行在分栏下的分页显示。这里是采取session进行参数传递的方法解决。
（5）为了把参数变量menanw传递给session("menanw")，切换到代码视图，在标签之前，插入如图5-1-8红色圈中所示的代码。
（6）在【服务器行为】面板中选择数据集（Ztre），如图5-1-9所示，带黑色部分的就是数据集（Ztre）定义代码。
（7）找到代码：
CommandText='<%# "SELECT * FROM ZTRE WHERE LMID = ? ORDER BY ZITIME ASC" %>'
把上面的代码改为：
CommandText='<%# IIf(((request.QueryString("menanw")<>nothing) or Request.QueryString("Ztre_CurrentPage") <>Nothing),"SELECT * FROM ZTRE WHERE LMID = ? ORDER BY ZITIME DESC","SELECT * FROM ZTRE ORDER BY ZITIME DESC") %>'
（8）找到代码：
<Parameter Name="@LMID" Value='<%# IIf((request.QueryString("menanw") <>Nothing), request.QueryString("menanw"), "") %>' Type="Integer" /></Parameters></MM:DataSet>
把上面的代码改为：
<Parameter Name="@LMID" Value='<%# IIf((session("menanw") <>Nothing), session("menanw"), "") %>' Type="Integer" /></Parameters></MM:DataSet>
（9）进行IE浏览，结果第四章的图4-3-3所示。完成既定的设计思路。
先聊聊布局方面的知识，先列据一个实现三栏水平布局（左右定宽，中间自适应）案列，目前有圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局。
相同点：
差异点：
DOM节点结构：
双飞翼布局比圣杯布局多使用了一个div，少用大致4个css属性，比圣杯布局思路更直接和间接一点。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局， Flex 布局将成为现代浏览器的首选方案。
绝对定位 position: absolute 使元素的位置与文档流无关，因此不占据空间。PS：这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
栅格
以规则的网格阵列来指导和规范网页中的版面布局以及信息分布，通俗一点的就是在一个特定区域内划分出有规律的格子，并依靠这些格子进行有规律的版面布局。
栅格布局的作用
栅格布局的使用
现大多数UI框架设计上都会设计栅格化系统，比如 bootstrap(jquery) 、 element(vue) 、 antD(react) 等。
Bootstrap 的栅格化系统采用将页面布局分为12列，再根据页面宽度采用预定义类控制模块占用宽度比例（宽度百分比）的思想，实现响应式布局。
Bootstrap将屏幕大小分为4类，主要关键点是媒体查询 @media 。
官网中对Layout 布局的定义是： 通过基础的 24 分栏，迅速简便地创建布局.Element是基于 vue.js 开发的UI框架，其设计的栅格系统也与 Bootstrap 类似，可选 flex 方式满足现代浏览器，组件开发的目的都是为了解决基本布局定位的问题。
主要组件为 Row 与 Col , 其中 Row 为行布局容器, Col 为列布局容器.
参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：
antD 是Ant Design 团队基于 React 开发的一套企业级后台UI框架，其栅格整个设计建议区域按照 24 等分的原则进行划分
支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序
参照 Bootstrap 的 响应式设计，预设六个响应尺寸：
怎么实现一个基本栅格化？
通常一个基本的栅格化系统包括：
为了给整个栅格系统设置宽度，我们需要一个容器。容器的宽度通常为100%，但你可能希望为更大的显示器设置最大宽度 max-width 。
行元素用于防止里面的列（ column ）溢出到其他的行。通常会使用 clearfix 来清除浮动，因为我们是通过浮动来制作栅格系统的。
列元素是栅格系统的核心，也是最复杂的一部分。因为列的定位可以有很多实现方式，同时还需要考虑它的宽度以及响应式设计等因素。
列的位置
Floats 、 inline-blocks 、 display-table 、 display-flex 他们都可以实现栅格布局中，列的定位。先选取使用 float ，如果列都是空的，浮动的列都会贴在彼此的顶部。为了避免这种情况：
列的宽度
由于容器总宽度是100%，我们想要6列，所以每列宽度为：100 / 6 = 16.66
这里我们把一行分成六列，通过简单的计算，还可以定义列的多种宽度。
列的间隙 (Column Gutters)
由于列的宽度单位是响应式的百分比(%)，我们给列元素的间距是固定单位的 padding（px单位） ，为了避免复杂的计算，我们规定所有的盒子模型为 border-box 类型。
为了适配更多分辨率的布局，我们只需改变列的宽度。
比如当屏幕宽度小于1000px时，为了布局更简洁，我们使用两倍列的宽度，一行六列变为了一行三列。
当屏幕宽度比1000px还小时
