项目3任务2ppt课件.pptx

《项目3任务2ppt课件.pptx》由会员分享，可在线阅读，更多相关《项目3任务2ppt课件.pptx（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、项目3任务2项目3 对网页广告单页进行响应式改造任务3.2 编写网页栅格系统HTML5+CSS3网页布局学校名称：任课老师：联系电话：目录CONTENTS0102学习目标03任务描述04知识学习与课堂练习05任务实施06任务回顾任务拓展01 1、能口述网页栅格系统的布局原理，栅格系统的设计原则； 2、能设置制作出固定宽度页面和任意宽度页面的栅格系统的CSS布局代码； 3、能将栅格系统和媒体查询功能结合，制作出CSS布局文件，兼容任意宽度、任意显示设备的网页排版布局。02 将媒体查询功能和栅格化布局结合，制作一个适用于页面排版布局的通用型CSS文件，使得任何一个按要求设置并应用该CSS文件的页面

2、能够实现响应式效果。学习 1、栅格系统的布局原理和设计原则 2、固定宽度和任意宽度页面的栅格系统区别及CSS布局代码编写完成 删格系统样式代码的测试。04知识学习与课堂练习 网页栅格系统是一种网页排版布局方式，将网页宽度平分为多个等份的网格，如6等份、12等份、24等份，页面中每个模块的宽度设置为1等份的整倍数。如下图将页面分为6等份的布局效果：1、认识网页栅格系统04知识学习与课堂练习 对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。对于前端开发来说，网页将更加的灵活与规范，如上图的6等份的网格，还可组合出2:2:2、3:3、4:2等布局方式。下面是不同等

3、份的分割在网页中的实际应用。1、认识网页栅格系统04知识学习与课堂练习 如下图，假设将网页宽度平均分为n份，每份网格宽度为w，则网页总宽度为wn。但考虑到每个网页模块之间因保留一定的间距i，如果一个模块占用3份网格，其实际宽度为：w3-i。而水平排列的最后一个模块不应该保留间距i，所以网页的实际总宽度应该为： 总宽度Width= wn I 根据上面的公式，假设网页分为12等份，每份宽度80px，间距10px，则总宽度为950px。这是网页栅格化中比较常用的划分方式，12等份的网格可以使网页平均放入2个模块（6:6），或是3个模块（4:4:4），或是4个模块（3:3:3:3），或是6个模块（2:

4、2:2:2:2:2），使布局灵活多样。2、网页栅格系统的设计04知识学习与课堂练习 以网页分12等份，每份宽度80px，间距10px，总宽度950px为例，设置网页的CSS样式。 由于网页中一个模块占用的宽度可能为1份、2份、3份12份，一共12种情况，需要将每种情况都使用一个CSS选择符进行设置，以后直接为标签添加对应份数的选择符即可完成宽度的设置。其中不同份数与其宽度的关系如下： 1份宽度=801-10=70px，附带10px的右边界； 2份宽度=802-10=150px，附带10px的右边界； 11份宽度=8011-10=870px，附带10px的右边界； 12份宽度=8012-10=9

5、50px，无右边界； 使用CSS设置为：3、网页栅格系统的实现css123456789101112131415161718class*=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: 63

6、0px; .grid9 width: 710px; .grid10 width: 790px; .grid11 width: 870px; .grid12 width: 950px; margin-right: 0; /*不需要边界*/.grid_last margin-right: 0; /*消除一行最后一个的边界*/*关于标签的其它设置在此省略，如背景、高度等*/04知识学习与课堂练习 选择符“.grid1”至“.grid12”设置了12种等份情况下所使用的宽度，“class*=grid”选择符为添加了“.gridn”的标签再添加上10px的右边界和其它相同的样式设置。 由于一行中最后一个

7、模块不需要添加右边界，所以设置“.grid_last”选择符用于消除右边界，最后一个模块的class因写为“class=gridn grid_last”。 将上述CSS设置应用到实际网页布局中：3、网页栅格系统的实现html1234567891011121314151617182222223454804知识学习与课堂练习4、网页栅格系统的另一种设置（自动适应不同的页面宽度） 在上一内容的设置中，栅格系统只能适用于固定的网页宽度，如果网页总宽度变更，需要重新计算和设置每份网格的宽度。再或者要制作自动适应浏览器宽度的网页，这种设置方法将不适用。 此时可以使用百分比%为单位设置宽度，但间距如果为固定

