DIV+CSS网页制作实战第27次课(2课时)背景及链接样式-CSS定位.pptxVIP

课次27课时2教具投影仪项目 项目3 网页外观制作技术任务 任务3.3 背景及链接样式、CSS定位知识点 1. CSS 背景效果（20分钟） 2. CSS 链接效果（15分钟） 3. CSS 定位（55分钟）重点 CSS 的定位难点 CSS 的定位备注 上机操作90分钟/ 13知识技能目标掌握 CSS 背景样式的设置掌握 CSS 链接样式的设置掌握 CSS 的几种布局定位方法/ 13 3．2．4 CSS网页背景效果 1．背景颜色 CSS背景颜色属性（background-color）相当于HTML中的bgcolor属性，格式如下： body { background-color:#99FF00; } 上面的代码设置body标记的背景颜色是翠绿色。网页背景色最好显式指定，不要使用默认值。? 2．背景图片 CSS定义文档背景图片属性（background-image）用法如下: background-image:url(背景图片的相对或绝对路径); 此外，CSS背景图片还有重复、附着、位置等属性，如下表所示。背景图片样式属性(与background-images一起使用)含义属性值重复属性background-repeat背景图片是否重复。默认横向、竖向均重复。Repeat-x背景图片横向重复 Repeat-y背景图片竖向重复 no-repeat 背景图片不重复位置属性background-position背景图片的相对位置。如设置背景位置距网页最左边20px，距网页最上边60px，格式如下：background-position:20px 60px附着属性background-attachment图片是跟随内容滚动，还是固定不动。Scroll：图像随浏览器滚动(默认)Fixed：背景图像固定/ 13 例如，下面的代码使用bg.jpg作页面背景，水平重复，背景图片不滚动，效果图如图所示。body background=images/bg.jpg style=background-repeat: Repeat-x; background-attachment: fixed/ 13 3．2．5 CSS链接效果 CSS中对链接样式的设置是通过a:link、a:visited、a:hover和a:active四个伪类来定义的。伪类可以看作是一种支持CSS的浏览器自动识别的特殊选择符，它可以定义超级链接在不同状态下的样式效果。 与类不同，伪类是CSS已经定义好的，不能象类选择符一样随意使用别的名字。伪类的语法是在原有的语法里加上一个伪类名，格式如下: 选择器名: 伪类名 { 属性 : 值； } 例如 a: link {color: #0000FF; } 最常用的4种a（锚）元素的伪类，表示超级链接的4种不同状态：link （未访问的链接）、visited（已访问的链接）、hover（鼠标指向链接）、active（活动链接）。例如：a:link {color: #fff; ext-decoration: none; } /* 链接未访问 */a:visited {color: #fff; ext-decoration: none;} /* 链接被访问过 */a:hover {color: #fff; text-decoration: underline;} /* 链接被指向 */a:active {color: #fff; ext-decoration: none;} /* 链接被激活 *// 13 注意：写a(锚)的CSS时必须按以上顺序写，顺序是“LVHA”。例如下面的代码，鼠标指向链接时的运行效果如图所示：html headtitleCSS链接样式/title style a:link {color: #0000FF; } a:visited {color: #FF00FF; } a:hover {color: #FF0000; } a:active {color: #00FF00; } /style /head body a href=#CSS链接样式/a /body/html/ 13 3．2．6 CSS定位 如果不设定位，由于DIV默认是块级元素，每个DIV将独占一行。如果设置CSS定位，就有浮动（float）定位和位置（position）定位两种。浮动（float）定位 浮动定位只能在水平方向，让后面的元素浮动在它的左边或者右边。 例如：float:left ; //左浮动float:right ; //右浮动 如果几个DIV都设左浮动，后面各个DIV将一个一个接在前一个DIV的后面，直到一行放不下时才移到下一行显示。下图为各种浮动情形下的显示效果。 / 13/ 13 2．清除浮动 为了清除前面浮动的影响