《使用HTML和CSS开发Web网站教学资料》第六章 常用的CSS属性（上机）.pptVIP

阶段2 使用border-top、border-right、border-bottom、border-left属性可以对四个边框分别设置； 另外使用border-width（border-style、border-color）设置边框粗细（线型、颜色）时，支持四个值，这四个值依次表示顶、右、底、左边框的粗细（线型、颜色）。 阶段2 style type=text/css #myp{ border:none; border-top:4px solid blue; border-bottom:2px dotted red; } #mytxt{ border-width:1px; border-style:none none solid none; border-color:gray; } /style ul id=menu lia href=#网站首页/a/li lia href=#课程体系/a/li lia href=#师资力量/a/li lia href=#学员论坛/a/li /ul 阶段4 超链接在浏览器中默认是有下划线的。我们希望页面中大部分超链接没有任何装饰线，但局部区域的超链接既有上划线也有下划线。 先针对超链接a标签定义HTML标签选择器，再针对局部区域的超链接定义类选择器，并为局部区域的容器定义id属性，使用id和类名构成上下文选择器。 阶段5 参考本章理论部分的范例进行练习使用有关背景、边框、文字、字体、列表等CSS属性。 重点练习background-*、border-*、text-*、font-*、list-style-*这几类常用的属性。 中国职业教育联盟课程体系 * * * * 中国职业教育联盟课程体系 中国职业教育联盟课程体系 成就百万精英 使用HTML和CSS开发WEB网站 第六章 常用CSS属性 上机 上机目标 使用背景属性 使用边框属性 使用无序列表实现简单的菜单 设置超链接的装饰线 熟悉常用的CSS样式属性 教员讲解上机目标 训练技能点 background-image属性 background-repeat属性 background-position属性 border-top、border-right、border-bottom、border-left属性 border-width属性 border-style属性 border-color属性 border属性 background属性 width属性 display属性 阶段1 训练技能点 background-image属性 background-repeat属性 background-position属性 阶段1 有时候，对于一个区域的背景图像，我们希望只出现一次，而不是重复平铺；有时候还想要精确地指定背景图像出现的位置。 阶段1 CSS中background-repeat属性可以设置背景图像是否重复平铺以及向哪个方向平铺； background-postion属性可以使用像素或百分比指定背景图像开始出现的位置 阶段1 style type=text/css #mytable{ width:500px; height:150px; background: #fedcba url(image/eg_bg.gif) no-repeat scroll 20% 20px; } /style * 阶段1 ？ 共性问题集中讲解 阶段2 技能要点 border-top、border-right、border-bottom、border-left属性 border-width属性 border-style属性 border-color属性 阶段2 有时候，我们想对一个区域的顶、右、底、左四个边框分别进行设置。 div id=mydiv 右边是个文本框： input id=mytxt name=txt value=只有底边框的文本框 / p id=myp这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。/p /div * 阶段2 ？ 共性问题集中讲解 阶段3 技能要点 border属性 background属性 width属性 display属性 阶段3 一般网站的网页顶部都有网站的导航菜单，点击各个菜单项可以转到不同的栏目。我们要在网页中实现一个简单的菜单。 可以将整个菜单菜单看作是一个无序列表，每个列表项目就是一个菜单项；菜单项被点击后要能够链接到其它栏目页面，所以列表项目中应该包含超链接；鼠标移动到菜单项上方时菜单项背景会变色，表明它即将被用户