CSS 制做网页页面导航栏条(下)

日期:2021-03-13 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

上节课大家将导航栏条做变成下面的实际效果

可是此时的导航栏条都还没连接,还不可以点一下,这节课大家就要做1个详细的导航栏条
【第4步】
大家必须将上面的导航栏条做下列几个改动
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;}


实际效果是否和下面1样,电脑鼠标移上去变为白色的有下划线的连接

到这里,基础上1个导航栏条就出来了~但是以便能让大伙儿再提升1个层级,KwooJan就帮大伙儿对上面的导航栏条开展1下改动,算是毛遂自荐!
我期待电脑鼠标移上去后,连接的情况变为黑色的,下面是我的流程
最先把连接a再加1个情况,以便捷看出来连接a的地区

拷贝编码
编码以下:

#nav ul li a{color:#333; text-decoration:none; background:#0FF;}

如何,了解a的地区了吧

如今我要将a的高宽比设置为35px和盒子1样高宽比,这样我在把刚刚的亮蓝色情况便可以彻底遮盖下面盒子的灰色了
因而我插进下面鲜红色的编码:

拷贝编码
编码以下:

#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既然转换成块状元素,就有着块状元素的特点---蛮横霸道,它是不容许别的元素和它同1行,再再加也沒有对a的宽度开展设置,因此才致使IE6中这么显示信息,但是FF中为何不这样呢,和大家想像的1样,那是由于FireFox觉得a即便为块状元素,也应当遭受外面<li>元素的危害,因此这般实际,到底以谁规范,由于大伙儿都觉得FF是规范访问器,因此大伙儿能够以FF为规范,但是KwooJan觉得,无需管谁规范不规范,那全是相对性的,我觉得IE规范,FF就不规范了呢,我不肯意在这个难题上消耗活力,我更喜爱将活力用在思索怎样提升网页页面的访问器适配性!

看到这里我想大伙儿应当了解怎样让网页页面在IE6中显示信息的和FF中1样,很简易,只必须在a的CSS编码中添加“float:left;”

拷贝编码
编码以下:

#nav ul li a{display:block; height:35px; color:#333; text-decoration:none; background:#0FF; float:left;}

难题得到解决,这還是用到前3节的课程內容,假如你想不起来怎样处理,表明前面的课,非常是第2节的课,你沒有真实了解!如何做,你应当了解....回去再品品去

可是这样你不觉着,每一个联接的左侧和右侧是否太挤了,紧贴着a地区的左边和右边,应当如何做?還是很简易,只必须再再加1句话“ padding:0 10px;”

拷贝编码
编码以下:

#nav ul li a{display:block; height:35px; color:#333; text-decoration:none; background:#0FF; float:left; padding:0 10px;}

如今再瞅瞅,是否下面的实际效果

这样看看是否不挤了吧,哈哈,看着舒适了吧,可是这离大家的要想的实际效果仅有1步了,由于如今看到的联接实际效果是,电脑鼠标移上去和拿开情况全是蓝色的,大家如今只必须将,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;}

如何,和下面的实际效果1样么?

实际效果许多了吧,这下是大家要想的实际效果了吧~
自然!大伙儿还能够把情况不设定成黑色,用个照片还可以!如今大伙儿搞清楚,为何1刚开始我说这款导航栏栏能够演化出不计其数的不一样特点的导航栏栏了吧~万变离不了其宗!

第4课的思路便是这样的,假如吃透了这节课,那末之后甚么模样的导航栏都很随便作出来,假如你在和js很好的融合起来用~你便可以很自信的向老板提出加薪了!!!^_^

下快速课我将给大伙儿用波动方式合理布局1个网页页面,敬请希望!
/201001/yuanma/cssxuexi_daohang5.rar