模块6：制作手机端网页（课件）-《网页设计与制作》同步教学（语文出版社）

模块6：制作手机端网页 学 习 导 入 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 在本模块中着重介绍使用HTML+CSS+DIV制作手机端网页，在网页制作过程中用到DIV布局，重点介绍DIV盒子模型的使用方法，本例子还涉及到了CSS的字体、背景、图片、列表等样式控制网页元素的方法。 模块6：制作手机端网页 学 习 目 标 技能目标： 1.能制作简单的手机端网页 2.具有分析、解决网页布局的能力 3.使用CSS样式控制网页元素的能力 知识目标： 1.掌握div布局网页的功能及应用 2.掌握CSS字体、背景、图片、超链接、列表等样式控制网页风格的方法 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 任务描述 ○任务描述 苏州某公司与电信公司合作负责制作手机端的网页，该公司已开发出了掌上苏州网站，该网站为了吸引年青人浏览设计了一系的活动如：校园勋章疯狂任务、星梦奇缘全城热恋活动，这些活动的方案已由设计部的工作人员设计出来，请你将这些方案制作成手机端的网页。 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 任务目标 ○任务目标 利用div布局网页，使用CSS的背景、字体、表单、图片 等样式制作出手机端校园勋章疯狂任务网页效果图， 效果如图6-1所示。 图6-1 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 任务分析 ○任务分析 “掌上苏州”活动综合整体结构如图6-2所示，活动广告位及活动信息栏的具体内容介绍如表6-1和表6-2所示。 图6-2 表6-1 表6-2 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 任务实施 ○任务实施 1、网站LOGO制作 图6-25 网站logo HMTL代 码 <div id="logo"><img src="logo(5).gif" /></div> CSS 代 码 *{font-size:12px; margin:0px; padding:0px;} #logo{height:53px; width:100%;} 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 任务实施 2、活动专区制作 图6-26 活动专区 HTML代 码 <div class="active">活动专区</div> CSS 代 码 .active{height:30px;width:100%;background-color:#ff9900; line-height:30px;font-family:"黑体"; color:#FFF; text-align:center; letter-spacing:2px; margin-bottom:3px; font-size:18px;} 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 任务实施 3、广告区制作 图6-27 广告区 HTML代 码 CSS 代 码 <div class="guanggao"><img src="011.gif" /></div> .guanggao{ margin:0 auto; width:200px; height:180px;} 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 任务实施 4、任务宣传制作 图6-28 任务宣传 HTML代 码 CSS 代 码 <div class="biaoyu">校图勋章疯狂任务，你准备好了吗?</div> .biaoyu{height:20px; width:100%; line-height:20px; color:#ff9966; text-align:center; font-weight:500;} 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 任务实施 5、按钮 图6-29 按钮 HTML代 码 CSS 代 码 <div class="biaodan"> <ul> <li><input type="button" value="<"/></li> <li><input type="radio"/></li> <li><input type="radio"/></li> <li><input type="radio"/></li> <li><input type="radio"/></li> <li><input type="button" value=">"/></li> </ul> </div> .biaodan{margin:0 auto;height:20px; width:200px; line-height:20px; text-align:center; margin-bottom:2px;} .biaodan ul{list-style-type:none;}. biaodan li{float:left; width:30px;} 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 任务实施 6、活动区 图6-30 活动区 HTML代 码 <div class="hd"></div> <div class="hdq"> <div class="ggt"><img src="01.gif" width="80" height="80"/></div> <span class="jc">校园勋章疯狂任务</span><br/> <span class="jc">活动时间：</span> <span class="jh">2012年9月30</span> <br/> <span class="jh">12:00～2012年12月31日 24:00</span><br /> <span class="jc">活动简介:</span> <span class="jh">疯狂任务赢大奖……</span> <div class="gz"> <ul> <li><span class="jh">已有<span class="jr">12345人</span>关注</span></li> <li><input type="button" class="bt" value="去领任务"/><span class="jw"></span></li> </ul> </div> </div> <div class="xx"></div> 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 任务实施 6、活动区 图6-30 活动区 小贴士 CSS代 码 .hd{width:100%; border-bottom:#ff9966 solid 1px;} .hdq{height:130px; width:270px; margin:0 auto; padding-top:5px;} .jc{font-weight:600; line-height:20px;} .jh{color:#999;} .jr{color:#F00;} .jw{color:#FFF;} gz{margin-top:20px; margin-left:5px;width:250px; height:30px; text-align:center; line-height:30px;} .gz ul{list-style-type:none;} .gz li{float:left; width:110px;} .xx{border-bottom:#ff9966 dashed 1px; } .bt{background-color:#ff9966; height:25px; border:0px; width:53px; color:#FFF; float:right;} 注：后面四个活动区制作方法一样。 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 任务实施 7、页脚区 图6-31 页脚区 小贴士 HTML代 码 <div class="hdq"> <ul> <li class="duiq"><span><input type="button" class="btw" value="1" /> <a href="">下一页>></a></span><br/> </li> <li><hr /></li> </ul> <span class="hg"> 免费发飞信看新闻逛空间<br/> 掌苏首页 会员权益 意见箱 <br/> 书签下载 广告合作<br/> 苏ICP备08007553<br/> </span> </div> CSS代 码 .duiq{margin-left:180px;} hr{width:100px;text-align:left;} .hg{line-height:25px; color:#999;} 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 任务评价 ○任务评价 学习任务名称：制作校园勋章疯狂任务网页 班级： 学号： 姓名： 指导教师： 评价项目 评价标准 评价依据（指信息、佐证） 评价方式 权重 得分小计 总分 自我评价 小组评价 教师（企业）评价 10% 20% 70% 关键能力 1.计算机操作的规范性； 2.能参与小组讨论，相互交流； 3.能积极主动、勤学好问； 4.能清晰、准确表达。 1.课堂表现 2.学习任务完成 40% 专业能力 1.DIV盒子模型的理解； 2．CSS 样式字体样式、列表样式使用的熟练程度； 3.网页完成效果是否和教师讲解的一致。 1.课堂表现 2.学习任务完成 3.网页完成的效果 60% 指导教师综合 评价 指导教师签名： 日期： 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 任务总结 ○任务总结 本任务详细校园勋章疯狂任手机端网页的制作过程，使用到的知识点有使用DIV布局网页，CSS样式的表单、字体、背景、无序列表等样式。在制作过程中，尽量理解操作步骤中各关键步骤的作用，结合制作分析，理解这样式表现出来的网页效果，从而达到熟能生巧的目的。 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 ○必备知识 1.div盒子模型 <div>（division）简单而言是一个区块容器标记，即<div>与</div>之间相当于一个容器，可以容纳段落、标题、表格、图片、乃至章节、摘要和备注等各种HTML元素。因此，可以把<div>与</div>的内容视为一个独立的对象，用于控制CSS的控制。声明时只需要对<div>进行相应的控制，其中的各标记元素都会因此而改变。使用div实现网页,效果图如图6-3所示。 图6-3 网页效果图 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 <html> <head> <title>div 标记范例</title> <style type="text/css"> <!-- div{ font-size:18px; /* 字号大小 */ font-weight:bold; /* 字体粗细 */ font-family:Arial; /* 字体 */ color:#FF0000; /* 颜色 */ background-color:#FFFF00; /* 背景颜色 */ text-align:center; /* 对齐方式 */ width:300px; /* 块宽度 */ height:100px; /* 块高度 */ } --> </style> </head> <body> <div> 这是一个div标记 </div> </body> </html> 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 2.span标签与div标签的区别 <span>标记与<div>标记一样，作为容器标记而被广泛应用在HTML语言中。在<span>与</span>中间同样可以容纳各种HTML元素，从而形成独立的对象。如果把<div>替换成<span>,样式表中把“div”替换成“span”执行后也会发现效果完全一样。可以说<div>与<span>这两个标记起到的作用都是独立出各个区块，在这个意义上二者没有太多的不同。 <div>与<span>的区别在于，<div>是一个块级（block-level）元素，它包围的元素会自动换行。而<span>仅仅是一个行内元素（inline elements），在它的前后不会换行。<span>没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，就可以使用<span>元素。 此外，<span>标记可以包含于<div>标记之中，成为它的子无素，而反过来则不成立，即<span>标记不能包含<div>标记。如下例子所示： 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 <html> <head> <title>div与span的区别</title> </head> <body> <p>div标记不同行：</p> <div><img src="building.jpg" border="0"></div> <div><img src="building.jpg" border="0"></div> <div><img src="building.jpg" border="0"></div> <p>span标记同一行：</p> <span><img src="building.jpg" border="0"></span> <span><img src="building.jpg" border="0"></span> <span><img src="building.jpg" border="0"></span> </body> </html> 图6-4 span 标签与div标签的区别 以上的例子可以看到div标记的3幅图片被分在了3行中，而<span>标记的图片没有换行。 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 3.块元素和行内元素归类 块元素(block element)和行内元素(inline element)都是html规范中的概念。块元素和行内元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和行内元素的这种属性差异就不成为差异了。比如，我们完全可以把行内元素加上display:block这样的属性，让它也有每次都从新行开始的属性。 常用的块元素(block element) * dir - 目录列表 * div - 常用块级容易，也是css layout的主要标签 * dl - 定义列表 * form - 交互表单 * h1 - 大标题 * h2 - 副标题 * h3 - 3级标题 * h4 - 4级标题 * h5 - 5级标题 * h6 - 6级标题 * hr - 水平分隔线 * menu - 菜单列表 * ol - 排序表单 * p - 段落 * pre - 格式化文本 * table - 表格 * ul - 非排序列表 常用的行内元素(inline element) * a - 锚点 * br - 换行 * img - 图片 * input - 输入框* span - 常用内联容器，定义文本内区块 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 4.IE盒子模型 图6-5 IE盒子模型 从上图6-5可以看到一个盒子模型由content(内容)、border边框、padding间隙和margin（边外距）这4个部分组成 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 例：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，如果用标准 W3C 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；如果用IE 盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px 一个盒子的实际宽度（或高度）是由content+padding+border+margin组成。在CSS中可以通过设定width和height的值来控制conten的大小，并且对于任何一个盒子，都可以分别设定4条边各自的border、padding和margin。因此只要利用好盒子的这些属性，就能够实现各种各样的排版效果。 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 5.border属性 Border:的属性主要有3个，分别是color颜色、width粗细和style样式。利用border的属性制作出下列的网页效果图。 图6-6 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 <html> <head> <title>border-style</title> <style type="text/css"> <!-- div{ border-width:6px; border-color:#000000; margin:20px; padding:5px; background-color:#FFFFCC; } --> </style> </head> <body> <div style="border-style:dashed">The border-style of dashed.</div> <div style="border-style:dotted">The border-style of dotted.</div> <div style="border-style:double">The border-style of double.</div> <div style="border-style:groove">The border-style of groove.</div> <div style="border-style:inset">The border-style of inset.</div> <div style="border-style:outset">The border-style of outset.</div> <div style="border-style:ridge">The border-style of ridge.</div> <div style="border-style:solid">The border-style of solid.</div> </body> </html> 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 6.padding属性 padding指的是控制content与border之间的距离。如下图6-7所示： <html> <head> <title>padding</title> <style type="text/css"> <!-- .outside{ padding:10px 30px 50px 100px; /* 同时设置，顺时针 */ border:1px solid #000000; /* 外边框 */ background-color:#fffcd3; /* 外背景 */ } .inside{ background-color:#66b2ff; /* 内背景 */ border:1px solid #005dbc; /* 内边框 */ width:100%; line-height:40px; text-align:center; font-family:Arial; } --> </style> </head> <body> <div class="outside"> <div class="inside">padding</div> </div> </body> </html> 图6-7 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 7.Margin属性 margin指的是元素与元素之间的距离。用于控制块与块之间的距离。倘若将盒子模型比作展览馆里展出的一幅幅画，那么content就是画面本身，padding就是画面与画框之间的留白，border就是画框，而margin就是画与画之间的距离。如下图6-8所示： 图6-8 margin属性 以上结果可以看到两个块之间的距离为30px+40px=70px 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 <html> <head> <title>两个行内元素的margin</title> <style type="text/css"> <!-- span{ background-color:#a2d2ff; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:10px; } span.left{ margin-right:30px; background-color:#a9d6ff; } span.right{ margin-left:40px; background-color:#eeb0b0; } --> </style> </head> <body> <span class="left">行内元素1</span><span class="right">行内元素2</span> </body> </html> 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 8.Margin-top和margin-bottom属性 Margin-top和margin-bottom的这个特点在实际制作网页时要特别注意，这个特点就是两个块级元素之间的距离不再是margin-bottom与margin-top的和，而是两者中的较大者。 图6-9 <html> <head> <title>两个块级元素的margin</title> <style type=”text/css”> <!— div{ background-color:#a2d2ff; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:10px; } </style> </head> <body> <div style=”margin-bottom:50px;”>块元素1</div> <div style=”margin-top:30px;”>块元素2</div> </body> </html> 该例子中倘若修改元素2的margin-top为40px，会发现执行的结果没有任何变化。再若修改其值为60px;才会发现块元素2向下移动了10个元素。 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 9.父子关系 当一个<div>块包含在另一个<div>块中间时，便形成了典型的父子关系，其中块的margin将以父块的content为参考。 图6-10 通过上面的例子可以看到子div距离父div上边为40px（30px+10px padding），其余3边都是padding的10px。 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 <html> <head> <title>父子块的margin</title> <style type="text/css"> <!-- div.father{ /* 父div */ background-color:#fffebb; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:10px; border:1px solid #000000; } div.son{ /* 子div */ background-color:#a2d2ff; margin-top:30px; margin-bottom:0px; padding:15px; border:1px dashed #004993; } --> </style> </head> <body> <div class="father"> <div class="son">子div</div> </div> </body> </html> 小贴士 IE与Firefox在margin的细节处理上又有区别。倘若设定了父元素的高度height的值，如果此时子元素的高度超过了该height值，二者的显示结果就完全不同。在设定的父div的高度值小于子块的高度上加上margin的值，此时IE浏览器会自动扩大，保持子元素的margin-bottom空间以及父元素自身的padding-bottom。而firefox就不会，它会保证父元素的height高度完吻合，而这时子元素将超过父元素的范围。 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 10.元素的float定位 浮动定位是CSS排版中非常重要的手段。浮动的框可以左右移动，直到外边缘碰到包含框或另一个浮动框的边缘。 属性 描述 可用值 注释 float 用于设置对象是否浮动显示，以及设置具体浮动的方式 None Left right 不浮动 左浮动 右浮动 Left:文本或图像会移至父元素的左侧 right:文本或图像会移至父元素的右侧 none:默认 下面介绍浮动的几种形式。 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #box{width:650px;} #left{background-color:#fff; height:150px; width:150px; margin:0px;} #main{background-color:#fff; height:150px; width:150px; margin:0px;} #right{background-color:#fff; height:150px; width:150px; margin:0px;} </style> </head> <body> <div id="box"> <div id="left"></div> <div id="main"></div> <div id="right"></div> </div> </body> </html> 效果图如图6-11所示。 图6-11 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 当把left向右浮动时，它将脱离文档流并且向右移动，直到边缘到包含框box的右框为止。Left向右浮动的CSS代码如下，效果如图：6-12。 #left{background-color:#fff; height:150px; width:150px; margin:0px; Float:right;} 当把left向左浮动时，它将脱离文档流并且向右移动，直到边缘到包含框box的右框为止。Left向右浮动的CSS代码如下，效果如图：6-13。 #left{background-color:#fff; height:150px; width:150px; margin:0px; Float:left;} 图6-12 图6-13 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 当把三个框向左浮动时，left框将向左浮动直到碰到包含框box框的左边缘为止，另两个框向左浮直到碰到前一个浮动框为止，代码如下,效果如图6-14所示。 图6-14 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #box{width:650px;} #left{background-color:#fff; height:150px; width:150px; margin:0px; float:left;} #main{background-color:#fff; height:150px; width:150px; margin:0px; float:left;} #right{background-color:#fff; height:150px; width:150px; margin:0px; float:left;} </style> </head> <body> <div id="box"> <div id="left"></div> <div id="main"></div> <div id="right"></div> </div> </body> </html> 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 如果包含框太窄，无法容纳水平排列的3个浮动无素，那么其他浮动块将向前下移动，直一有足够的空间。例如，效果如图6-15。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #box{width:400px; height:600px;} #left{background-color:#fff; height:150px; width:150px; margin:10px; float:left;} #main{background-color:#fff; height:150px; width:150px; margin:10px; float:left;} #right{background-color:#fff; height:150px; width:150px; margin:10px; float:left;} </style> </head> <body> <div id="box"> <div id="left"></div> <div id="main"></div> <div id="right"></div> </div> </body> </html> 图6-15 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 图6-16 如果浮动框元素高度不同，那么当它们向前下移动时可能会被其他浮动元素卡住，例如效果图6-16。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #box{width:400px; height:600px;} #left{background-color:#fff; height:200px; width:150px; margin:10px; float:left;} #main{background-color:#fff; height:150px; width:150px; margin:10px; float:left;} #right{background-color:#fff; height:150px; width:150px; margin:10px; float:left;} </style> </head> <body> <div id="box"> <div id="left"></div> <div id="main"></div> <div id="right"></div> </div> </body> </html> 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 11.DIV+CSS进行网页布局设计 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是构思好的界面布局图。 图6-17 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： ①顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； ②内容部分又可分为侧边栏、主体内容； ③底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图： 图6-18 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 根据上图，画出一个页面布局图，说明一下层的嵌套关系。 图6-19 DIV结构如下：　 　│body {}　/*这是一个HTML元素，*/　 　└#Container {}　/*页面层容器*/　　　　 ├#Header {}　/*页面头部*/　 　　　 └#Footer {}　/*页面底部*/ ├#PageBody {}　/*页面主体*/　　　　　 ├#Sidebar {}　/*侧边栏*/　　 └#MainBody {}　/*主体内容*/　 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 Body{} #container{} #Header{} #PageBody{} #Sidebar{} #MainBody{} #Footr{} 模块6：制作手机端网页 必备知识 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在DreamweavrCS5新建两个文档index.htm css.css，在index.htm输入以下内容： <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>DIV+CSS布局练习</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> /*页面层容器*/　　 <div id="Header"></div>/*页面头部*/　　 <div id="PageBody">　/*页面主体*/ <div id="Sidebar"></div>/*侧边栏*/　　　　 <div id="MainBody"></div>/*主体内容*/　 </div>　 <div id="Footer"></div>/*页面底部*/ </div> </body> </html> 　　 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下： /*基本信息*/ body {font:12px ;margin:0px;text-align:center;background:#FFF;} /*页面层容器*/ #container {width:100%} /*页面头部*/ #Header {width:800px;margin:0 auto;height:100px;background:#FFCC99} /*页面主体*/ #PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00} /*页面底部*/ #Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF} 把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的框架了。 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 下面我们来介绍常用的布局方式 （1）使用自动空白边让设计居中假设一个布局，希望其中的容器DIV在屏幕上水平居中； <body> <div id="box"></div> </body> 只需定义Div的宽度，然后将水平空白边设置为auto; #box{width:720px; margin:0 auto; } （2）使用定位和负值空白边让设计居中。 首先定义容器的宽度，然后将容器的position属性设置为relative,将left属性设置为50%，就可以把容器左边缘定位在页面的中间。如下: #box{width:720px; Position:relative; Left:50% } 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 （3）两列固定宽度布局 <div id="left">左列</div> <div id="right">右列</div> 为id名为left与right的Div制定CSS样式，让两个Div在水行中并排显示，从而形成两列式布局，CSS代码如下： #left{ width:200px; height:200px; background-color:#99F; border:2px solid #96F; float:left;} #right{ width:200px; height:200px; background-color:#C9F; border:2px solid #96F; float:left;} 图6-20 并排显示 为了实现两列式布局，使用了float属性，这样两列固定宽度的布局 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 （4）两列固定宽度居中布局 两列固定宽度居中可以使用Div的嵌套方式来完成，用一个居中的Div作为容器，将两列分栏的两个Div作为容器，将两列分栏的两个Div放置在容器中，从而实现两列的居中显示。HTML代码结构如下： <div id="box"> <div id="left"></div> <div id="right"></div> </div> CSS代码： #box{width:410px; margin:0 auto;} #left{ width:200px;height:200px;background-color:#09F;border:2px solid #06F; float:left; } #right{width:200px;height:200px;background-color:#99F;border:2px solid #06F;float:left; } #box有了居中属性，自然里面的内容也能做到居中，这样就实现了两列居中的显示，效果如图6-21 图6-21 两列固定宽度居中布局 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 （5）两列宽度自适应布局 设置自适应主要通过宽度的百分比值进行设置，因此，在两列宽度自适应布局也同样是对百分比宽度值进行设定，CSS代码如下： #left{ width:20%;height:200px;background-color:#09F; border:2px solid #06F;float:left; } #right{width:70%;height:200px;background-color:#99F; border:2px solid #06F; float:left; } 图6-22 两列宽度自适应布局 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 （6）两列右列宽度自适应布局 在实际应用中，有时候需要左栏固定宽度，右栏根据浏览器窗口的大小自动适应。在CSS中只需要设置左栏宽度，右栏不设置任何宽度值，并且右栏不浮动。CSS代码如下： #left{ width:20%;height:200px;background-color:#09F; border:2px solid #06F;float:left; } #right{height:200px;background-color:#99F; border:2px solid #06F; } 图6-23 两列右列宽度自适应布局 左栏将呈现200px的宽度，而右栏将根据浏览器窗口的大小自动适应，预览效果如图所示所示。两列右列宽度自适应布局经常在网站中用到，不仅右列，左列也可以自适应，方法是一样的。 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 （7）三列浮动中间列宽度自适应布局 三列浮动中间列宽度自适，是左栏固定宽度居左显示，右栏固定宽度居右显示，而中间栏则需要在左栏和右栏的中间显示，根据左右栏的间距变化自动适应。单纯的使用float属性与百分比属性不能实现，这就需要绝对定位来实现了。绝对定位后的对象，不需要考虑它在页面中的浮动关系，只需要设置对象的top、right、bottom和left4个方向即可。HTML代码结构如下： <div id=" left "></div> <div id="main"></div> <div id="right"></div> CSS代码如下： *{margin:0px;border:0px;padding:0px;} #left{width:200px;height:200px;background-color:#09F;border:2px solid#06F;position:absolute;top:0px;left:0px;} #right{width:200px;height:200px;background-color:#09F; border:2px solid #06F; position:absolute;top:0px;right:0px;} #main{ height:200px;background-color:#FCF;border:2px solid #06F;margin:0px 204px 0px 204px;} 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 任务评价 任务总结 必备知识 模块6：制作手机端网页 必备知识 对于#main，不需要再设定浮动方式，需要使其左边和右边的边距永远保持#left和#right的宽度，便实现了两边各让出204px的自适应宽度，刚好让#main在这个空间中，从而实现了布局的要求，预览效果如图6-24所示。 学 习 导 入 学 习 目 标 任务 制作校园勋章疯狂任务网页 任务描述 任务目标 任务分析 任务实施 图6-24 三列浮动中间列宽度自适应布局 任务评价 任务总结 必备知识 $$