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

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

关键词:自助建站,专业建站,建站网站,建站平台,网站在线制作app

课程刚开始:
      前3节课,大家了解了甚么是“內容块状元素和内联元素”,和XHTML+CSS合理布局的关键定义“盒子实体模型”,另外又学习培训了1下网页页面合理布局中两种方式中的1种方式“波动”,这次大家就运用这3个定义,来制做1款,經典的导航栏条,别看它其貌不扬,但是在网上全部的导航栏条都可以以再它的基本上改动而来哟~,强大吧~!实际上基础理论全是1样的,要是你能了解并学会这节课的內容,之后再艰难的导航栏条你都可以以很解决,EASY  !!!
      OK!大家要做的导航栏条的实际效果以下:
      电脑鼠标挪动上去情况变黑,而且字体样式色调变为白色
      
实际上做这款导航栏条很非常容易的,你只必须动动电脑鼠标敲敲电脑键盘,跟随KwooJan做便是了,呵呵

【第1步】大家要先做1个器皿(规定: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*/
}


也有1点必须提示的是,以便网页页面在访问器的适配性,不必忘掉在CSS文档顶部添加标识重设编码哟~

编码:
body,div{padding:0; margin:0;}

这里就很少说了,不搞清楚的就看,课程顶部的课程重要词
如何,作出来了沒有,实际效果是否1个灰色条,坐落于网页页面的中间,而且全部访问器实际效果1样呢~呵呵
(假如沒有做出来证实你沒有用心看实例教程哟~用这类心态看实例教程会学不太好的,自身我把全部XHTML+CSS的基础理论都缩小到实例教程里了,或说实例教程的“专业知识点浓度”很高,有时必须你1字不漏的去品我说的话,不必1目10行的去看哟~要是你把我写的实例教程逐字逐句的科学研究透了,KwooJan确保你之后要是做出个网页页面就很Easy的适配各种各样访问器,而且编码肯定的精简!CSS文档载入速率大大提高哟~)

【第2步】
盒子做好了,大家就要往里边放导航栏条中的內容了“CSS学习培训 学前提前准备 新手入门实例教程 提升实例教程 合理布局实例教程 精彩运用”,假如大家把这內容(现阶段有6个),当做羽觞的话,假如立即放到盒子里边的话,毫无疑问会乱,而且还会歪七扭八,1点次序都沒有,可是大家平常会用1个隔板将每一个羽觞分隔,这样便是羽觞很井然有序的放入盒子,而且牢稳并且防震,便捷应用!如今大家把这个隔板叫做“井然有序目录”起个英文姓名叫:ul,里边的每一个模块格大家也给起个英文姓名叫“li”,大伙儿想一想里边的这个ul是否和盒子里边的室内空间1样大,小了,羽觞放不进去,大了杯子就会不稳,因此大家界定UL的情况下尺寸1定也要和外面的盒子1样大哟~,因此呢,大家的编码就了解如何写了吧

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中显示信息实际效果(别的访问器实际效果大伙儿自身检测,总结规律性):
 
实际效果不1样吧,没事儿,IE6中盒子被撑大,FF中却沒有,可是大家的“羽觞”却出来了,也有大家不期待大家的羽觞纵向排序,而是横向排序,如何办呢?给大伙儿1分钟時间想~~~
想出来了沒有?甚么沒有?
没事儿,我带着大伙儿想一想,由于<li>标识也是块状元素,因此他也是有块状元素的“蛮横霸道”,不容许别的元素和自身处在同1行,一共6个<li>,因此她们6个就像台阶似的纵向排序起来了,我提醒到这里,大伙儿应当了解如何做才可以让这些“羽觞”横向排序了吧!^_^
对喽~用波动Float!但是让谁波动呢,自然是<li>标识喽~编码以下:


#nav ul li{ float:left;}

实际效果是否和下面的1样呢

