1.20编写网页栅格系统（课件）-高二《网页设计与制作》同步教学（劳动版）

制作响应式网页 第三阶段 能叙述网页栅格系统的布局原理，栅格系统的设计原则； 能编写固定宽度和弹性页面栅格系统的CSS布局代码； 能将栅格系统和媒体查询功能结合，制作出CSS布局文件，兼容任意宽度的网页排版布局。 能够学习伸缩盒子（Flexible Box）的相关知识，并能辨析其与传统的响应式浮动布局的差异。 能够综合运用各栅格技术编写栅格系统使其后续能够应用于D清单页面进行弹性布局。 任务目标 任务20 编写网页栅格系统 本任务要求将媒体查询功能和栅格化布局结合，制作一个适用于响应式页面排版布局的通用型CSS文件，使得任何一个按要求设置并应用该CSS文件的页面能够实现响应式效果。编写的文件接下来将应用于D清单的响应式布局。具体要求为： 1、编写一个通用型栅格系统代码文件； 2、文件能够被复用于应用其的页面进行栅格化布局。 任务描述 任务20 编写网页栅格系统 完成D清单页面栅格系统的编写，需要： 学习栅格系统的布局原理和设计原则； 学习固定宽度和任意宽度页面的栅格系统区别及CSS布局代码编写。 编写适用于任意宽度的栅格系统文件，并进行测试。 任务分析 任务20 编写网页栅格系统 知识与技能准备 网页栅格系统是一种网页排版布局方式，将网页宽度平分为多个等份的网格，如6等份、12等份、24等份，页面中每个模块的宽度设置为1等份的整倍数。如下图将页面分为6等份的布局效果： 1、认识网页栅格系统 图1-20-1 栅格系统示意图 知识与技能准备 对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。对于前端开发来说，网页将更加的灵活与规范，如上图的6等份的网格，还可组合出2:2:2、3:3、4:2等布局方式。下面是不同等份的分割在网页中的实际应用。 1、认识网页栅格系统 图1-20-2 6等份栅格网页 图1-20-3 12等份栅格网页 知识与技能准备 1、认识网页栅格系统 图1-20-4 24等份栅格网页 知识与技能准备 如下图，假设将网页宽度平均分为n份，每份网格宽度为w，则网页总宽度为w×n。但考虑到每个网页模块之间因保留一定的间距i，如果一个模块占用3份网格，其实际宽度为：w×3-i。而水平排列的最后一个模块不应该保留间距i，所以网页的实际总宽度应该为：总宽度Width= w×n - i 2、网页栅格系统的设计 图1-20-5 网页栅格宽度 知识与技能准备 根据上面的公式，假设网页分为12等份，每份宽度80px，间距10px，则总宽度为950px。这是网页栅格化中比较常用的划分方式，12等份的网格可以使网页平均放入2个模块（6:6），或是3个模块（4:4:4），或是4个模块（3:3:3:3），或是6个模块（2:2:2:2:2:2），使布局灵活多样。 如果需要更加细致的布局，也可以分为24等份，每份宽度40px，间距10px，总宽度为950px。但不一定要局限于这两种划分方式，也可自行尝试其它的划分，如10等份、16等份等。 2、网页栅格系统的设计 知识与技能准备 以网页分12等份，每份宽度80px，间距10px，总宽度950px为例，设置网页的CSS样式。 由于网页中一个模块占用的宽度可能为1份、2份、3份……12份，一共12种情况，需要将每种情况都使用一个CSS选择符进行设置，以后直接为标签添加对应份数的选择符即可完成宽度的设置。其中不同份数与其宽度的关系如下： 1份宽度=80×1-10=70px，附带10px的右边界； 2份宽度=80×2-10=150px，附带10px的右边界； 3份宽度=80×3-10=230px，附带10px的右边界； …… 11份宽度=80×11-10=870px，附带10px的右边界； 12份宽度=80×12-10=950px，无右边界； 3、网页栅格系统的实现 知识与技能准备 3、网页栅格系统的实现 CSS代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 [class*="grid"]{ /*为.gridn统一添加样式*/ float: left; margin: 0 10px 10px 0; /*右边界和下边界*/ } .grid1{ width: 70px; } .grid2{ width: 150px; } .grid3{ width: 230px; } .grid4{ width: 310px; } .grid5{ width: 390px; } .grid6{ width: 470px; } .grid7{ width: 550px; } .grid8{ width: 630px; } .grid9{ width: 710px; } .grid10{ width: 790px; } .grid11