网页设计20-相册2

1、授课人：何蕴婷EMAIL：CSS样式（样式（13） -电子相册电子相册内部培训资料,不作任何宣传用途1、通过实训项目熟练掌握css样式设置的综合运用。内部培训资料,不作任何宣传用途实训一：电子相册内部培训资料,不作任何宣传用途 通过实例了解利用CSS实现电子相册的效果1、菜单、菜单实例实例1内部培训资料,不作任何宣传用途课堂实践课堂实践 插入图像 列向图像和横向图像的定义和应用 鸣沙山Trip01￥79.9(1)搭建页面框架搭建页面框架内部培训资料,不作任何宣传用途课堂实践课堂实践(2) 阵列模式阵列模式对对pic整体结构设计整体结构设计内部培训资料,不作任何宣传用途课堂实践课堂实践(3)用两

2、张底片给图片增加背景边框用两张底片给图片增加背景边框内部培训资料,不作任何宣传用途课堂实践课堂实践（4）设置水平和竖直照片的大小，并隐藏照片的信息）设置水平和竖直照片的大小，并隐藏照片的信息内部培训资料,不作任何宣传用途课堂实践课堂实践（5 5）照片居中，并把超链接设置为块元素）照片居中，并把超链接设置为块元素内部培训资料,不作任何宣传用途课堂实践课堂实践（6 6）鼠标经过时变换照片背景）鼠标经过时变换照片背景内部培训资料,不作任何宣传用途课后作业课后作业 1. 1. 完成课本完成课本P291-297P291-297的案例的案例内部培训资料,不作任何宣传用途To Be To Be Contin

3、ueContinue内部培训资料,不作任何宣传用途课堂实践课堂实践2.单列模式单列模式P298（1）取消信息列表的隐藏属性和）取消信息列表的隐藏属性和div.pic 的的左浮动左浮动（2）将照片的超链接设置左浮动）将照片的超链接设置左浮动内部培训资料,不作任何宣传用途课堂实践课堂实践（3）设置信息列表的样式）设置信息列表的样式P299内部培训资料,不作任何宣传用途课堂实践课堂实践（4）设置列表项目）设置列表项目P3003.改进阵列模式改进阵列模式P301内部培训资料,不作任何宣传用途课堂实践课堂实践4.双向联动模式双向联动模式（1）给每个）给每个div加个加个id（2）图像定位，）图像定位，P

4、307内部培训资料,不作任何宣传用途课堂实践课堂实践（3）设置信息列表的样式）设置信息列表的样式P307内部培训资料,不作任何宣传用途课堂实践课堂实践（4）设置鼠标经过时双向联动）设置鼠标经过时双向联动P310（5）IE兼容兼容定义伪类的类别选择器定义伪类的类别选择器div.ls:hover a,div.lshover a background-image: url(framels_hover.jpg);div.pt:hover a,div.pthover a background-image: url(framels_hover.jpg);div.pic:hover ul,div.picho

5、ver ul background-color: #ccc;border-top-width: 1px;border-bottom-width: 1px;border-top-style: solid;border-bottom-style: solid;border-top-color: #FF0000;border-bottom-color: #FF0000;内部培训资料,不作任何宣传用途课堂实践课堂实践 加JavaScript代码var divs = document.getElementsByTagName(div);for (var i=0;idivs.length;i+)divsi

6、.onmouseover = function()/鼠标在行上面的时候if(this.className.indexof(Is)!=-1)this.className+=Ishover;else this.className+=pthover;this.className+=pichover;divsi.onmouseout = function()/鼠标在行上面的时候this.className=this.className,replace(/Ishover/,);this.className=this.className,replace(/pthover/,);this.className=this.className,replace(/pichov