《HYLI5教程课件》-《HYLI5教程课件》-第七章网页布局

上传人：1*** IP属地：广东上传时间：2025-12-30 格式：PPTX 页数：67 大小：7.85MB 积分：15 举报 版权申诉

已阅读5页，还剩62页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

部门：九江职业技术学院

汇报人：代飞2021网页布局技术0403CSS3+DIV技术布局02阶段案例01框架布局目录CONTENT阶段案例框架布局01框架主要是用来把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。访问者浏览站点时，可以使某个区域的文档永远不更改，但可通过导航条的链接更改主要框架的内容。在Dreamweaver中，利用框架和框架集，可以将单个网页分成多个独立的区域，以实现在一个浏览器窗口中同时显示多个页面的效果。通过构建这些页面之间的关系，可以实现文档导航、浏览等功能。框架多应用于各种论坛和电子邮箱页面，如图7-1所示。图7-1

QQ邮箱布局框架是框架集中所要载入的文档，它实际上就是单独的网页文件。只有在框架页面创建好后，在浏览器中浏览时才能正常显示框架集。2.框架框架集用于定义一组框架的布局和属性，包括框架的数目、大小、位置以及最初在每个框架中显示的网页。框架集文件本身不包含要在浏览器中显示的内容，它只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档等信息。1.框架集使用DreamweaverCS6制作网页时，根据框架分布和各框架作用的不同，框架结构可以分为多种类型，常用的框架结构有左右、上下和嵌套结构。3.框架的结构类型一.框架布局1.框架的结构布局上下结构左右结构左右结构框架由左右两个框架组成，可以在浏览器中同时打开两个页面。该框架由三个网页文件组成，框架集文件（如命名为index.html）、左框架文件（命名为left，网页文件为left.html）、和右框架文件（命名为right，网页文件为right.html）。如图7-2所示。嵌套结构7-2左右结构frameset是一种框架集属性，它的目的是用来将网页分成什么样子。如图所示，通过frameset将整个页面分成三个部分，如图7-4所示：头部：可以用来放置logo等左侧：目录框架，用来放置目录右侧：需要显示的内容。1.1frameset框架用法7-4frameset框架布局所以，frameset的作用就是用来将整个页面分成你想要的模块和架构。frameset元素仅仅会规定在框架集中存在多少列或多少行，因此必须使用cols或rows属性将其分为垂直和水平。【案例引入】垂直框架的效果，如图7-5所示。7-5垂直框架【案例实现】例7-1example01.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">

<title>横向框架</title></head><framesetrows="33%,34%,33%"frameborder="yes"border="5"framespacing="5"><framesrc="frame_a.html"><framesrc="frame_b.html"><framesrc="frame_c.html"></frameset></html>例7-1通过frame_a.html、frame_b.html和frame_c.html三个不同的网页一个垂直框架。frame_a.html的代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">

<h3style="text-align:center;background-color:#66bbcc;">李白诗词鉴赏</h3><center>

床前明月光，<br>

疑是地上霜。<br>

举头望明月，<br>

低头思故乡。<br></center></body></html>frame_b.html的代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">

<title>诗词鉴赏</title></head><bodybgcolor="#FF99FF"><h3style="text-align:center;background-color:#66bbcc;">杜甫诗词鉴赏</h3><center>

两个黄鹂鸣翠柳，<br>

一行白鹭上青天。<br>

窗含西岭千秋雪，<br>

门泊东吴万里船。<br></center></body></html>frame_c.html的代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">

<title>诗词鉴赏</title></head><bodybgcolor="#0000CC"><h3style="text-align:center;background-color:#66bbcc;">苏轼诗词鉴赏</h3><center>

<h4>饮湖上初晴后雨</h4>

水光潋滟晴方好，<br>

山色空蒙雨亦奇。<br>

欲把西湖比西子，<br>

