教学课件 HTML+CSS+JavaScript网页设计教程（孟宪宁）.ppt

3. 鼠标滑过效果 为了实现鼠标滑过，更改图片效果，需要准备2个相同大小颜色不同的图片，因此需要准备4个图片。当鼠标滑过时，更改a标签的背景图片可以实现以上效果。 .qq-top .top-login{ height:32px; width: 120px; margin: 22px 0 0; } .item-zone a { display:block; width:27px; height:28px; margin-right:10px; background-image:url(../images/z1.jpg); } .item-zone a:hover{ background-image:url(../images/z2.jpg); } .item-qmail a { display:block; width:31px; height:24px; margin-right:10px; background-image:url(../images/e1.jpg); } .item-qmail a:hover{ background-image:url(../images/e2.jpg); } 4.登录按钮CSS样式代码如下： .qq-top .top-login .l-login { display: inline-block; width: 31px; height: 31px; line-height: 31px; text-align: center; border: 1px solid #ededed; color: #60a5e4; background-color: #f5f5f5; font-size: 14px; } 5.5.1 效果图分析 对腾讯首页导航效果图进行分析，该导航有两部分组成，一部分是导航栏，如图5-21所示，一部分是鼠标指向“更多”时，在下方显示二级导航。 5.5导航部分分析与实现 将class属性值为qq-nav的div作为导航层的外层，在该div中包括一个class属性值为nav-main 的UL元素和一个class属性值为nav-more的div两部分，这两个部分是左右布局，nav-main中用来显示主导航，nav-more用来显示更多导航，这两部分要设置浮动属性为左浮动，可以使用前面定义好的类选择器.fl。nav-more层中包括两个层，一个class为more-txt的层和一个class属性值为nav-sub的层，分别用来显示“更多”文字和二级导航。（代码省略） 5.5.2 导航部分布局整体设计 1. qq-nav层的样式代码如下: 5.5.3 导航部分的CSS样式分析与设计 .qq-nav { width:1000px; /*设置宽度为1000px */ position: relative;/*设置定位为相对定位，此属性是为nav-more指定父容器*/ height: 50px; /*设置导航层的高度为50px*/ background-color: #1479d7;/*设置蓝色背景*/ font-size: 16px; /*设置圆角矩形*/ -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px;} 2.nav-main层的样式代码如下： .qq-nav .nav-main { width:920px; line-height: 50px; } 3.列表项nav-item的样式代码如下： .qq-nav .nav-item { float: left;/*设置列表项左浮动,将列表项默认竖排变成横排*/ width: 57px;/*设置列表项的宽度*/ text-align: center;/*设置列表项文字水平居中显示*/ line-height: 50px;/*设置列表项文字垂直居中显示*/ } 5.3.2 标签页图标和文字显示 一般要求标签页图标格式是.ico格式，文件名一般命名为favicon,favicon是favorites icon的缩写。对于不同的浏览器，要求不同，对于IE浏览器，要求favicon.ico文件必须放置在