复旦大学：《计算机网络与网页制作》课程PPT教学课件（讲稿）17 使用Spry组件

计算机网络与网页制作 Chapter17:使用spry组件 复旦大学计算机学院 肖川 xiao@fudan edu cn

计算机网络与网页制作 Chapter 17：使用Spry组件 复旦大学计算机学院 肖川 cxiao@fudan.edu.cn

目标 *创建Spry菜单 *创建Spry选项卡式面板 *创建Spry折叠式面板 *创建Spry可折叠面板 用CSS设定Spry组件样式

目标  创建Spry菜单  创建Spry选项卡式面板  创建Spry折叠式面板  创建Spry可折叠面板  用CSS设定Spry组件样式 2

新火陆手机商域 算单的 效果 热门手机推荐 资讯导购 透项卡式面的1 三星S5830 摩托罗拉 Atrix4G 小米手机 苹果ihne4 为大公招的这基 Aneto状为atx4G 世军先采用五CPU的替轮手机,如今随卷 以及更多热璃,其位格自然也是来 三里9000 新市场售价为1899元,伯格适醇实惠 托罗拉A4C配了一块40寸世示 降价信息! 达到了540×960素,效票仍为出色·只外,Amx 4G内置了一枪500万素沿 您知语妈?我们敢力子使共们的户间 件方面摩 4C猛一形什 ,当售性国 压网 目前为止,摩 联系我们 ,大家在狗 20手机 热门手机推荐 苹果iPh HSCT 230国色 苹果 iPhone4s UMA8DOC色 EE 自果045这手起A 7005色 理心,出于机时等问角,苹黑将CP主频宠 在7800MH7,虽然绳不福,但从器杭漫控体标未看 雪仍是日丽市想的核产品中最为出色的日能该长 资讯导购 断价已经4150元+价当人,非常不, 购买雷军的照友采时闻艳购吧 三星55830 苹阻ihon45外方面较之代没有太大只化,体机得和hne4一样有看不的 票思+机正面判样也阻剩一块1,5英寸电触控国,分裤军为960640置置 半手机 示效果和操指性也都十分出色·在树背后,盘头开到了800万像,支持100P 苹辈hon4 蜡录制,拍效果十分出色 索爱LT18 硬件配置方面,ihan4也育了横大改通,来用了一颗主为800M的5汉破理 基N9 器+从买际试隐果来看,行速之前代品了一量+系方面,该机阻了静丽 三星000 的055潘作系,程加了5动手等功,菜界识的量,该听功盐暂不支中 文+这点需界大家生意一下4 降价信息 您封码?我们力子使我们的客户拼有 我们与斜直商之目的关系,使们够 料最低的产品的整e 的电子部猫

效果 3

1构建spry下拉菜单 *定位光标,菜单插入>>Spry>>Spry菜单栏 Spy菜单栏 代码拆分设计】实时代码 「如时加图查6.C标题:新大 单击蓝色标签激 请选择所需的布局 活“属性”面板 水平 取消 助 新大陆到心商城 Spry菜单栏: Menubar1 项目1 项目2 项目3 项目4 果单来 文本项目1 MenuBar 1 自定义此 Widget 234 1.2 链接# 标题 目标 禁用样式 4

1. 构建Spry下拉菜单  定位光标，菜单 插入>>Spry>>Spry菜单栏。 4 单击蓝色标签激 活“属性”面板

在“属性”面板设置菜单项 性 菜单条 文本首页 链接# 自定义此Wdg时t 标题□ 目标 禁用样式 属性 菜单项指向的网页 菜单条 文本CDMA menuBar页 链接 自定义此 Widget 标题□ 目标 样式 菜单条 文本3G手机 MenuBarl A WCDMA 链接# 定义此Wdet脲 HSDPA 标题 目标 禁用样式 复制相关文件 菜单条 臣使的2离这酸要浑空室务件已到地站点要使相应的过象或行为 文本套餐系列 MenuBar 上移项 链接# 自定义此 Widget 禁用样式 篆素排 题 5 □确定

在“属性”面板设置菜单项 5 菜单项指向的网页