淡妆浓抹总相宜。<br></center></body></html>【案例引入】再利用例7-1中的三个不同的网页，还可以制作一个水平框架。将frameset标签中的row属性改为col,效果如图7-6所示：7-6frameset水平布局【案例实现】例7-2example02.html<framesetcols="33%,34%,33%"frameborder="yes"border="5"framespacing="5"><framesrc="frame_a.html"><framesrc="frame_b.html"><framesrc="frame_c.html"></frameset>这里，频繁使用到一个窗口属性，frame。用<frameset>将整个页面分割成三个块，而每一个块，就是用frame来表示，其就是用来表示一个单独的页面。其语法：<framesrc="页面的源地址"><framesrc="页面的源地址">【案例引入】将例7-1中的三个网页置于行和列之中，在浏览器中打开，将会形成一个混合框架结构，效果如图7-7所示：图7-7frameset混合布局【案例实现】例7-3example03.html<framesetrows="40%,*"cols="*"frameborder="yes"border="5"framespacing="5"> <framesrc="frame_a.html"> <framesetcols="30%,70%"frameborder="yes"framespacing="5"> <framesrc="frame_b.html"><framesrc="frame_c.html"></frameset>通过图7-7中，可以看到，整个页面被分成了3份，但是和之前的都不一样。其中，frameborder:用来表示显示边框framespacing:表示边框的宽度这里，rows="40%,*"的意思是，将页面分成上部分40%,下部分用“*”表示为还没有分配。cols也是这个意思。然后，通过frame将frame_a.html页面放在其中。之后，再用frameset将下部分分成左右两部分，放上frame_b.html页面和frame_c.html页面，就会出现上述的效果了。【小贴士】<frameset></frameset>标签和<body></body>标签不能一起使用。不过，如果需要为不支持框架的浏览器添加一个<noframes>标签，此时一定要将此标签放置在<body></body>标签中！frameset框架的优点是在保持菜单等一部分内容的情况下，可以将其中的实际内容进行更换，所以比较容易维持网页的整体设计。但如果整个网页是由一个图像组成的时候，很难利用框架结构。因为要把切割的图像插入到多个框架中时，很难显示成一个完整的图像。

如何把切割好的小图像在网页中做成一个大图像，然后哦像框架文件一样在固定一部分图像的同时，只更改其中的某些内容呢？这个时候就可以使用iframe框架来完成。1.2iframe浮动框架用法iframe框架称为浮动框架或内联框架，它的内部显示的是一个文档内容，这与框架无异。该框架可以出现在标准XHTML网页中的任何位置。它的工作方式类似于嵌入到XHTML网页中的窗口，通过iframe框架可以查看另外一个网页，可以通过属性指定出现在该窗口中的网面的URL、窗口的宽度与高度，以及是否具有边框。浮动框架周围的任何文本环绕框架的方式与文字环绕图片的方式一样。可以通过<iframe>元素来创建浮动框架。浮动框架式一种比较特别的框架，和frame比较类似。不过frame必须在frameset中才可以，而iframe不一样，首先，它是一种内联框架，其次，它可以放在网页中的任何位置。所以，iframe可以直接放置在<body></body>中或者其他标签之中。iframe的语法格式为：<iframesrc="源页面"></frame>iframe还有其他的一些常用属性如表7-1所示：表7-1iframe的常用属性值属性值描述frameborder0、1规定是否显示框架周围的边框nameframe_name规定iframe的名称scrollingyes、no、auto规定是否在iframe中显示滚动条srcURL规定在iframe中显示的文档的URLwidthpixels、%规定的框架宽度heightpixels、%规定的框架高度alignleft、right、middle、bottom规定的框架对齐方式【案例引入】我们通过实例来演示一下的使用，当点击天猫在上面的框内显示天猫页面，点击京东则显示京东页面，实现效果如图7-8，图7-9所示。图7-8

显示天猫页面效果图7-9

显示京东页面效果【案例实现】例7-4example04.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8">

<ahref="/"target="topIframe">天猫</a>

<ahref="/"target="topIframe">京东</a></p></body></html>【任务目标】使用iframe浮动框架实现一个公司首页的效果。【案例引入】通过一个具体的案例来讲解iframe浮动框架的使用,其效果如图7-10所示。图7-10

公司首页效果图7-10所示的网页为一个公司主页面，通过iframe浮动框架实现。【案例实现】从图7-10页面整个布局来看，页面分为上种下框架，中间框架又拆分为左右两个框架。最上面框架为logo与主导航，中间左侧框架为次导航，中间右侧插入了一个iframe浮动框架，放置页面主体内容，最下方框架为版尾。“框架”面板效果如图7-11所示。图7-11框架面板效果（1）搭建结构搭建出图7-11的架构，代码如下：例7-5example05.html<body><divid="container"><divid="head"style="border:double4px;">

<center><h1>IFrame框架</h1></center></div></div><divid="footer">

