(
课件网) 制作响应式网页 第三阶段 能进一步完善栅格化系统的功能，增加栅格布局的留白区域和栅格模块的隐藏功能； 能将栅格化系统运用到D清单页面中进行响应式布局。 任务目标 任务21 重布局页面实现响应式效果 使用任务20中制作的响应式栅格系统（文件grid.css），对D清单页面进行响应式改造，使页面在平板设备、电脑设备中都能正常显示，并根据浏览器的宽度自动调整页面内容的排版。 任务描述 图1-21平板和电脑端浏览效果 任务21 重布局页面实现响应式效果 完成D清单页面的响应式改造，需要： 增加栅格布局的留白区域设置； 增加栅格模块的隐藏功能设置； 根据需要对D清单页面重新布局的内容进行HTML和CSS修订，以应用栅格系统对D清单页面进行响应式改造。 部分电脑端页面排版布局如图1-21-1所示。 任务分析 图1-21-1 变更为左右或左中右布局的电脑端页面效果 任务21 重布局页面实现响应式效果 知识与技能准备 在网页布局中，并不是任何网页都会将页面的空间填满，有时候由于网页设计的需要会预留一些不放置内容的区域。在上一任务中设置的栅格布局中，每个模块都会从左向右排列将空间填满，现在需要进一步改良设置。 如下图所示，由于标签的填充已用于设置模块间的间距，所以使用左边界，以每份网格为单位，为模块标签的左侧隔开留白的空间。 1、为网页栅格系统添加留白区域 图1-21-2留白栅格原理图 知识与技能准备 左边界的长度同样还是以百分比%为单位，设置为一份网格的整倍数，有1份网格、2份、……、11份一种11种情况。和上一任务中栅格系统设置方法类似，为不同的情况都设置一个独立的选择符。 1、为网页栅格系统添加留白区域 知识与技能准备 为栅格系统的CSS文件补充下面的设置： 1、为网页栅格系统添加留白区域 为模块标签添加“grid_”设置宽度的同时，添加“ml_”付加上左边界产生左侧留白效果。 css： 1 2 3 4 5 6 7 8 9 10 11 12 .ml_s1{ margin-left: 8.33333%; } .ml_s2{ margin-left: 16.66667%; } .ml_s3{ margin-left: 25%; } .ml_s4{ margin-left: 31.213333%; } .ml_s5{ margin-left: 41.66667%; } .ml_s6{ margin-left: 50%; } .ml_s7{ margin-left: 58.33333%; } .ml_s8{ margin-left: 66.66667%; } .ml_s9{ margin-left: 75%; } .ml_s10{ margin-left: 81.213333333%; } .ml_s11{ margin-left: 91.66667%; } HTML： 1 2 3 4 5 6 7 8 9 10
图1-21-3有留白的栅格显示效果 知识与技能准备 响应式栅格系统中要添加留白效果，需要为每种设备的媒体查询，分别添加上述的CSS设置，并通过选择符的名称区分，做法与上一任务中响应式栅格系统设置方法类似。代码请查看书本。 如果因为布局需求添加右侧留白边界的，使用相同的方法添加对应的选择符。 1、为网页栅格系统添加留白区域 知识与技能准备 部分网页的内容比较多，在手机或平板设备下页面无法显示过多的内容，可能需要隐藏部分次要的模块，以节省空间。前面栅格系统的设置中，设定了1-12份网格占用的空间，现在追加一个“0份”空间，设置为“display:none;”，添加了该选择符的标签便会被隐藏。 2、在特定设备宽度下隐藏部分的栅格模块 grid.css： 1 2 3 4 5 6 7 8 9 10 11 12 @media all and (max-width:767px){ .grid_s0{ display: none;} } @media all and (min-width:768px) and (ma ... ...
