模块四整体规划设计 单元3：排版制作 一、登录页面 一般对登录界面的技术要求有：棱适应各种不同的分辨率。不能有滚动条等。假设单型 图如下： C行oU宜搜 中量和发朝中生华数生家目 量 gt2005-312wm 图0403-1 首先分析一下网页的结构。整个网页可以看成上下两大部分构成。上率部分是整个图 片背景，g0、登录概：下半部分是网站的版权信息。通过观黎，可以发现，整个网页是 水平居中的，可以通过设置上下半部分别水平居中来解决。将上下半块分别命名为：md 和footer。那么himl代码和cs分别为 c/div> Copyright?2009-2012ww.ouss.cn宜搜顶告版枚所有 ICP备案号：蜀ICP备12006xx号 网监备案号：广公网备51080202000xxx
模块四 整体规划设计 单元 3：排版制作 一、登录页面 一般对登录界面的技术要求有:能适应各种不同的分辨率，不能有滚动条等。假设原型 图如下： 图 0403-1 首先分析一下网页的结构。整个网页可以看成上下两大部分构成。上半部分是整个图 片背景、Logo、 登录框；下半部分是网站的版权信息。通过观察，可以发现，整个网页是 水平居中的，可以通过设置 上下半部分别水平居中来解决。将上下半块分别命名为：mid 和 footer，那么 html 代码和 css 分别为：
图0403-2 body background-color:fE2E2E2; 10n电-12#：14P× color:46A6A6A: font-family:微软雅黑，黑体，Helvetica,Arial,Verdana,sans-exif: mid【 margin0auto方 pa4ding:0p装： width:1100px; height:580px: baekground:ux1(”inag●8/1eg1nbg,Png'）na-repeat: ffooter【 北e×t-a11gn:center: margin:0 auto! padding:Opx; padding-top:10px; font-family:撤款雅黑，黑体，Helvetica,Arial,Verdana,aans-erif: 图0403-3 解释一下代码。首先设置了动元素的背景颜色，学体，字体大小，字体颜色，当然 它是对整个料页有效的，公共的属性设置在dy里，可以节省根多代码。其次设置了md 元素，它应用到了大率部分的dn上，margin0auto用米控制整个div水平居中，当然必须 指定它的宽度。否则润竟器不知怎么计算dy的党度，还指定了md的背景。显然，md 的宽、高依赖于背景的大小。最后设置了o0r元素。让它水平居中，果面的文本水平居 中，内边框为10pm 这样整个页面的布局设置完成。这时，你预览页面发现，登录框里并不能输入。这是 为什么？ 现在要解决的问题是如何让真正的登录框”（控件），挡住青景哥片上的假的 登录柜”。实现方法有很多，最蔺单的办法是把登录窗口”上的所有！控件全部放到一 个div中（命名为ginDiv),具要调整最外而的div的位置，就可以把每一个bml控作 放到适当的位置上·按从上到下，从左到右的顺序对h恤m进行编号，分别为：pu1(帐号， inpu2(常玛)，inp30认码输入据).nput4验认玛图片).nput5(错误信息)，inpute6登录按细)， inpu7找目密码核组)，那么候ml代码和cs分别为：
图 0403-2 图 0403-3 解释一下代码。首先设置了 body 元素的背景颜色，字体、字体大小，字体颜色，当然 它是对整个网 页有效的。公共的属性设置在 body 里，可以节省很多代码。其次设置了 mid 元素，它应用到了大半 部分的 div 上，margin:0 auto 用来控制整个 div 水平居中，当然必须 指定它的宽度，否则浏览器不知 怎么计算 div 的宽度，还指定了 mid 的背景。显然，mid 的宽、高依赖于背景的大小。最后设置了 footer 元素。让它水平居中，里面的文本水平居 中，内边框为 10px。 这样整个页面的布局设置完成。这时，你预览页面发现，登录框里并不能输入，这是 为什么？ 现在要解决的问题是如何让真正的"登录框"（input 控件），挡住背景图片上的假的" 登录框"。 实现方法有很多，最简单的办法是把"登录窗口"上的所有 html 控件全部放到一 个 div 中（命名为 LoginDiv），只要调整 最外面的 div 的位置，就可以把每一个 html 控件 放到适当的位置上。按从上到下，从左到右的顺序 对 html 进行编号,分别为：input1(帐号), input2(密码), input3(验认码输入框), input4(验认码图片), input5(错误信息), input6(登录按钮), input7(找回密码按钮)，那么 html 代码和 css 分别为：
casp:TextBox runat="server"ID="pwd"Cssclass="input2"TextMode="Passwor inbepi cdiv style="clear:both:"> 图0403-4
图 0403-4
tmid #loginDiv top:355px; left:757px; position:relative; mmEg1n:0p×: padding:Opx: width:200px: height:22p×i 1border:1px solid red; tmid #loginDiv .input1 line-height:22px: height:22pxi 410at:10gt; width:196px: border:Opx solid red; tmid #loginDiv .input2 1in8-height:22p×: he1ght:22p×: float:lefti margin-top:15p×: w1dth:196p×: border:Opx solid red: padding:Opx: fmid #loginDiv input3 11ne-height:22p×月 height122p×7 F1Q4e:1e七： mmEg1n-CP:16p×: padding:Opx; width:90p×i border:0p×9o11dxed: fmid #loginDiv input4 line-height:22px; height:22pxi E104t:1他Et: margin-top:16px; margin-left:13px: padding:Opx; w1dth:93p×H border:Opx solid red; urs0rip01nt传r7 tmid #loginDiv.input5 line-height:20pxi he1ght:20p×: width:1004: f10海七：1sf七： margin-top:10px; padding:Opx;
图0403-5 在1 oginDiv内部，采用了浮动技术，在调试代码时，可以将每个挖制的bard:显示出 来，这样容易看清楚每个控件的位置。 会员登录： 帐户： 密码： 验证码： 地e色 登录 密可找网】 图0403-6 一、首页 假设原型图如下：
图 0403-5 在 LoginDiv 内部，采用了浮动技术，在调试代码时，可以将每个控制的 border 显示出 来，这样容易看清楚每个控件的位置。 图 0403-6 一、首页 假设原型图如下：
ea ou宜搜 中西■兔的中文平系便多到年 首页 让结 团鼎 公告 发全出 度若飞一级代理商 累计积分不可用积份：0分 cc1@qq.com 0分 13900011234管理 最近业绩 无业绩 最新公告 乐深山巾与诚仅的台彩照片、平跃台大字字为的学业止、七津水土席 习，努力工作，坚持正确的政治方向，艰苦的工作作风，一定要达到创 来京务工人员赵林捐赠了1936年5月16、17日出版的《世界腕报》，该折 今井定今晚赴枪关》、《日兵一部今晨续开新平陈中孚定下午粒津》为 Copyright 2009-2012 www.ouss 跃系2Q:x E-Mailooo 图0403-7 首先分析一下网页的结构.整个网页从上到下依次可以分解为：banner、导航菜单，内 容（个人信息框、最近业锁、最新公告）、版权条，四个部分。那么h代码和cs分别为：
图 0403-7 首先分析一下网页的结构。整个网页从上到下依次可以分解为：banner、导航菜单、内 容(个人信息框、最近业绩、最新公告)、版权条，四个部分。那么 html 代码和 css 分别为：
cdi”class="nenu"y 首页 cli>ca href="performance.htm"title="">c/a>c/li> 团队 ca hrefe"pubInfo.htm"title"> c/u1> c/div> ctable class="pubInfo"> cdiv class="footer"> chr / C©pyright。2009-2012www.oua.cn宜搜顶告片版权所有 联亮QQ:x3E-Hai11xxx,com统计 c/div> 图0403-8
图 0403-8
,b4hnex《 widch:1000px: =4:91后：0u0: height:90pxr background:ur1('../imagea/banner.png')no-repeas: wnu【 w1dh:1000p: =4ig1后：06ut9: background-colort DBECE4: everflow:hidden: background-color:4FFF: content min-height:550px: he1ght:550g目 videh:990px: =agg1a:04ut0月 padding:0px: background-color:FFF: border:1px solid #rrr: footer( padding:20px Opx 10px Opx: videh:1008: teX5-4119n:645Ee￥月 t0n8-81zei12年I7 6910￥：#9E5D84: background-color:FrE: M14h:1000e: ■4r1ni0t07 图0403-9 这样就完成了整体布局 【课后小结】 DIV4CSS的布同方法，在修故页面的时候更加容易更省时，必须要算握
图 0403-9 这样就完成了整体布局 【课后小结】 DIV+CSS 的布局方法，在修改页面的时候更加容易更省时，必须要掌握