8、值时，将无法计算出不同宽度下每份网格的比例。现在需要对网格的设置进行一些调整，如下图：04知识学习与课堂练习4、网页栅格系统的另一种设置（自动适应不同的页面宽度） 使用百分比%设置网格的宽度，如果分为12等份，n份网格的宽度设置如下： 1份宽度 = 1/12 = 8.33333%； 2份宽度 = 2/12 = 16.66667%； 11份宽度 = 11/12 = 91.66667%； 12份宽度 = 12/12 = 100%； 将标签设置为“怪异盒子模型”，使用填充代替边界产生各份的间距，这样间距的宽度将不会对各份的实际宽度造成影响。填充设置为左填充和右填充，宽度为间距宽度的一半。 网页的总宽

9、度等同于浏览器的宽度，或等同于栅格化标签的父标签宽度。由于网页两侧会留有填充产生的间距，所以网页内容可视的宽度为“网页总宽度Width - i”。04知识学习与课堂练习4、网页栅格系统的另一种设置（自动适应不同的页面宽度）class*=grid_ /*为.gridn_统一添加样式*/box-sizing: border-box;/*怪异盒子模型*/padding: 0 5px 10px 5px;/*间距为5+5=10*/float: left;.grid_s1 width: 8.33333%; .grid_s2 width: 16.66667%; .grid_s3 width: 25%; .g

10、rid_s4 width: 33.33333%; .grid_s5 width: 41.66667%; .grid_s6 width: 50%; .grid_s7 width: 58.33333%; .grid_s8 width: 66.66667%; .grid_s9 width: 75%; .grid_s10 width: 83.33333333%; .grid_s11 width: 91.66667%; .grid_s12 width: 100%;333357116405任务实施 设计一种响应式栅格布局，除了能够实现栅格化布局功能外，还能结合媒体查询功能，在不同的浏览器宽度下，自动调整布

11、局结构，如网页在手机设备中一行只显示1个模块的内容，在平板设备中自动调整为一行显示3个模块，电脑设备中一行显示4个模块。 下面将“知识学习与课堂练习”中第4个知识点的CSS设置结合媒体查询功能进一步改进，并将该部分的CSS设置单独写在一个独立的CSS文件中（如grid.css），以后可直接应用到其它网页设置中。 使用媒体查询功能设置出3种浏览器宽度下所使用的设置：手机设备（宽度=767）、平板设备（768=宽度=1024）。都添加相同的栅格系统设置，但是选择符的命名有所区别，分别是“.grid_sn”、“.grid_mn”、“.grid_Ln”。 网页中模块标签将同时添加这三种选择符，如“cl

12、ass=grid_s12 grid_m6 grid_L3”，由于不同宽度下只有一种选择符会生效，所以标签在不同宽度下将使用不同的布局比例。05任务实施 参考代码grid.css123456789101112131415161718192021222324252627class*=grid_/*栅格化标签的通用设置*/box-sizing: border-box;padding: 0 5px 10px 5px;float: left;background-clip: content-box; /*填充部分不显示背景，该句可不设置*/*手机设备附加的样式，页面宽度=767*/media all a

13、nd (max-width:767px).grid_s1 width: 8.33333%; .grid_s2 width: 16.66667%; /* 其余设置与上一内容设置的一样，此处省略*/.grid_s12 width: 100%; /*平板设备附加的样式，768=页面宽度=1024*/media all and (min-width:1024px).grid_L1 width: 8.33333%; .grid_L2 width: 16.66667%; /* 其余设置与上一内容设置的一样，此处省略*/.grid_L12 width: 100%; html1234567891006任务回顾学习 1、栅格系统的布局原理和设计原则 2、固定宽度和任意宽度页面的栅格系统区别及CSS布局代码编写完成 删格系统样式代码的测试。07任务拓展 运用“任务实施”中制作的栅格化设置文件（grid.css），制作如下图效果的相册页面。要求： 1）不同设备下图片部分的排版有所不同，手机、平板设备下图片部分的总宽度等同于浏览器的宽度，电脑设备下图片部分总宽度为1000px； 2）头部部分宽度始终等同于浏览器宽度，可不使用栅格化布局，但手机设备下文字排布位置有所不同。感谢聆听！THANK YOU!HTML5+CSS3网页布局学校名称：指导老师：联系电话：