<h1>底部</h1></div></div></body>然后对每个框架进行样式的设置，代码如下：body{margin:0px;padding:0px;}#container{margin-left:auto;margin-right:auto;margin-top:0px;padding:0px;height:750px;width:1024px;}#container#head{margin:0px;padding:0px;height:62px;width:1024px;}#container#left{margin:0px;padding:0px;float:left;height:623px;width:250px;}#container#right{padding:0px;width:754px;height:623px;margin:0px;float:right;overflow:visible;}#container#footer{margin:0px;padding:0px;height:65px;width:1024px;font-size:12px;color:#333;text-align:center;}（2）插入内容然后将主要内容插入例7-5。头部代码：<divid="head"style="border:double4px;"><ul>

<li><ahref="#">加入收藏</a></li></ul></div>左边框架代码：<divid="left"style="border:double4px;"><ul>

<li><ahref="#">公司简介<spanid="en">Aboutus</span></a></li>

<li><ahref="#">产品展示<spanid="en">Products</span></a></li>

<li><ahref="#">企业荣誉<spanid="en">Honor</span></a></li>

<li><ahref="#">留言反馈<spanid="en">Gusetbook</span></a></li>

<li><ahref="#">联系我们<spanid="en">Contactus</span></a></li></ul></div>右边框架插入一个iframe浮动框架，代码如下：<divid="right"style="border:double4px;"><divid="r3"> <iframename="main"marginwidth="0"marginheight="0"frameborder="0"scrolling="no"width="750"height="580"></iframe></div></div>底部框架代码：<divid="footer">

<br>地址：重庆市沙坪坝区新城东路133号电话lt;/span></div>在浏览器运行效果如图7-12所示：图7-12

公司主页面框架效果（3）美化页面然后利用CSS样式设置对图7-12效果进行美化：头部框架的美化代码#container#head{background-image:url(images/top_s1-1.jpg); margin:0px;padding:0px;height:62px;width:1024px;}#container#headul{height:56px;width:240px;margin-right:0px; padding-top:30px;margin-left:auto;}#container#headulli{float:left;list-style-type:none; padding-left:0px;margin-left:15px;margin-right:15px;}#container#headullia{font-size:12px;color:#333;text-decoration:none;}左边导航框架的美化代码#container#left{margin:0px;padding:0px;float:left;height:623px; width:270px;background-image:url(images/left_s1-1.jpg); background-repeat:no-repeat;}#container#leftul{width:200px;margin-top:30px;margin-left:40px;}#container#leftulli{line-height:34px;list-style-type:none;}#container#leftullia{font-family:"黑体";font-size:16px; color:#033711;text-decoration:none;}#container#leftullia#en{font-family:Tahoma,Geneva,sans-serif; font-size:12px;}右边浮动框架的美化#container#right#r3{background-repeat:no-repeat;background-position:top;padding-top:30px;padding-left:30px;height:560px;width:754px;}美化过后，并且删除每个div的style="border:double4px;"，最后运行效果如图7-13所示图7-13

美化后公司主页的效果（4）iframe浮动框架的设置对iframe浮动框架的加入源src="home.html"，运行效果如图7-14：home.html代码如下home.html<!doctypehtml><html><head><metacharset="utf-8"><title>home</title><style> #content{margin:0px;padding:0px;height:550px;width:700px;} #content#mleft#m1{filter:Alpha(Style=2);float:left;} #content#mrighth1{filter:Glow(Color=#ffff00,Strength=10); color:#06F;font-family:"黑体";padding-top:120px;} #content#mleft{float:left;margin-top:10px;}</style></head><body><divid="content"><divid="mleft"><imgid="m1"src="images/m1-1.jpg"width="416"height="396"/></div><divid="mright">

真诚<br/>

欢迎您！</h1></div></div></body></html>图7-14公司主页CSS3+DIV技术布局037.3CSS3+DIV技术布局在

