《使用HTML和CSS开发Web网站教学资料》第七章 WEB标准与页面布局基础（上机）.pptVIP

中国职业教育联盟课程体系 * * * * 中国职业教育联盟课程体系 中国职业教育联盟课程体系 成就百万精英 使用HTML和CSS开发WEB网站 第七章 WEB标准与页面布局基础 上机 上机目标 模拟前程无忧的城市选择器 模拟同程网的扫码下载提示 模拟前程无忧职位搜索中的职能类别选择器 教员讲解上机目标 训练技能点 display属性 position属性 background属性 cursor属性 width、height属性 left、top属性 阶段1 训练技能点 display属性 position属性 阶段1 模拟实现前程无忧（51）首页提供的招聘职位搜索器 阶段1 弹出的【城市列表】不可能凭空产生，它本来就存在于当前网页中，只不过一般的时候处于隐藏状态，需要它时就让它显示出来。显示时，它处于网页正文的上层，定位在正文区域的中央。 隐藏/显示由display控制，定位由postion控制。 阶段1 body p这里是【前程无忧】的首页/p form 这里是招聘职位搜索表单br / 职位名：input type=text name=txtJobName id=txtJobName / 城市：input type=text name=txtJobCity id=txtJobCity / input type=button value=点此选择城市 / input type=submit name=btnSubmit value=搜索 / /form /body div id=divCityList span 请选择工作地点/span span 【不限】/span span 【关闭】/span table style=clear:both; caption主要城市/caption tr td北京/td td上海/td td广州/td /tr tr td深圳/td td长沙/td td武汉/td /tr /table /div div id=divTitle span id=spanAddress请选择工作地点/span span id=spanNone【不限】/span span id=spanClose【关闭】/span /div #divTitle { background-color:#abcdef; cursor:move; float:left; } #spanAddress{ float:left; } #spanNone,#spanClose{ float:right; font-weight:bold; cursor:pointer; } #divCityList{ border:1px solid gray; position:absolute; top:60px;left:200px; } #divCityList{ border:1px solid gray; position:absolute; top:60px;left:200px; background-color:#fedcba; width:300px; } #divCityList table{ width:100%; border-collapse:collapse; border:1px double gray; } #divCityList table td{ border:1px double gray; text-align:center; } div id=divCityList style=display:none; * 阶段1 ？ 共性问题集中讲解 阶段2 技能要点 position属性 background属性 cursor属性 width 、height属性 left 、top属性 阶段2 同程一起游（/）首页的局部图像 注意右侧，有扫码下载客户端提示，点击叉可关闭此提示。 点击图片或文字，将引导用户区下载同程的客户端。 页面滚动时，此提示一直处于右侧的固定位置。 我们的网站中要实现类似的功能，图片bookmark.png已经准备好。 阶段2 使用CSS中的position属性确定元素的定位方式，赋值为fixed可使页面元素固定在文档窗口的某处，不随文档正文滚动而滚动。 叉号及二维码图片、文字链接等可点击区域由绝对定位来实现。 阶段2 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtd body div id=bookmarker /d