HTML5+CSS3网页设计与制作课件：重布局页面实现响应式效果

HTML5+CSS3网页设计与制作重布局页面实现响应式效果能进一步完善栅格化系统的功能，增加栅格布局的留白区域和栅格模块的隐藏功能；能将栅格化系统运用到D清单页面中进行响应式布局。任务目标

重布局页面实现响应式效果使用中制作的响应式栅格系统（文件grid.css），对D清单页面进行响应式改造，使页面在平板设备、电脑设备中都能正常显示，并根据浏览器的宽度自动调整页面内容的排版。任务描述图1-21平板和电脑端浏览效果

重布局页面实现响应式效果完成D清单页面的响应式改造，需要：增加栅格布局的留白区域设置；增加栅格模块的隐藏功能设置；根据需要对D清单页面重新布局的内容进行HTML和CSS修订，以应用栅格系统对D清单页面进行响应式改造。部分电脑端页面排版布局如图1-21-1所示。任务分析图1-21-1变更为左右或左中右布局的电脑端页面效果

重布局页面实现响应式效果知识与技能准备在网页布局中，并不是任何网页都会将页面的空间填满，有时候由于网页设计的需要会预留一些不放置内容的区域。在上一任务中设置的栅格布局中，每个模块都会从左向右排列将空间填满，现在需要进一步改良设置。如下图所示，由于标签的填充已用于设置模块间的间距，所以使用左边界，以每份网格为单位，为模块标签的左侧隔开留白的空间。1、为网页栅格系统添加留白区域图1-21-2留白栅格原理图知识与技能准备左边界的长度同样还是以百分比%为单位，设置为一份网格的整倍数，有1份网格、2份、……、11份一种11种情况。和上一任务中栅格系统设置方法类似，为不同的情况都设置一个独立的选择符。1、为网页栅格系统添加留白区域知识与技能准备为栅格系统的CSS文件补充下面的设置：1、为网页栅格系统添加留白区域为模块标签添加“grid_”设置宽度的同时，添加“ml_”付加上左边界产生左侧留白效果。css：123456789101112/*追加留白的设置*/.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：12345678910<divclass="main"><!—网页主体--><divclass="grid_s10ml_s2"></div><!--留白2个网格--><divclass="grid_s3"></div><divclass="grid_s3ml_s1"></div><!--留白1个网格--><divclass="grid_s3ml_s1"></div><!--留白1个网格--><divclass="clear"></div></div>图1-21-3有留白的栅格显示效果知识与技能准备响应式栅格系统中要添加留白效果，需要为每种设备的媒体查询，分别添加上述的CSS设置，并通过选择符的名称区分，做法与上一任务中响应式栅格系统设置方法类似。代码请查看书本。如果因为布局需求添加右侧留白边界的，使用相同的方法添加对应的选择符。1、为网页栅格系统添加留白区域知识与技能准备部分网页的内容比较多，在手机或平板设备下页面无法显示过多的内容，可能需要隐藏部分次要的模块，以节省空间。前面栅格系统的设置中，设定了1-12份网格占用的空间，现在追加一个“0份”空间，设置为“display:none;”，添加了该选择符的标签便会被隐藏。2、在特定设备宽度下隐藏部分的栅格模块grid.css：123456789101112@mediaalland(max-width:767px){ /*追加设置*/ .grid_s0{display:none;}}@mediaalland(min-width:768px)and(max-width:1023px){ /*追加设置*/ .grid_m0{display:none;}}@mediaalland(min-width:1024px){ /*追加设置*/ .grid_L0{display:none;}}任务实施使用上一个任务中制作的响应式栅格系统（文件grid.css），进一步完善D清单网页。使页面在平板设备、电脑设备中都能正常显示，并根据浏览器的宽度自动调整页面部分内容的排版。由于排版方式有所变化，部分内容的html标签代码需要进行一下修改。1、关于1.1布局修改1.2内容格式优化由于该部分与手机端其实是一致的，在电脑和平板端，由于视口宽度的增加，我们可以对其字体大小、留白等进行适当修改。图1-21-4关于部分的效果图任务实施2、特征模块在该内容模块中，我们可以对其进行栅格化布局，其中标题和副标题可以是12栅格，不需要修改。图片和文本区域，平板端可以按照5：7进行布局，电脑端可以按照4：8进行布局。图1-21-5特征模块效果图任务实施3、应用下载与上一模块类似，其中标题和副标题可以是12栅格，不需要修改。图片和文本区域，平板和电脑端都可以按照4：4：4进行布局。图1-21-6应用下载效果图任务实施4、高级会员该表格在布局时已经是12列栅格的布局，与关于部分类似，只需要增加最大宽度样式到HTML的即可，这里操作省略。5、帮助中心该部分与应用下载模块类似，为4：4：4布局，最大宽度方面分别对标题、3组文本和视频添加row样式，具体代码可以参考下载模块内容进行设置，这里省略。图1-21-7帮助中心效果图任务实施6、联系我们该模块为左右结构，与“特征模块”类似，在平板端为6：6布局。为了右边的表单短一些，在电脑端可以采用8：4的比例进行布局。图1-21-8联系我们效果图任务实施7、测试完成所有布局后，我们需要对响应式效果进行测试。以火狐浏览器为例，我们可以依次单击设置菜单中的“WEB开发者”->”响应式设计模式”，打开响应式设计模式视图。也可以直接单击右键“检查元素”或按快捷键“F12”，打开调试窗口，再单击“响应式设计模式”按钮打开响应式设计模式视图。如图1-21-9所示：我们选择设备型