大伙儿会发现尽管“羽觞”横向排序了,但IE6和FF中的实际效果還是不1样的
1)盒子(#nav)高宽比不1样
2) 在FF中“羽觞”前面有个大黑圆点,而IE6中却沒有!
处理上面这两个难题,也很非常容易,以下
1)保证这里标识ul和li有木有开展重设?要是大家在网页页面中新写1个标识,就要开展重设,做法是,将ul、li标识添加重设编码中“body,div,ul,li{padding:0; margin:0;}”
2)“羽觞”前面的大黑圆点,是FF给li标识界定的默认设置款式,大家只必须将li的默认设置款式去掉便是了,在li标识的CSS特性中添加“list-style:none;”就OK了
如今在瞅瞅,两种访问器的显示信息实际效果是否和下图1样了呢~

假如你保证这里的实际效果和我说的不1样,没事儿,我把保证现阶段第2步的编码传出来,你对着上面说的再看看,肯定能够学会 导航栏条1.rar (763 Bytes) 免费下载次数: 299

【第3步】
第2步的实际效果还并不是大家要想的,全部的“羽觞”都沒有维持“车距”,后边的文本所有贴着前面的文本。
好~!大家如今就将她们分开!设定<li>标识的宽度为100像素:

CSS编码:

拷贝编码
编码以下:

#nav ul li{
width:100px;
float:left;
list-style:none;
}

以便便于观查大家姑且将<li>标识的情况设定成鲜红色(设定情况色,是网页页面合理布局中1个很关键的方式,便于查询块状元素地区范畴)

CSS编码:

拷贝编码
编码以下:

#nav ul li{
width:100px;
float:left;
list-style:none;
background:#900;
}

实际效果以下:

瞧瞧,发现难题了吧,大家的<li>标识的高宽比并沒有和大家的盒子的高宽比1样,这便是为何在合理布局网页页面的情况下,常常会设定1下情况色,便是这个道理,要不然的话,你是发下不上掩藏的难题,可是常常这些掩藏的难题就会致使网页页面访问器的适配性大大减少哟~
如今暂不把<li>标识的情况色去掉,当大家把它调成大家必须的实际效果的情况下再去掉!
再次,大家把li的高宽比设定成盒子的高宽比35像素,编码自身写,如何,高宽比1样了吧,可是文本却坐落于顶端,怎样将它设定成垂直居中呢,对喽~设定行距(假如你不容易,提议你看看这篇文章内容《两种方式完成竖直垂直居中》),在<li>的CSS编码中再添加下面这句编码:
line-height:35px;
实际效果是否和下图1样呢

好竖直垂直居中处理了,轮到水平垂直居中了,这个就非常容易了吧,立即在<li>的CSS编码中再添加下面这句编码:
text-align:center;
如何,实际效果有点意思了吧~到这里我再发1次编码,确保大伙儿每一个流程都学会! 导航栏条2.rar (793 Bytes)

好~!保证这里,大伙儿有木有想过1个难题,由于大家的<li>标识是设定了宽度为100像素,早已限制了它的宽度,假如文本多了它不容易全自动伸缩的自融入的,那这时候候大家就必须去掉其宽度,这时候候<li>的宽度就会变小至文本的宽度,也便是说,假如大家再加上1些文本(把大家的羽觞换为1个大个的),这个<li>也会跟随增大,大伙儿去掉宽度后试试,是否这个模样,这样大家的导航栏条就较为灵便了,不容易对“羽觞”的尺寸有一定的顾虑了!
此时的编码: 导航栏条3.rar (790 Bytes)

尽管这个宽度自融入处理了,可是给文本的室内空间太少,视觉效果上觉得不舒适,那末大家就帮它扩张1下室内空间,可是又要确保宽度自融入,处理方式很非常容易,再加上下内边距就ok了,这里设定边距为10px,在<li>标识再加下面编码,顺带把情况色调去掉

padding:0 10px;

实际效果是否这样

不管你的“杯子”是增大還是变小,<li>不仅宽度会随之增大变小,可是杯子和杯子之间的间距始终不会改变!如何有点意思吧~!
保证此时的源码
上面的4个导航栏案例免费下载
上一篇:纯DIV+CSS完成圆角编码 返回下一篇:没有了