预览效果 文件(F编辑(E)查看(收藏奕(A)工具帮助(H 新大陆手机商城 首页 服务 产品 关于我们 联系我们 套餐系列 套餐A 热门手 以旧换新 套餐B 选项卡式面板|售后维修 件()编辑(E)查看(V收藏夹/)工具T帮助(H 新大陆手机商城 页服务 首页 产品 关于我们 联系我们 2G手机 热门手机推荐 手机 WCDMA {选项卡式面板的位置} TD-SCDMA EDGE 摩托罗拉Atrⅸx4G HSDPA 为大家介绍的这款 Android机为Atrⅸx4G,它是摩托罗拉阵

预览效果 6

2用cSs设定spry组件样式 个自动附加至页面的外部样式表,用于控制Spry菜单栏 的外观 CS样式[AP元素 全部当前 所有规则 styles css SpryMenuBarHori zontal css ul MenuBar Horizontal ul. MenuBarhorizont al li ul. MenuBarori zontal ul ul. MenuBarhori zontal ul. MenuBarSubmenuvisible ul. MenuBarhorizontal u li ul. MenuBarhorizontal ul ul ul. MenuBarHori zontal ul MenuBar Submenuvisible ul MenuBarSy ul. MenuBarhori zontal ul ul. MenuBarHorizont al a ulMenuBar Horizontal a: hover, ul MenuBar Horizontal a:focus ul. MenuBarHorizontal a MenuBarItemHover, ul. MenuBarHorizor ul. MenuBarHori zontal a MenuBarltemSubmenu u. MenuBarHori zontal ul a. MenuBarltem Submenu ul. MenuBarHori zontal a. MenuBaritemSubm enuhover ul. MenuBarhori zontal ul a. MenuBarItem Submenuhover ul. MenuBarhori zontal iframe ul. MenuBarHori zontal li. MenuBarltemIE

2. 用CSS设定Spry组件样式  一个自动附加至页面的外部样式表，用于控制Spry菜单栏 的外观 7

控制spry菜单栏的整体外观和尺寸 Cs样式AP元素标箜检查器 Cs样式LAP元素」标签检查器 Cs样式|AP元專标箜查器 全部当前 部当前 全部当前 所有规则 所有规则 所有规则 SpryMlenuBarHorizontal.css 名称最长的规则 MenuBarhorizontal ul. MenuBarhori zontal Menubarhorizo ul. MenuBarhorizontal ul MenuBar submenuvi ul. MenuBarhorizontal ul MenuBarSubmenuvis Menubar ul. M ntal ul ul. MenuBarHorizont al ul. MenuBarhorizontal ul ul ntal a ul. MenuBarhorizontal ul, MenuBarsubmenuvis ul. MenuBarHori zontal ul ul. MenuBarhorizontal ul MenuBar Submenuvisib ul. MenuBarHori zontal a MenuBarItemSubmenuh ul. MenuBarHori zontal ul a. MenuBarItemSubme ul. MenuBarHori zontal a: hover. ul. MenuBarHor F吗Hm al a: ho Menubarho ul. MenuBarHori zontal a Men arhorizontal a. MenuBarItemHover u] 上吗14 "u1. Menubarhorizontal“的属性 :的 u. MenuBarHorizontal a MenuBarItemHover cursor ackeround-color■Fc4 I font-family color 口#FF cursor 添加属性 list-style-type margin padding 0.5em0.75em ext-decorati on auto 添加属性 @ ⊙回:42++ 画6留 =A24*↓ 画也⊙

控制Spry菜单栏的整体外观和尺寸 8 名称最长的规则

预览效果 文件(编辑(E查看(收藏夹4)工具①帮助(H 新大陆手机商城 首页 服务 产品 关于我们 联系我们 2G手机 折叠菜单的位置} 热门手机推荐 3G手机 WCDMA 资讯导购 选项卡式面板的位置} TD-SCDMA 三星S5830 苹果 iPhone45 摩托罗拉 Atrix4G EDGE 小米手机 苹果 iPhone4 HSDPA 索爱LT18i 为大家介绍的这款 Android机为Atiⅸx 诺基亚N9 营率先采用双核CPU的智能手机,如今随着上市时间的加长 三星i9000 9

预览效果 9

3.创建spry选项卡式面板 *定位光标,菜单插入>>Spry>>Spry选项卡式面板。 选项卡式面板: TabbedPanels1 标签1 标签2 内容1 直接修改标签或 者在面板内直接 输入内容 属性 选项卡式面板 面板二 默认面板标签1 abbedPanels1 标签2 自定义此 Widget 决定面板的 数量和顺序

3. 创建Spry选项卡式面板  定位光标，菜单 插入>>Spry>>Spry选项卡式面板。 10 直接修改标签或 者在面板内直接 输入内容 决定面板的 数量和顺序