1、第七天 横向导航菜单今天我们开始学习十天学会 web 标准(div+css)的 html 列表，包含以下内容和知识点： 横向列表菜单 用图片美化的横向导航 css Sprites一、横向列表菜单前边学习过纵向导航菜单，又学习了 float 属性，那么要实现横向导航菜单是不是很简单了，只需要把 li 横向排列就可实现了。把第四节的代码拿过来直接用，修改后的代码如下：body font-family: Verdana; font-size: 12px; line-height: 1.5; a color: #000; text-decoration: none; a:hover color: #F
2、00; #menu border: 1px solid #CCC; height:26px; background: #eee;#menu ul list-style: none; margin: 0px; padding: 0px; #menu ul li float:left; padding: 0px 8px; height: 26px; line-height: 26px; 首页网页版式布局 div+css 教程div+css 实例常用代码 提示：可以先修改部分代码后再运行最主要就是用 float 让 li 向右浮动后，实现横向排列，具体步骤不再赘述。以前许多朋友提问怎么让它水平居中，
3、其实很简单，首先导航的宽度是固定的，然后设置margin:0 auto;即可实现了为了用户体验更加友好，还是把 a 转换成块级元素，也可以给 a 设置背景色或背景图片来更加美观了，另外再设置鼠标放上时的样式。#menu width:370px; margin:0 auto; border: 1px solid #CCC; height:26px; background: #eee;#menu ul list-style: none; margin: 0px; padding: 0px; #menu ul li float:left;#menu ul li a display:block; pa
4、dding: 0px 8px; height: 26px; line-height: 26px; float:left;#menu ul li a:hover background:#333; color:#fff;学到这里，常用的样式大部分都涉及到了，也许许多你还记不住，但至少混个脸熟。为了提高效率，建议大家还是手写代码，如果你还不能手写代码，就参考上边的样式，自己在 css 编辑器里设置吧，不再大量截图了。经过上边的修改，现在的用户检验是不是更加友好了呢。这里的#menu ul li a 本来是可以不加 float:left 的，但 IE6 下在 li 没有设置宽度，#menu ul li
5、 a 设置 display:block 的情况下，将会显示错乱，所以需要在 a 上增加 float:left 来修正。万恶的 IE6，怎么就淘汰不掉呢二、 用图片美化的横向导航背景图片也是网页制作当中最常用的样式之一，运用好背景图片，可以使你的页面更加出色，更加人性化和更快的加载速度。下面还是用以前视频教程中的实例进行讲解，或者直接去看视频教程 http:/ css 样式，只截图了一张，设置方法相同：#menu width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;#menu ul list-style
6、: none; margin: 0px; padding: 0px; #menu ul li float:left; margin-left:2px;#menu ul li a display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg2.gif) 0 0 no-repeat; font-size:14px;#menu ul li a:hover background:url(/upload/2010-08
7、/17/091033_nav_bg3.gif) 0 0 no-repeat;#menu ul li a#current background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 0 no-repeat; font-weight:bold; color:#fff;为了让用户知道当前所处的页面，做了一个当前页面的状态，把 ID 添加到相应的 a上。body font-family: Verdana; font-size: 12px; line-height: 1.5; a color: #000; text-decoration: none; a
8、:hover color: #F00; #menu width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;#menu ul list-style: none; margin: 0px; padding: 0px; #menu ul li float:left; margin-left:2px;#menu ul li a display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/
9、upload/2010-08/17/091033_nav_bg2.gif) 0 0 no-repeat; font-size:14px;#menu ul li a:hover background:url(/upload/2010-08/17/091033_nav_bg3.gif) 0 0 no-repeat;#menu ul li a#current background:url(/upload/2010-08/17/091033_nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;首页网页版式 web 教程web 实例常用代码
10、提示：可以先修改部分代码后再运行三、 CSS Sprites 技术CSS Sprites 在国内很多人叫 css 精灵或 css 雪碧。它是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的背景图片定位到要显示的位置。这样做可以减少文件体积，减少对服务器的请求次数，提高效率。讲 CSS Sprites 之前，先把背景图片给搞清楚#menu ul li a background:#ccc url(images/nav_bg2.gif) 0 0 no-repeat; css 背景属性缩写后如上所示，#ccc 表示背景色；url（）里是背景图片路径；接下来的两个数值参数分别是左右和上下，第
11、一个参数表示距左多少 px，第二个参数表示距上多少，这和 padding 的简写方式是不 一样，一定不要弄混。另外再强调一点 css 中值为0 可以不带单位，其它数值都必须带单位（line-height 值为多少倍时，zoom，z-index除外）；no-repeat 表示背景图片向哪个方向重复，此时为不重复。还需说明一点的是定位图片位置的参数是以图片的左上角为原点的，理解了这些，CSS Sprites 技术就基本上懂了，就是靠背景图片定位来实现的。把三张背景图片整合到一张上，如下图：body font-family: Verdana; font-size: 12px; line-height
12、: 1.5; a color: #000; text-decoration: none; a:hover color: #F00; #menu width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;#menu ul list-style: none; margin: 0px; padding: 0px; #menu ul li float:left; margin-left:2px;#menu ul li a display:block; width:87px; height:28px; line-he
13、ight:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -28px no-repeat; font-size:14px;#menu ul li a:hover background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -56px no-repeat;#menu ul li a#current background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 0 no-repeat; fo
14、nt-weight:bold; color:#fff;首页网页版式 web 教程web 实例常用代码 提示：可以先修改部分代码后再运行CSS Sprites 详细的讲解请参考视频教程：http:/ 下拉及多级弹出菜单今天我们开始学习十天学会 web 标准(div+css)的下拉及多级弹出菜单，包含以下内容和知识点： 带下拉子菜单的导航菜单 绝对定位和浮动的区别和运用 css 自适应宽度滑动门菜单一、带下拉子菜单的导航菜单下拉菜单在一些企业网站应用尤为广泛，它存在使用方便，占用空间小等特点。之前纵向导航教程中已使用过二级导航，今天制作下横向导航菜单的二级菜单，方法和纵向一样，只不过由纵向改变为横
15、向而已，下面我们以上一章第二节用图片美化的横向导航中的实例进行修改。先在 html 代码增加二级菜单的代码：首页网页版式自适应宽度 固定宽度web 教程新手入门视频教程常见问题web 实例常用代码增加完代码后，在浏览器里预览一下：是不是一看头都大了，怎么变成这样了。别懵，我们分析一下错乱的原因。首先我们看下“ 自适应宽度”和“固定宽度”两个二级菜单也继承了一级菜单的背景和横向排列，所以我们先把二级菜单的背景和浮动清除掉，增加以下 css 代码：#menu ul li ul li float:none;#menu ul li ul li a background:none;现在预览看下，二级菜单
16、是不是已经归位了，但鼠标划过时还继承了一级菜单的样式，所以也改为最终效果上的黑色背景白色文字，还有下拉菜单的灰色边框和灰色背景也一并加上，修改并增加如下代码：#menu ul li ul border:1px solid #ccc;#menu ul li ul li float:none; width:85px; background:#eee; margin:0;#menu ul li ul li a background:none;#menu ul li ul li a:hover background:#333; color:#fff;第一行设置二级菜单的灰色边框；为了美观，我们把下拉菜
17、单的宽度设置成和一级菜单宽度相同，第二行的 width:85px 再加上第一行上设置的边框左右各 1px 后正好是87px，和一级菜单宽度相同。margin:0 是为了清除掉继承一级菜单中 margin-left:2px；最后一行设置鼠标划过时的样式。再预览一下，是不是基本的样式已实现了。下一步就该把二级菜单隐藏，当鼠标划过时显示出来了。增加如下代码：#menu ul li ul display:none; border:1px solid #ccc;#menu ul li:hover ul display:block;注意第二行的写法，#menu ul li:hover ul 这个样比较难理
18、解，它的意思是定义当鼠标划过#menu 下 ul 下 li 时，li 下的 ul 的样式（有点饶舌），这里设置为display:block，意思是鼠标划过时显示这块内容。开始隐藏，鼠标划过时显示， 这就实现了我们想要的效果。目前 IE6 只支持 a 的伪类，其它标签的伪类不支持，所以要想在IE6 下也显示正确，需要借助 js 来实现。我们定义一个类.sfhover（自己命名，需和 JS中相同）的属性为 display:block;然后当鼠标划过后，用 JS 给当前 li 添加上这个样式上，根据 css 的优先级：指定的高于继承的原则，就实现了 IE6 下的正确显示。所以增加如下代码：#menu
19、 ul li.sfhover ul display:block; 认真跟着教程制作的朋友可能已经发现，现在应用的 JS 和纵向导航时应用的不样，但最终实现的效果是一样的。同理 css 在布局网站时，也是可以多种方法的，正所谓条条大道通罗马，希望大家举一反三，加深前面教程的掌握。JS 部分本例不做讲解，如果你想弄清楚 JS 是如何实现的，请学习 js 相关内容。到这里，本例就基本完成了，还有一个问题是当前导航下有内容的话，如果二级菜单显示，将会把下边的内容挤跑，所以需要给#menu ul li ul 增加 position:absolute;属性，当其绝对定位后，它将脱离原来文档流，不再占据空间
20、，因此也不会再把下边内容挤跑了（欲更多了解绝对定位，请查看之前教程或 http:/ 0? “ “: “) + “sfhover“;sfElsi.onMouseDown=function() this.className+=(this.className.length0? “ “: “) + “sfhover“;sfElsi.onMouseUp=function() this.className+=(this.className.length0? “ “: “) + “sfhover“;sfElsi.onmouseout=function() this.className=this.classN
21、ame.replace(new RegExp(“( ?|)sfhoverb“), “);window.onload=menuFix;/body font-family: Verdana; font-size: 12px; line-height: 1.5; a color: #000; text-decoration: none; a:hover color: #F00; #menu width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;#menu ul list-style: none; margin
22、: 0px; padding: 0px; #menu ul li float:left; margin-left:2px;#menu ul li a display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(http:/ 0 0 no-repeat; font-size:14px;#menu ul li a:hover background:url(http:/ 0 0 no-repeat;#menu ul li a#current background:url(htt
23、p:/ 0 0 no-repeat; font-weight:bold; color:#fff;#menu ul li ul border:1px solid #ccc; display:none; position:absolute;#menu ul li ul li float:none; width:87px; background:#eee; margin:0;#menu ul li ul li a background:none;#menu ul li ul li a:hover background:#333; color:#fff;#menu ul li:hover ul dis
24、play:block;#menu ul li.sfhover ul display:block;首页网页版式 自适应宽度 固定宽度 web 教程新手入门 视频教程 常见问题 web 实例常用代码 提示：可以先修改部分代码后再运行二、绝对定位和浮动的区别和运用学习到现在，定位和浮动也都涉及到了，但有些朋友可能还在迷惑，两者都可以分栏布局，到底什么时候用浮动，什么时候用定位呢？当一个元素使用绝对定位后，它的位置将依据浏览器左上角开始计算或相对于父容器（在父容器使用相对定位时）。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流
25、无关，所以它们可以覆盖页面上的其他元素。而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示，而没有脱离文档流，理解了这一点，就很容易弄明白什么时候用定位，什么时候用浮动了。一个元素浮动或绝对定位后，它将自动转换为块级元素，而不论该元素本身是什么类型。有关定位的视频教程请参看：http:/ css 自适应宽度滑动门 菜单CSS 自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽，就拿上边的实例来说，是按 4 个字的宽度
26、来设计的，如果其中一项为 5 个字或更多，就放不下了。那么我们就需要让它的宽度可以随着内容的增减而变化，这就是 css 自适应宽度菜单。下面我们讲一下自适应宽度按钮，和菜单原理是一样，因为自适应宽度菜单在新手常见问题中已经讲过了，如果学会自适应按钮，你还不会制作自适应菜单的话，请阅读http:/ css 按钮实例（如下图），当时只做了一个按钮，它这里是三个按钮，而且宽度不一样，今天我们还以这个按钮为基础，制作宽度自应适应的按钮。那么它的实现原来是什么？我们看下边一张图。要想实现自适应宽度，需要在文字上增加一个辅助标签，如 span，分别在 a 上和 span 上设置背景，一个左侧对齐，一个右侧
27、对齐，如下的原理图，四条辅助线内为一个按钮元素，绿色部分为 span，然后定义它的背景图片靠右侧对齐，而左侧的部分为 a 的背景图片，定义靠左侧对齐。当文字多时，会把 span 撑开，这实现了自适应宽度的按钮了。这里需要一张如下的图片，它的宽度要宽于你所应用的最宽宽度，这样才能显示正常，同时根据以前学习的 css Sprites 技术，把背景图片和鼠标经过图片放到一张图片上。拿第五章 css 按钮的例子代码进行修改，先改为背景图片使用上图，再增加两个字数不等按钮，并在文字上增加 span 标签a display: block; height: 34px; width: 107px; line-
28、height: 2; text-align: center; background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; a:hover background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px -37px;免费注册登录在淘宝网上开店提示：可以先修改
29、部分代码后再运行预览显示效果如下所示，因背景图片比较长，所以右侧显示不太友好，下一步就需要把 a 的宽度给去掉，设置 span 的背景，使右侧显示正常，另外把三个按钮横向排列在 a 上增加如下代码：float:left; margin:5px;横向排列，并增加 5px 的外边距，现在看下效果吧。为了美观，下一步需要 a 的左侧增加填充，使文字不死贴左侧，同理 span 右侧需要增加一个同样的填充。a display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: center; backgr
30、ound: url(btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left:18px; a span display:block; background: url(btn_bg.gif) no-repeat right 0px; padding-right:20px;a:hover background: url(btn_bg.gif) no-repeat 0px -37px;a:hover span backgr
31、ound: url(btn_bg.gif) no-repeat right -37px;对比以上代码，可能你已经发现，原来 a 顶部的 3px 给去掉了，把高度改为 37px了，行高也改为 37px 了，为什么这么做，大家动手试下就明白了。然后设置 a 下 span的背景图片，span 默认是内联元素，所以需先转换为块级元素；另外需增加鼠标经过时span 的样式。显示效果如下，对比一下实例图，是不是实现了这样的效果。a display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: cent
32、er; background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left:18px; a span display:block; background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat right 0px; padding-right:20px;a:hover background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px -37px;a:hover span background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat right -37px;免费注册登录在淘宝网上开店提示：可以先修改部分代码后再运行本文全部转载自： http:/
