复旦大学：《计算机网络与网页制作》课程PPT教学课件（讲稿）12 页面布局高级技术

计算机网络与网页制作 Chapter12:页面布局高级技术 复旦大学计算机学院 肖川 xiao@fudan edu cn 1

计算机网络与网页制作 Chapter 12：页面布局高级技术 复旦大学计算机学院 肖川 cxiao@fudan.edu.cn 1

目标 *使用CSS的“浮动”属性 *使用CSS为不同的页面设置不同的布局 display:none属性的应用

目标  使用CSS的“浮动”属性  使用CSS为不同的页面设置不同的布局  display:none属性的应用 2

效果 文件)编辑(E)查看()收蒙夹()工具(T帮(H0 新大陆手机商城 首页产品服务关于我们联系我们 商用客户的维修站全国有多少个? 客户服务部特点 新大陆商城在中国的服务中心约1,200个,其中商用客户专门服务中心共计253个,涉 专门的维修服务中心 及维修的产品包括打印机,笔记本电脑,显示器,电视机,商用空调,以及数码产品 上门服务凝盖地市级城市 四个备件分配中心 什么是商用(B2B)客户售后服务? 专门的呼叫中心 个性化定制服务 商用客户售后服务是针对商用领域的客户所提供的,是与一般个人消费品售后区别化的服 ·更快、更有效的响应 务。商用客户服务技术更专业、更迅速、由专门的服务中心根据您的需求提供全方位个性 化服务。 更多回答》 此处显示id" footer”的内容 失150%

3 效果

1.使一个图像浮动 *1.菜单插入>>图像 Yidth oy) ot①): right Hei cht① Padding 将图像9100jg添加至 全部相同) 全部相同①) p() Bisht RightG) about html Botto①) 2.在“CSS样式”面板 内新建一个类CSS规 帮助0 匚定匚取消一应用 则 floatage *3.在“属性”面板内设 置图像所用的“类”规 则 选中 floatage项 图像,24x宽m)14源文件6)1m900@替换) 类〔)f1oat 高0D9 链接)□ 母编辑回c 4

1. 使一个图像浮动  1. 菜单 插入>>图像， 将图像i9100.jpg添加至 about.html  2. 在“CSS样式”面板 内新建一个类 CSS 规 则.floatimage。  3. 在“属性”面板内设 置图像所用的“类”规 则。 4 选中 .floatimage项

效果 文件(F)编辑(E)查看(收藏夹(A)工具(T帮助(H 在目前双核处理器已经在手机产品当中逐渐普及,相比单核处理器, 双核在整体运算速度,游戏性能上面的表现都更加出色,所以追求性 能的朋友,往往会在更换手机的时候选择双核处理器的产品。今天 我们就为大家推荐一台双核 Android手机,如果是资深玩家或是性能 控一定不要错过 三星9100是目前主流的双核 Android强机,它不仅拥有出色的性能 令人艳羡的轻薄身材,而且配备了 Android2.3系统,而且4.3英寸的 Super AMOLED屏幕也比较给力。 星100的机身厚度仅有8.49毫米,而优秀的 机身做工也是带来了细腻的手感,该机采用了 主流的直板触控造型设计,棱角分明的机身配 合背后的纹路设计,使其在视觉和质感方面 都表现时尚大气。屏幕方面,三星9100采用 了最新的 Super AMOLED Plus材质,显示效果 比9000更加细腻,屏幕也放大到4.3英寸,分 辨率仍然是WVGA(480x800)。 三星9100使用了 Android2.3姜饼操作系统,并配备三星自家的 Orion 双核处理器,主频为1.2GHz,拥有1 GB RAM和4 GB ROM,内置 16GB大闪存,同时支持存储卡扩展。除了前置的200像素摄像头

效果 5

修改Foat属性及其效果 floatage的CSs规则定义 分类 方框 F1oat①T):1eft Height 0) Padding Margin 全部相同< 全部相同 文件(F编辑(E)查看(收藏夹(A)工具①D帮助(H pr Bottom (): 10 在目前双核处理器已经在手机产品当中逐渐普及,相比单核处理器, Left(E): 10 vpX 双核在整体运算速度,游戏性能上面的表现都更加出色,所以追求性 能的朋友,往往会在更换手机的时候选择双核处理器的产品。今天 我们就为大家推荐一台双核 Android手机,如果是资深玩家或是性能 令人艳羡的轻薄身材,而且配备了 Android2.3系统,而且4.3英寸的 Super AMOLED屏幕也比较给力 确定一取消应用Q) 三星i9100的机身厚度仅有8.49毫米,而优秀的 机身做工也是带来了细腻的手感,该机采F 主流的直板触控造型设计,棱角分明的机身配 合背后的纹路设计,使其在视觉和质感方面 都表现时尚大气。屏幕方面,三星9100采用 了最新的 Super AMOLED Plus材质,显示效果 比9000更加细腻,屏幕也放大到4.3英寸,分 辨率仍然是wVGA(480x800 9100使用了 Android2.3姜饼操作系统,并配备三星自家的 Orion 双核处理器,主频为1.2GHz,拥有1 GB RAN和4 GB ROM,内置 16GB大闪存,同时支持存储卡扩展。除了前置的200像素摄像头

修改Float属性及其效果 6

2使用D把页面分区 *把标题区Dⅳ改成相对定位Dv # header的cSs规则定义 分类 Position①): relative Visibility Q Placement Top ( t px- Bottom OM): px 帮助0 匚确定取消(应用() 7

2. 使用Div把页面分区  把标题区Div改成相对定位Div。 7

插入Div作为页面的不同区域 *面板插入>>布局>>插入D标签,依次插入 navigation DiV 每一次插入在上 个Dv的标签之后 main Div 入Div标签 入在标签之后 确定 <div id="header * sidebar div 取消 类 帮助 footer Div 新建Cs规则 代码拆分「设计]刻时代码实时视图检查。C标题新大陆商城主页 新大陆手机商城

插入Div作为页面的不同区域  面板 插入>>布局>>插入Div标签，依次插入  navigation Div  main Div  sidebar Div  footer Div 8 每一次插入在上一 个Div的标签之后

修改导航栏外观 D S规 则自动作用于相同D 的D *面板CSS样式>>新建CSS规则,# navigation # navigation的CSs规则定义 # navigation的Css规则定义 方框 Background-color)图+b40 Foat①) Backe-oundinage@):I Clear ( 全部相罔c) 全部相同q) Background-attachnent ( ) Backer ound-posi tion o cht Botton⑤ 0t): Left c) Left o) 厂帮助0 确定[消一应用) 帮助0 □确定取消应用) 「代码拆分设计实时代码同实时视图检查@..C 大陆商城主页 新大陆手机商城 nevItt1n”的 ““““=

修改导航栏外观  面板 CSS样式>>新建CSS规则，#navigation 9 由于Div已经设置ID， 所以新建的ID CSS规 则自动作用于相同ID 的Div

修改页脚区的背景色 由于D已经设置D, 所以新建的DCSS规 则自动作用于相同D 的Dv *面板CSS样式>>新建CSS规则,# footer # footer I的CSs规则定义 Background-image 「浏览 Background-attachment Background-position〖 代码拆分设计]实 去h 取消应用 新大陆于机商城

修改页脚区的背景色  面板 CSS样式>>新建CSS规则，#footer 10 由于Div已经设置ID， 所以新建的ID CSS规 则自动作用于相同ID 的Div