第六章 常用的CSS属性(上机).pptVIP

*什么是程序程序是怎么开发出来的编译连接运行什么是IDE编译和调试*题目1：P57第一题题目2：P270练习1题目3：p270联系2第六章上机常用的CSS属性相关回顾1、2、3、上机目标使用背景属性使用边框属性使用无序列表实现简单的菜单设置超链接的装饰线熟悉常用的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有时候，对于一个区域的背景图像，我们希望只出现一次，而不是重复平铺；有时候还想要精确地指定背景图像出现的位置。阶段1CSS中background-repeat属性可以设置背景图像是否重复平铺以及向哪个方向平铺；background-postion属性可以使用像素或百分比指定背景图像开始出现的位置阶段1styletype=text/css #mytable{ width:500px;height:150px; background:#fedcbaurl(image/eg_bg.gif)no-repeatscroll20%20px; }/style*阶段1？共性问题集中讲解阶段2技能要点border-top、border-right、border-bottom、border-left属性border-width属性border-style属性border-color属性阶段2有时候，我们想对一个区域的顶、右、底、左四个边框分别进行设置。阶段2使用border-top、border-right、border-bottom、border-left属性可以对四个边框分别设置；另外使用border-width（border-style、border-color）设置边框粗细（线型、颜色）时，支持四个值，这四个值依次表示顶、右、底、左边框的粗细（线型、颜色）。阶段2styletype=text/css #myp{ border:none;border-top:4pxsolidblue;border-bottom:2pxdottedred; } #mytxt{ border-width:1px;border-style:nonenonesolidnone;border-color:gray; }/styledivid=mydiv右边是个文本框：inputid=mytxtname=txtvalue=只有底边框的文本框/pid=myp这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。/p/div*阶段2？共性问题集中讲解阶段3技能要点border属性background属性width属性display属性阶段3一般网站的网页顶部都有网站的导航菜单，点击各个菜单项可以转到不同的栏目。我们要在网页中实现一个简单的菜单。可以将整个菜单菜单看作是一个无序列表，每个列表项目就是一个菜单项；菜单项被点击后要能够链接到其它栏目页面，所以列表项目中应该包含超链接；鼠标移动到菜单项上方时菜单项背景会变色，表明它即将被用户点击，这一点可以通过超链接的hover伪类来实现。ulid=menu liahref=#网站首页/a/li liahref=#课程体系/a/li liahref=#师资力量/a/li liahref=#学员论坛/a/li/ulstyle #menu{ border:1pxsolid#abcdef; background-color:#efefef; } #menuli{ display:inline;width:100px; border:1pxsolid#fedcba; text-align:center } #menulia{ text-de