（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还小时
一般我们默认的我们鼠标滑轮滑动一次就是向下或者向上滑动一行，但这样有的时候不能满足我们的需求，看一篇文章如果看完一屏幕再向下滑，通过滑轮的话就需要滑很久，如果我们设置一下鼠标滑轮每次滑动向下滑动几行或者是一页，那就方便多了，接下来我来演示一下如何操作设置。操作方法
01
首先在桌面任意位置，用鼠标右击，在出来的菜单中选择个性化。接下来就会蹦出来一个电脑个性化设置的一个对话框。
02
在个性化设置对话框左侧可以找到一个更改鼠标指针的选项，我们点击选择它，就可以进入到鼠标属性的相关设置页面。
03
在鼠标属性设置对话框，上面就有一个滑轮选项，我们点击选择它，就可以进入到滑轮的设置相关页面。
04
我们可以看到滑轮的设置有垂直滚动和水平滚动，一般我们使用电脑的浏览页面的话都是说的垂直滚动。
05
在垂直滚动下就可以看到鼠标滑轮滚动一下可以向下移动多少进行具体的设置，可以是几行，在这里可以使用后面的那个小箭头来鼠标点击增加或者是减少，也可以是直接在编辑框内直接输入行数。
06
或者是设置为鼠标滑轮滚动一次就是一个屏幕，这样在看文章的时候会更加方便，不用总是在滑动屏幕，而且对眼睛也比较好。可以看到鼠标垂直滑动第二个选项就是一次滑动一个屏幕的选项，我们点击选择它，最后确定就可以了。
