《电子商务网站开发与管理 教学课件 ppt 作者 唐四薪 谭晓兰 屈瑜君 3网站交互效果的实现》由会员分享，可在线阅读，更多相关《电子商务网站开发与管理 教学课件 ppt 作者 唐四薪 谭晓兰 屈瑜君 3网站交互效果的实现（121页珍藏版）》请在金锄头文库上搜索。
1、电子商务网站开发与管理,唐四薪 主编 人民邮电出版社 http:/,ISBN:9787115282491 2012年8月,第3章 网站交互效果的实现,伪类选择器,所谓伪类就是指元素在某个时候的状态。 网页中的链接标记能响应浏览者的点击。a标记有四种状态能描述这种响应，分别是a:link、a:visited、a:hover、a:active，伪类选择器的标记和伪类之间用“:”隔开。,a:hover,color: green;,font-size: 20px;,标记名,属性,值,属性,值,声明,声明,伪类名,通过伪类选择器制作动态超链接,伪类选择器可以看成是一种特殊的标记选择器，它用来选中在某种状
2、态下的标记 可以定义标记在四种不同的状态下具有不同的颜色，是否有下划线。 一、伪类选择器的书写应遵循LVHA的顺序，即出现的顺序应为a:link a:visited a:hover a:active。 二、各种伪类选择器将继承a标记选择器定义的样式。,3.1.2 伪类选择器的应用,1 制作缺角的导航条,缺角的导航条，是一个利用定位基准和绝对定位技术结合的典型例子 首先，如果这个导航条没有缺角，那么这个水平导航条完全可以通过盒子在标准流及浮动方式下的排列来实现，不需要使用定位属性。其次，缺的这个角是通过一个元素的盒子叠放在导航选项盒子上实现的,导航项盒子和左上角盒子的关系,导航项左上角的盒子必须
3、以导航项为基准进行定位，因此必须设置导航项的盒子为相对定位，让它成为一个包含框，使左上角的盒子以它为基准进行定位，这还需要将左上角的盒子也设置为绝对定位，这样还能使它不占据标准流的空间。同时由于导航条不需要改变在标准流中的位置，所以应该设置为相对定位无偏移,第一步：写结构代码,我们直接用a元素的盒子做导航条，因为a元素中还要包含一个盒子，所以要在a元素中添加任意一个行内元素，这里我们选b标记，它的内容应为空，这样才能利用它的边框做三角形。 首 页 中心简介 政策法规 常用下载 为您服务 技术支持,作为钩子（hook），起到挂CSS效果的作用,第二步 设置a元素的CSS,因为要设置a元素的边框填
4、充等值，所以要设置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 #
5、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默
6、认设置了盒子属性的空元素默认有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
7、 a:hover color: #C00; background-color: #CCC; border-bottom-color: #CF3; #nav4 a:hover b border-bottom-color: #CCC;,2制作中英文双语导航条,它是把导航项的中文写在标记中，通过在默认状态下隐藏b元素，就只能看到英文的文字了。当鼠标滑过时，为了让中文遮盖住英文，必须设置b元素为绝对定位，这样b元素的盒子就会浮在a元素上，挡住了a元素且不占据a元素的空间 首 页Home 关于我们About Us 产品展示Products 售后服务Services 联系我们Contact ,3 制作小提
8、示窗口,我们知道，几乎所有的html标记都有一个title属性，添加该属性后，当鼠标停留在元素上时，会显示title属性里设置的文字，如图1所示。但用title属性设置的提示框不太美观，而且鼠标要停留一秒钟以后才会显示，实际上，我们可以用绝对定位元素来模拟小提示框，由于这个小提示框必须在其解释的文字盘边出现，所以要把待解释的文字设置为相对定位，作为小提示框的定位基准,小提示窗口与title属性对比,Web前台技术：AjaxAjax是一种浏览器无刷新就能和web服务器交换数据的技术技术和CSSCascading Style Sheets 层叠样式表的关系,关键代码,a.tip color:red
9、; text-decoration:none; position:relative; a.tip:hover span display:block; position:absolute; top:15px; left:-30px; width:100px;,background-color:#424242; color:#fff; padding:10px; z-index:9999; a.tip span display:none; a.tip:hover cursor:hand; z-index:999;,制作纯CSS的下拉菜单,由于下拉菜单在弹出时是浮在网页上的，所以放置下拉菜单的元素必
10、须设置为绝对定位元素，而且下拉菜单位置是依据它的导航项来定位的，所以导航项应该设置为相对定位，作为下拉菜单的定位基准，当鼠标滑到导航项时，显示下拉菜单，当鼠标离开时，设置下拉菜单元素的display属性为none，则下拉菜单就被隐藏起来,第一步 写结构代码,下拉菜单采用二级列表结构，第一级放导航项，第二级放下拉菜单项。首先写出它的结构代码 文 章 Ajax教程 SAML教程 RIA教程 Flex教程 ,第二步 使导航项水平排列,设置第一层li为左浮动，这样导航项就会水平排列，同时去除列表的小黑点、填充和边界 ，再设置导航项li为相对定位，让下拉菜单以它为基准定位。 ul#nav padding
11、: 0; margin: 0; list-style: none;,li float: left; width: 160px; position:relative; ,第三步 设置下拉菜单li ul,设置下拉菜单为绝对定位，往导航项下偏移21像素。平时导航项未被访问时应隐藏下拉菜单ul，所以ul默认值是不显示。 li ul display: none; position: absolute; top: 21px; 再添加交互，当鼠标滑过时显示下拉菜单ul。 li:hover ul display: block;,第四步 用CSS样式美化下拉菜单,ul li a display:block; f
12、ont-size:12px; border: 1px solid #ccc; padding:3px;,text-decoration: none; color: #777; ul li a:hover background-color:#f4f4f4; ,下拉菜单制作完成,这样，一个下拉菜单就做好了，由于IE6不支持li:hover伪类，所以在IE6下不能看到弹出菜单。 想一想：如果把上述选择器中的position:relative;和position: absolute;都去掉还会有上面的下拉菜单效果吗？会出现什么问题呢？,第五步 兼容IE6浏览器,IE6由于不支持li:hover所以没有
13、下拉菜单，我们可以把下拉菜单ul放在a标记中，利用a:hover ul来控制下拉菜单的显示和隐藏。尽管把块级元素ul放在a中在html语法中是错误的，但也能实现效果 文 章 Ajax教程 SAML教程 RIA教程 Flex教程 ,添加的样式代码,ul a:hover ulvisibility:visible;,5. 制作图像放大效果,在电子商务购物网站中，常常会以缩略图的方式展示商品。当浏览者将鼠标滑动到商品缩略图上时，会把缩略图放大显示成商品的大图，通常还会在大图下显示商品的描述信息。 分析：商品的缩略图的排列可以使用标准流方式排列，但商品的大图要以缩略图为中心进行放大，所以得以缩略图为定位
14、基准，因此商品的缩略图应设置为相对定位。而商品的大图是浮在网页上，所以是绝对定位元素。在默认情况下，商品的大图是不显示的，当鼠标滑到缩略图上时，就显示商品的大图,第一步 写结构代码,由于有许多张图片，因此采用列表结构存放这些图片，每个列表项放一张图片。因为图片要响应鼠标滑过，所以外面要套一个a标记 ,第二步 写CSS代码,#lib img border: 1px solid #333333; padding: 6px; margin: 4px; #lib a:hover border:1px solid #CCCCCC; /*此处主要为兼容IE 6*/ #lib a:hover img wid
15、th:300px; /*重新定义图片的宽和高实现放大*/ height:280px; ,第三步 设置绝对定位和定位基准,#lib a position:relative; #lib a:hover border:1px solid #CCCCCC; z-index:1000; /*防止放大后图片被小图覆盖*/ #lib a:hover img position: absolute; left:-50px;top:-50px; /*放大图的位置*/ width:300px; height:280px; z-index:1000;,第四步 给a的父元素li设置宽和高,给li元素设置宽度和高度，这样
16、即算a元素绝对定位不占据空间后，其父元素li由于定义了宽和高，就不会自动收缩，仍然会占据原来的位置。这样后面的图片就不会挤占放大后图片的位置 #lib li float: left; width:164px; height:154px; /*防止a元素绝对定位不占据空间后父元素自动收缩*/ margin: 4px; ,5. 最终图片放大效果,3.2 JavScript事件驱动机制,事件处理,事件是JavaScript和DOM之间进行交互的桥梁，当某个事件发生时，通过它的处理函数执行相应的JavaScript代码。 编写JavaScript程序的步骤： 找到对象 为其添加事件 编写事件处理函数,例如：网页载入时弹出对话框,对象：窗体（或body元素） 事件：onload 事件处理函数：function alm()alert(“已载入”) 网页载入时执行
