前三节课, 我们知道了什么是 “内容块状元素和内联元素” , 以及 XHTML+CSS 布局的
核心概念“盒子模型”,同时又学习了一下页面布局中两种方法中的一种方法“浮动”, 这
次我们就利用这三个概念, 来制作一款, 经典的导航条, 别看它其貌不扬, 可是网上所有的
导航条都可以再它的基础上修改而来哟~, 厉害吧~! 其实理论都是一样的, 只要你能理解并
学会这节课的内容,以后再困难的导航条你都可以很应对,EASY !!!
OK!我们要做的导航条的效果如下:
鼠标移动上去背景变黑,并且字体颜色变成白色
OK!我们要做的导航条的效果如下:
鼠标移动上去背景变黑,并且字体颜色变成白色
其实做这款导航条很容易的,你只需要动动鼠标敲敲键盘,跟着 KwooJan 做就是了,呵呵
【第一步】我们要先做一个容器(要求:ID 为“nav”,宽度为 960px,高度为:35px,位
于页面水平正中, 与浏览器顶部的距离是 30px;),这个容器就是放我们的导航的哟~代码如
下:
HTML 代码:
<div id="nav"></div>
CSS 代码:
#nav{
width:960px;
height:35px;
background:#CCC;/*为了便于查看区域范围大小,故而加个背景色*/
margin:0 auto;/*水平居中*/
margin-top:30px;/*顶部 30px*/
}
还有一点需要提醒的是, 为了页面在浏览器的兼容性, 不要忘记在 CSS 文件顶部加入标签重
置代码哟~
代码:
body,div{padding:0; margin:0;}
这里就不多说了,不明白的就看,课程顶部的课程关键词
怎么样, 作出来了没有, 效果是不是一个灰色条, 位于页面的正中间, 并且所有浏览器效果
一样呢~呵呵
(如果没有做出来证明你没有认真看教程哟~用这种态度看教程会学不好的,本身我把整个
XHTML+CSS 的理论都压缩到教程里了,或者说教程的“知识点浓度”很高,有时需要你一字
不漏的去品我说的话,不要一目十行的去看哟~只要你把我写的教程逐字逐句的研究透了,
KwooJan 保证你以后只要做出个页面就很 Easy 的兼容各种浏览器,并且代码绝对的精简!
CSS 文件加载速度大大提升哟~)
【第二步】
盒子做好了,我们就要往里面放导航条中的内容了“CSS 学习 学前准备 入门教程 提高教
程 布局教程 精彩应用” , 如果我们把这内容(目前有 6 个), 当成酒杯的话, 如果直接放到
盒子里面的话, 肯定会乱, 并且还会东倒西歪, 一点顺序都没有, 但是我们平时会用一个隔
板将每个酒杯隔开, 这样就是酒杯很有序的放入盒子, 并且牢稳而且防震, 方便使用! 现在
我们把这个隔板叫做“有序列表”起个英文名字叫:ul,里面的每个单元格我们也给起个英
文名字叫“li”,大家想想里面的这个 ul 是不是和盒子里面的空间一样大,小了,酒杯放
不进去, 大了杯子就会不稳, 所以我们定义 UL 的时候大小一定也要和外面的盒子一样大哟~,
所以呢,我们的代码就知道怎么写了吧
HTML 代码
<div id="nav">
<ul>
<li>CSS 学习</li>
<li>学前准备</li>
<li>入门教程</li>
<li>提高教程</li>
<li>布局教程</li>
<li>精彩应用</li>
</ul>
</div>
CSS 代码:
#nav ul{
width:960px;
height:35px;
}
效果作出来了没有, 下面是在 IE6 和 FF 中显示效果(其他浏览器效果大家自己测试, 总结规
律):
效果不一样吧,没关系,IE6 中盒子被撑大,FF 中却没有,但是我们的“酒杯”却出来了,
还有我们不希望我们的酒杯纵向排列,而是横向排列,怎么办呢?给大家一分钟时间想~~~
想出来了没有?什么没有?
没关系,我带着大家想想,因为<li>标签也是块状元素,所以他也有块状元素的“霸道”,
不允许其他元素和自己处于同一行,总共六个<li>,所以他们六个就像台阶似的纵向排列起
来了,我提示到这里,大家应该知道怎么做才能让这些“酒杯”横向排列了吧!^_^
对喽~用浮动 Float!可是让谁浮动呢,当然是<li>标签喽~代码如下:
#nav ul li{ float:left;}
效果是不是和下面的一样呢
大家会发现虽然“酒杯”横向排列了,但 IE6 和 FF 中的效果还是不一样的
1)盒子(#nav)高度不一样
2) 在 FF 中“酒杯”前面有个大黑圆点,而 IE6 中却没有!
解决上面这两个问题,也很容易,如下
1)做到这里标签 ul 和 li 有没有进行重置?只要我们在页面中新写一个标签,就要进行重
置,做法是,将 ul、li 标签加入重置代码中“body,div,ul,li{padding:0; margin:0;}”
2) “酒杯”前面的大黑圆点,是 FF 给 li 标签定义的默认样式,我们只需要将 li 的默认样
式去掉就是了,在 li 标签的 CSS 属性中加入“list-style:none;”就 OK 了
现在在瞅瞅,两种浏览器的显示效果是不是和下图一样了呢~
如果你做到这里的效果和我说的不一样, 没关系, 我把做到目前第二步的代码发出来, 你对
着上面说的再看看,绝对可以学会
【第三步】
第二步的效果还不是我们想要的,所有的“酒杯”都没有保持“车距”,后面的文字全部贴
着前面的文字。
好~!我们现在就将他们分开!设置<li>标签的宽度为 100 像素:
CSS 代码:
#nav ul li{
width:100px;
float:left;
list-style:none;
}
为了便于观察我们暂且将<li>标签的背景设置成红色(设置背景色,是页面布局中一个很重
要的方法,便于查看块状元素区域范围)
CSS 代码:
#nav ul li{
width:100px;
float:left;
list-style:none;
background:#900;
}
效果如下:
瞧瞧,发现问题了吧,我们的<li>标签的高度并没有和我们的盒子的高度一样,这就是为
什么在布局页面的时候, 经常会设置一下背景色, 就是这个道理, 不然的话, 你是发下不了
隐藏的问题,但是往往这些隐藏的问题就会导致页面浏览器的兼容性大大降低哟~
现在暂不把<li>标签的背景色去掉,当我们把它调成我们需要的效果的时候再去掉!
继续,我们把 li 的高度设置成盒子的高度 35 像素,代码自己写,怎么样,高度一样了吧,
但是文字却位于顶端, 如何将它设置成居中呢, 对喽~设置行距(如果你不会, 建议你看看这
篇文章《两种方法实现垂直居中》),在<li>的 CSS 代码中再加入下面这句代码:
line-height:35px;
效果是不是和下图一样呢
好垂直居中解决了, 轮到水平居中了, 这个就容易了吧, 直接在<li>的 CSS 代码中再加入下
面这句代码:
text-align:center;
怎么样,效果有点意思了吧~到这里我再发一次代码,保证大家每个步骤都学会!
好~! 做到这里, 大家有没有想过一个问题, 因为我们的<li>标签是设置了宽度为 100 像素,
已经限定了它的宽度, 如果文字多了它不会自动伸缩的自适应的, 那这时候我们就需要去掉
其宽度, 这时候<li>的宽度就会缩小至文字的宽度, 也就是说, 如果我们再添加一些文字(把
我们的酒杯换成一个大个的),这个<li>也会跟着变大,大家去掉宽度后试试,是不是这个
样子,这样我们的导航条就比较灵活了,不会对“酒杯”的大小有所顾忌了!
虽然这个宽度自适应解决了, 但是给文字的空间太少, 视觉上感觉不舒服, 那么我们就帮它
扩大一下空间,但是又要保证宽度自适应,解决方法很容易,加上左右内边距就 ok 了,这
里设置边距为 10px,在<li>标签加上下面代码,顺便把背景颜色去掉
padding:0 10px;
效果是不是这样
无论你的 “杯子” 是增大还是缩小, <li>不但宽度会随之增大缩小, 但是杯子和杯子之间的
距离永远不变!怎么样有点意思吧~!
我们将导航条做成了下面的效果
但是此时的导航条还没有链接,还不能点击,这节课我们就要做一个完整的导航条
【第四步】
我们需要将上面的导航条做以下几个修改
1)给上面的导航加上链接;
2)链接文字大小修改为 12px;
3)并且规定链接样式,鼠标移上去和拿开的效果
修改方法如下
1)导航加链接,HTML 代码如下:
<div id="nav">
<ul>
<li><a href="#">CSS 学习</a></li>
<li><a href="#">学前准备</a></li>
<li><a href="#">入门教程下载</a></li>
<li><a href="#">提高教程</a></li>
<li><a href="#">布局基础教程</a></li>
<li><a href="#">精彩应用</a></li>
</ul>
</div>
2) 文字大小 12 像素,CSS 代码如下
a{font-size:12px;}
3)鼠标移动上面和拿开效果
#nav ul li a{color:#333; text-decoration:none;}
#nav ul li a:hover{color:#fff; text-decoration:underline;}
效果是不是和下面一样,鼠标移上去变成白色的有下划线的链接
到这里,基本上一个导航条就出来了~不过为了能让大家再提高一个层次,KwooJan 就帮大
家对上面的导航条进行一下修改,算是抛砖引玉!
我希望鼠标移上去后,链接的背景变成黑色的,下面是我的步骤
首先把链接 a 加上一个背景,以方便看出来链接 a 的区域
#nav ul li a{color:#333; text-decoration:none; background:#0FF;}
怎么样,知道 a 的区域了吧
现在我要将 a 的高度设定为 35px 和盒子一样高度, 这样我在把刚才的亮蓝色背景就可以完
全覆盖下面盒子的灰色了
于是我插入下面红色的代码:
#nav ul li a{height:35px; color:#333; text-decoration:none; background:#0FF;}
可是不管我怎么刷新浏览器,高度都没有任何变化,这是为什么呢?!
原因就在于 a 属于内联元素,内联元素是无法设置宽度和高度的,width 和 height 只是针
对块状元素, 说道这里, 解决办法就出来了, 只要我们把内联元素 a 转化成块状元素就可以
了,我们用“display:block;”将内联元素转化成块状元素。大家先不要加这段代码,闭上
眼想想界面会变成什么样子?
#nav ul li a{display:block; height:35px; color:#333; text-decoration:none;
background:#0FF;}
实际效果:
IE6 和 FF 显示效果居然大相径庭, IE6 中为什么所有链接纵向排列了呢?其实这个也很简单,
IE 认为 a 既然转化成块状元素,就拥有块状元素的特性---霸道,它是不允许其他元素和它
同一行,再加上也没有对 a 的宽度进行设定,所以才导致 IE6 中这么显示,不过 FF 中为什
么不这样呢, 和我们想象的一样, 那是因为 FireFox 认为 a 即使为块状元素, 也应该受到外
面<li>元素的影响,所以如此现实,究竟以谁标准,因为大家都认为 FF 是标准浏览器,所
以大家可以以 FF 为标准,不过 KwooJan 认为,不用管谁标准不标准,那都是相对的,我认
为 IE 标准,FF 就不标准了呢,我不愿意在这个问题上浪费精力,我更喜欢将精力用在思考
如何提高页面的浏览器兼容性!
看到这里我想大家应该知道如何让页面在 IE6 中显示的和 FF 中一样,很简单,只需要在 a
的 CSS 代码中加入“float:left;”
#nav ul li a{display:block; height:35px; color:#333; text-decoration:none;
background:#0FF; float:left;}
问题迎刃而解,这还是用到前三节的课程内容,如果你想不起来如何解决,说明前面的课,
特别是第二节的课,你没有真正理解!怎么做,你应该知道....回去再品品去
但是这样你不觉着,每个连接的左边和右边是不是太挤了,紧贴着 a 区域的左侧和右侧, 应
该怎么做?还是很简单,只需要再加上一句话“ padding:0 10px;”
#nav ul li a{display:block; height:35px; color:#333; text-decoration:none;
background:#0FF; float:left; padding:0 10px;}
现在再瞅瞅,是不是下面的效果
这样看看是不是不挤了吧,哈哈,看着舒服了吧,但是这离我们的想要的效果只有一步了,
因为现在看到的连接效果是,鼠标移上去和拿开背景都是蓝色的,我们现在只需要将,a 链
接中的背景去掉,移到 a:hover 的 CSS 代码中,并且颜色变成“#000”就 ok 了~
#nav ul li a{display:block; height:35px; color:#333; text-decoration:none;
float:left; padding:0 10px;}
#nav ul li a:hover{color:#fff; text-decoration:underline; background:#000;}
怎么样,和下面的效果一样么?
效果好多了吧,这下是我们想要的效果了吧~
说这款导航栏可以演变出成千上万的不同特色的导航栏了吧~万变不离其宗!
第四课的思路就是这样的,如果吃透了这节课,那么以后什么样子的导航都很轻易作出来,
如果你在和 js 很好的结合起来用~你就可以很自信的向老板提出加薪了!!!^_^
下节节课我将给大家用浮动方法布局一个页面,敬请期待!