电子商务网站开发与管理 教学课件 作者 唐四薪 谭晓兰 屈瑜君 3网站交互效果的实现.pptVIP

电子商务网站开发与管理 唐四薪 主编 人民邮电出版社 第3章 网站交互效果的实现 伪类选择器 所谓伪类就是指元素在某个时候的状态。 网页中的链接标记能响应浏览者的点击。a标记有四种状态能描述这种响应，分别是a:link、a:visited、a:hover、a:active，伪类选择器的标记和伪类之间用“:”隔开。 通过伪类选择器制作动态超链接 伪类选择器可以看成是一种特殊的标记选择器，它用来选中在某种状态下的标记 可以定义a标记在四种不同的状态下具有不同的颜色，是否有下划线。一、伪类选择器的书写应遵循LVHA的顺序，即出现的顺序应为a:link→ a:visited→ a:hover→ a:active。二、各种伪类选择器将继承a标记选择器定义的样式。 3.1.2 伪类选择器的应用 ?1 制作缺角的导航条 缺角的导航条，是一个利用定位基准和绝对定位技术结合的典型例子 首先，如果这个导航条没有缺角，那么这个水平导航条完全可以通过盒子在标准流及浮动方式下的排列来实现，不需要使用定位属性。其次，缺的这个角是通过一个元素的盒子叠放在导航选项盒子上实现的 导航项盒子和左上角盒子的关系 导航项左上角的盒子必须以导航项为基准进行定位，因此必须设置导航项的盒子为相对定位，让它成为一个包含框，使左上角的盒子以它为基准进行定位，这还需要将左上角的盒子也设置为绝对定位，这样还能使它不占据标准流的空间。同时由于导航条不需要改变在标准流中的位置，所以应该设置为相对定位无偏移 第一步：写结构代码 我们直接用a元素的盒子做导航条，因为a元素中还要包含一个盒子，所以要在a元素中添加任意一个行内元素，这里我们选b标记，它的内容应为空，这样才能利用它的边框做三角形。 div id=nav4 a href=#b/b首 页/a a href=#b/b中心简介/a a href=#b/b政策法规/a a href=#b/b常用下载/a a href=#b/b为您服务/a a href=#b/b技术支持/a/div 第二步 设置a元素的CSS 因为要设置a元素的边框填充等值，所以要设置a元素为块级元素显示，而要让块级元素水平排列，必须设置这些元素为浮动。当然，设置为浮动后元素将自动以块级元素显示，因此也可以将a元素的display:block;去掉。 同时，要让a元素成为其子元素的包含框，必须设置a元素的定位属性，而a元素应保持它在标准流中的位置不发生移动，所以a元素的定位属性值应设为相对relative。 a元素的CSS代码 #nav4 a { background-color: #79bcff; font-size: 14px; color: #333333; text-decoration: none; border-bottom:8px solid #99CC00; /*以上5条为普通CSS样式设置*/ display: block; float: left; padding: 6px 10px 4px 10px; margin:0 2px; position:relative;} 第三步 设置b元素的CSS样式 设置b元素为绝对定位，让它以a元素为包含框进行定位，由于b要位于a的左上角，必须设置偏移属性left:0;和top:0;。 再设置b元素的左边框为白色，下边框为a元素的背景色。这样在Firefox中就可以看见缺角的导航条效果了。为了在IE中也有此效果，需要设置overflow: hidden;和height: 0px;，（因为IE默认设置了盒子属性的空元素默认有12px的height）。 b元素的CSS代码 #nav4 a b { border-bottom: 8px solid #79bcff; border-left: 8px solid #ffffff; /*左边框和下边框交汇形成三角形效果*/ overflow: hidden; height: 0 ; /*以上2条为兼容IE*/ position: absolute; left:0; /*相对于a元素边框内侧的左上角定位*/ top:0; } 第四步 添加交互效果 接下来添加交互效果，只需设置鼠标经过时a元素的字体、背景色改变，b元素下边框颜色改变就可以了 #nav4 a:hover { color: #C00; background-color: #CCC; border-bottom-color: #CF3; } #nav4 a:hover b { border-bottom-color: #CCC;} 2制作中英文双语导航条