HTML中，常使用div元素来创建多列，使用CSS对元素样式设计，从而将网页设计稿中的布局样式呈现在网页上。在各大网站中，常见的布局结构分为：单列布局，两列布局，三列布局和混合布局，其中使用最多的是混合布局，即按照网站的实际需求使用多列进行布局。7.3.1单列布局标题正文型，即单列布局，类似文章页面。单列布局多用于网站的首页，比如360搜索，单列布局的结构简洁明了，主题突出，适合排列简单的内容，不适合多行内容，通常单列布局都是固定宽度的。如图7-8所示图7-15360单列布局图【案例引入】我们利用单局布局模拟实现QQ浏览器的首页，效果如图7-16所示图7-16QQ浏览器的首页【案例实现】例7-6example06.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>布局</title><styletype="text/css">body{margin:0;//margin的作用是居中padding:0;}.header{text-align:center;}.main{margin:0auto;width:80%;text-align:center;}.foot{margin:0auto;width:80%;text-align:center;}</style></head><body><divclass="header"><imgsrc="images/标题.jpg"></div><divclass="main"><imgsrc="images/主体.jpg"></div><divclass="foot"><imgsrc="images/版权信息.jpg"></div></body></html>7.3.2多列布局随着

HTML5和CSS3新技术的出现，以及移动设备的飞速发展，互联网发生了翻天覆地的变化，对于如今来说，布局已不必再拘泥于固定格式。近些年网页排版设计的趋势，都是非常规布局，他们并不严格遵循某种准则或既定体系。视觉交互方面的，比如全屏布局，瀑布流，无缝拼图布局等，这些都不局限于传统的布局方式。而对于传统类的，信息类的网站大多都采用单列，两列或三列布局，还有混合布局结构。【案例引入】通过案例来实现一个两列布局的效果，只需要将两个侧边栏分别向左向右浮动，就可以形成两列布局：效果如图7-17图7-17两列布局效果图【案例实现】例7-7example07.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">

<title>两列布局</title><styletype="text/css">body{margin:0auto;padding:0;max-width:960px;}.left{float:left;width:30%;height:300px;}.right{float:right;width:70%;height:300px;}.main{width:90%;margin:0auto;}</style></head><body><divclass="main">

<divclass="left"><imgsrc="images/左边.jpg"></div>

<divclass="right"><imgsrc="images/右边.jpg"></div></div></body></html>【案例引入】其实，三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给两列布局中间再加一列，然后重新计算三列的宽度，就实现了三列布局。效果如图7-18图7-18三列布局效果图【案例实现】例7-8example08.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">

<title>三列布局</title><styletype="text/css">.left{float:left;width:320px;background-color:pink;color:green;height:600px;}.right{float:right;width:320px;background-color:#6FC;color:red;height:600px;}.middle{float:left;width:320px;background-color:#FF9;color:gray;height:600px;}.main{margin:0auto;padding:0;max-width:960px;} img{height:200px;width:200px;margin-left:50px;}</style></head><body><divclass="main"><divclass="left">

<h4align="center">红烧牛肉</h4>

<imgsrc="images/红烧牛肉.jpg"><br><p>制作方法：<br>1、牛肉洗净，切0.5厘米长方形厚片。陈皮切条状，葱洗净、切长段，姜去皮、切丝。<br>2、锅中倒1杯油烧热，放入牛肉片小火炸至肉片干酥，捞出。<br>3、倒出炸油，锅中留1小匙油烧热，爆香干辣椒，加入陈皮炒香，再加入葱、姜炒匀。<br>4、最后加入牛肉片、八角和A料，小火焖烧至汤汁收干即可盛出。<br><br></p></div><divclass="middle">

<h4align="center">红烧茄子</h4>

<imgsrc="images/红烧茄子.jpg"><br><p>

制作方法：<br>

1、将腌过的茄块用力挤干水份。<br>

2、锅中放油烧至三成热，倒入茄块翻炒，至呈黄色时成盘里。<br>

3、锅洗净，放少量油，烧至五成热时，将葱碎、蒜片、八角放入炒出香味，倒入茄块翻炒。<br>

4、茄块炒时，放料酒、豆瓣碗里的所有调料、半杯汤或水烧沸后勾芡。<br>

5、撒入香菜。<br></p></div><divclass="right">

<h4align="center">可乐鸡翅</h4>

<imgsrc="images/可乐鸡翅.jpg"><br><p>

制作方法：<br>

1、将材料准备好，鸡翅膀用生抽、盐、火麻油、料酒腌制30分钟左右。<br>

2、锅中放油烧至三成热，倒入茄块翻炒，至呈黄色。<br>

3、鸡翅煎至变色后，倒入准备好的蒜、姜、辣椒，翻炒两面金黄香味流入到肉汁中即可。<br>

4、倒入辅料之后，翻炒几下，就可以倒入可乐了。要注意，可乐不要倒太多，刚好盖过鸡翅就可以了。<br>

5、大火焖10分钟后收汁即可出锅，放上准备好的香菜即可。<br></p></div></div></body></html>同样的道理，更多列的布局，其实和两列、三列的布局模式是一样的.7.3.3弹性盒模型布局在CSS3中，CSSFlexibleBox模块也称为弹性盒，是一个非常重要的模块，该模块用于以非常灵活的方式实现页面布局处理。在之前的布局模型当中，布局处理比较死板，当容器的尺寸发生变化，那么布局也会相应的发生改变，比如，当容器的尺寸变小时，其他内容会超出容器的范围。我们来看一个案例。【案例引入】当主容器里面放了3个div，效果如图7-19所示图7-19

传统布局效果【案例实现】例7-9example9.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">

<title>弹性盒</title><style>#main{border:2pxsolid#382aff;padding:1em;width:960px;} .content{border:2pxsolid#ff2834;padding:1em;} div{border:2pxsolid#73ff58;padding:1em;float:left;width:200px;}</style></head><body> <divid="main"> <divclass="content"> <h1>section1</h1><p>博客，仅音译，英文名为Blogger，为WebLog的混成词。它的正式名称为网络日记；又音译为部落格或部落阁等，是使用特定的软件，在网络上出版、发表和张贴个人文章的人，或者是一种通常由个人管理、不定期张贴新的文.</p></div><divclass="content"><h1>section2</h1>

<p>博客上的文章通常以网页形式出现，并根据张贴时间，以倒序排列。</p></div><divclass="content"><h1>section3</h1>

<p>博客是继MSN、BBS、ICQ之后出现的第4种网络交流方式，现已受到大家的欢迎，是网络时代的个人“读者文摘”，是以超级链接为入口的网络日记，它代表着新的生活、工作和学习方式.</p></div></div></body></html>但是当#main选择器的宽度发生变化时，那么布局也会发生改变，比如将宽度改为600px，效果如图7-20所示图7-20

尺寸发生变化后的效果因此，引入弹性盒布局模型的目的是提供一种更加有效的方式来灵活地应对这样的问题。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。弹性盒布局和方向无关的。在传统的布局方式中，block布局会将块在垂直方向从上到下依次排列；而inline布局则会按照水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。1.使用弹性盒布局dispaly:box因为弹性盒这个属性需要兼容各种浏览器，所以它有指定方法，即需要写前缀进行兼容性{display:-moz-box;display:-webkit-box;display:box;}在CSSFlexibleBox模块中，该容器元素中的每一个元素均被称为“Flexitem”，将该容器元素称为“Flexcontainer”。使用弹性盒布局和使用浮动等样式属性进行布局的一个主要区别是：使用浮动等样式属性的时候，需要对容器里面每一个元素指定样式属性，但是当使用弹性盒布局时，只需对容器元素指定样式属性。【案例引入】我们对容器元素为id属性值为main的div元素使用弹性盒布局，在浏览器中打开示例页面，页面中所有样式类名为content的div元素的排列方式被修改为横向排列。如图7-21所示图7-21

弹性布局效果【案例实现】例7-10example10.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">

<title>弹性盒</title><style>#main{border:2pxsolid#382aff;padding:1em;display:-moz-box; display:-webkit-box;display:box;} .content{border:2pxsolid#ff2834;padding:1em;} div{border:2pxsolid#73ff58;padding:1em;}</style></head><bodystyle="width:600px;"> <divid="main"> <divclass="content"> <div> <h4>section1</h4>

<p>示例文字1</p></div> <div><h4>section2</h4>

<p>示例文字2</p></div></div><divclass="content"> <h4>section3</h4>

<p>示例文字3</p> <div> <h4>section4</h4>

<p>示例文字4</p></div> <div><h4>section5</h4>

<p>示例文字5</p></div></div></div></body></html>2.设置元素排列顺序box-direction可以通过box-direction样式属性的使用可以控制容器中所有子元素的排列顺序，指定值有以下几种normal|reverse|inherit其中normal是默认值，表示按照正常顺序排列。所谓正常顺序，就是我们看书写文字的顺序，从左往右，由上至下。而reverse表示反转，先出现的元素，就在下面或是右边【案例引入】在例7-10的代码中，将容器元素为id属性值为main的div元素，指定box-direction:reverse;样式属性。在浏览器中打开，页面中所有样式类名为content的div元素的排列方式被修改为从容器元素，即id属性值为main的div元素开始反向排列，如下图7-22所示图7-22反向排列布局效果【案例实现】例7-11example11.html#main{border:2pxsolid#382aff;padding:1em;display:-moz-box; display:-webkit-box;display:box;-moz-box-direction:reverse;-webkit-box-direction:reverse;box-direction:reverse;}当我们再次修改一下id属性值为main的div元素的样式，代码如下所示#main{border:2pxsolid#382aff;padding:1em;display:-moz-box; display:-webkit-box;display:box;}然后对所有样式类名为content的div元素指定box-direction:reverse;样式属性，代码如下所示.content{border:2pxsolid#ff2834;padding:1em;display:-moz-box;display:-webkit-box;display:box;-moz-box-direction:reverse;-webkit-box-direction:reverse;box-direction:reverse;}在浏览器中打开示例页面，页面中所有content的div元素的所有section子元素的排列方式被修改为横向反向排列，如下图7-23所示图7-23横向反向排列布局效果3.设置元素排列方式box-orient可以通过box-orient来确定容器中子元素的方向。是横着排还是竖着走。可选的值有：horizontal|vertical|inline-axis|block-axis|inherit其中，inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的，让子元素横排；而vertical与block-axis的表现也是一致的，让元素纵列。上例中的效果，元素的排列方式是横向的，我们可以为content的div元素添加-moz-box-orient:vertical;-webkit-box-orient:vertical;box-orient:vertical;样式属性，让元素纵列。代码如下.content{border:2pxsolid#ff2834; padding:1em;display:-moz-box;display:-webkit-box;display:box;-moz-box-orient:vertical;-webkit-box-orient:vertical;-o-box-orient:vertical;box-orient:vertical;}在浏览器中打开示例页面，页面中所有content的div元素的所有section子元素的排列方式被修改为纵向排列，如图7-24所示图7-24

纵向排列布局效果4.设置元素宽度box-flex【案例引入】接下来通过将例7-11中，所有样式类名为content的div元素的flex属性值设置为1的方法，使所有样式类名为content的div元素的总宽度等于容器元素，即id属性值为main的div元素的宽度。当所有样式类名为content的div元素的flex属性值都被设置为1时，这些div元素的宽度均等。效果如图7-25所示图7-25元素宽度为1的布局效果【案例实现】例7-12example12.html.content{border:2pxsolid#ff2834;padding:1em;display:-moz-box;display:-webkit-box;display:box;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;-moz-box-orient:vertical;-webkit-box-orient:vertical;-o-box-orient:vertical;box-orient:vertical;}5.设置垂直方向上的对齐方式box-alignbox-align决定了垂直方向上的空间利用，也就是垂直方向上的对齐表现。为了便于记忆，我们可以拿来和CSS2中的vertical-align隐射记忆，两者都有”align”，都是都是垂直方向的对齐box-align的可选参数有start|end|center|baseline|stretch其中stretch为默认值，为拉伸，也就是父标签高度过高，其孩子元素的高度就多高，start表示顶边对齐，end为底部对齐，center为居中对齐，baseline表示基线（英文字母o,m,n等的底边位置线）对齐6.设置垂直方向上的对齐方式box-packbox-pack决定了父标签水平遗留空间的使用，其可选值有start|end|center|justify就大部分的行为表现来说分别对应text-align属性的值：left|right|center|justify；但是，之所以box-pack不使用”left”，而是”start”，是因为box-direction属性，这玩意可以反转原本的排列，原本的“左对齐”反转后结果是“右对齐”了，此时”left”显然就词不达意了，所以使用”start”更具有概括性，就是与父标签的起始位置对齐，从而不会产生语义与行为上的困扰。7.box-flex-group和box-ordinal-group子元素除了以上说的几个属性外，还有两个属性box-flex-group和box-ordinal-group，因为这两个属性实用性不强，这里就不做详细的说明。目前没有浏览器支持box-flex-group属性。box-ordinal-group用整数值来定义伸缩盒对象的子元素显示顺序。数值越小，位置就越靠前，这不难理解，第一组在最前嘛，随后第二组，第三组…例如：box-ordinal-group:1的组就会在box-ordinal-group:2的组前面显示。于是，我们可以利用这个属性改变子元素的顺序。7.4阶段案例【案例引入】制作汽车展示网页，页面内容包括页面顶部“水平导航栏”和“横幅”，右侧显示出“汽车型号导航”，中间内容显示“推荐车型”和“备用零件”，网页底部显示“网站或公司信息”。需要将网页内容进行有效排版。【案例实现】例7-13example13.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

《HYLI5教程课件》-《HYLI5教程课件》-第七章网页布局

文档简介

温馨提示

最新文档

评论

《HYLI5教程课件》-《HYLI5教程课件》-第七章 网页布局

文档简介

温馨提示

最新文档

评论

相关文档

《HYLI5教程课件》-《HYLI5教程课件》-第七章网页布局