第4章网页导航栏总结.pptVIP

网站综合开发解析 第 4 章 网页导航栏 盒子模型的3个位置属性：边框（boder）、外边距（margin）和内边距（padding）。 制作图像logo的关键在于图像的定位问题，选用合理的属性定位图片。 banner一般显示在logo的右侧，合理地利用浮动属性和边界属性可以很好地控制元素的显示位置。 CSS提供了link、visited、hover、active4种a对象的伪类来表示链接的4中不同状态。 float属性将其值设为left或right，被定义的元素向其父元素的左侧或右侧位置浮动。 CSS通过clear元素实现清除浮动。 CSS的字体属性可以对网页中的文字进行全方位设置。 使用span标签制作文本导航栏时，需要添加display属性将其转换为块级元素。 使用visibility:hidden属性可将二级下拉菜单隐藏。 综合实例 制作纯CSS二级下拉菜单 style type=text/css !-- * { margin: 0px; padding:0px; list-style:none; } body { font: 12px 宋体,Arial, Helvetica, sans-serif; } -- /style 整体样式定义 综合实例 二级下拉菜单的HTML结构代码 div class=menu ul lia href=#产品橱窗/a ul lia href=#产品库/a/li lia href=#购买与服务/a/li lia href=#美容顾问/a/li /ul /li …… /ul /div 综合实例 对头部样式进行定义 .menu{ width:758px; height:30px; line-height:30px; border-bottom:5px solid #ED008C; background:#000; } .menu li { float:left;position:relative; width:126px; text-align:center; } .menu a{ display:block;color:#fff; text-decoration:none; font-size:14px; } .menu a:hover{ color:#FFF; font-weight:bold; } .menu ul ul li { clear:both; text-align:left; font-weight:normal; height:30px; line-height:30px; background:#000; } .menu ul ul li a{ display:block;width:126px; height:13px;margin:0; border:0; font-size:12px; } .menu ul ul li a:hover{ text-decoration:underline; color:#FFCC00; } 综合实例 对头部样式进行定义 /*二级菜单隐藏*/ .menu ul ul { visibility:hidden; position:absolute; left:0px;top:30px; background:#000; padding-left:10px; width:116px; overflow:hidden; } /*鼠标经过出现*/ .menu ul li:hover ul,.menu ul a:hover ul{ visibility:visible; /*能见度：可见*/ } 综合实例 二级下拉菜单的内容并没有显示出来，这是因为IE 6.0浏览器不支持这个属性，用条件注释的方法解决IE 6.0浏览器，同时为了兼容IE 7.0浏览器，添加HTML代码。 .menu ul li:hover ul { visibility:visible; /*能见度：可见*/ } 综合实例 div class=menu ul lia href=产品橱窗