竖型导航栏的制作
- 格式:docx
- 大小:52.61 KB
- 文档页数:6
FLASH CS4 制作网页导航条网页动画导航条通常是由各种带有动画效果的按钮组成的。
设计动画导航条时,应首先为动画导航条添加背景,然后再为导航条制作各种按钮,为按钮添加各种动画效果。
例如,使用Flash CS4的动画预设为按钮添加飞入效果等,如图8-36所示。
图8-36 网页导航条设计过程:(1)新建fla文件,执行【修改】|【文档】命令,设置【尺寸】为800px×300px。
然后执行【文件】|【导入】命令,导入素材图像,并作为导航条的背景如图8-37所示。
图8-37 导入背景图像(2)新建triangle图层,然后新建mov 元件,在元件中绘制一个等边三角形,如图8-38所示。
图8-38 绘制等边三角形(3)新建ball元件,将mov元件从【库】中面板中拖动到ball元件的中心点,然后执行【窗口】|【变形】命令,设置元件的【缩放宽度】和【缩放高度】均为4%,如图8-3 9所示。
图8-39 缩放元件(4)在【时间轴】面板中,将第100帧转换为关键帧。
右击第99帧执行【创建传统补间】命令,制作三角形向上旋转飞出的动画,并设置【色彩效果】中的Alpha样式的值从40%到0%(第1帧为40%),如图8-40所示。
图8-40 制作三角形飞出动画(5)在ball元件中,新建一个图层,将该图层第100帧转换为关键帧。
单击该帧,并按F9快捷键打开【动作】面板,输入“st op();”代码。
(6)在【库】面板中,右击ball元件,执行【属性】命令。
在弹出的【元件属性】对话框中,启用【为ActionScript导出】复选框,如图8-41所示。
图8-41 为ActionScript导出(7)新建triangle元件,将ball元件添加到triangle元件的原点。
然后使用ActionS cript3.0代码调用ball元件实现三角形的放射。
代码如下所示:var i:int=1;//声明计数器变量iaddEventListener(Event.ENTER_FRAME,shoot);//为影片添加帧的播放事件函数shootfunction shoot(event:Event){//自定义shoot()函数,其参数为事件this["ball"+i] = new Ball();//创建ball元件的动态实例this["ball"+i].rotation=Math.random()*360;//定义ball的动态实例随机旋转var num:int = Math.random()*10+10; //定义ball的动态实例随机缩放比率this["ball"+i].scaleX=num;//定义ball的动态实例水平缩放比率this["ball"+i].scaleY=num;//定义ball的动态实例垂直缩放比率this["ball"+i].x=400;//定义实例出现的横坐标this["ball"+i].y=125;//定义实例出现的纵坐标addChild(this["ball"+i]);//将实例显示于影片中i++;计数if(i>100){//判断,当计数器的数字大于100时(影片中出现ball的动态实例超过100个时)removeChild(this["ball"+(i-99)]);//删除最早出现的实例}}(8)在影片中,新建triangle图层。
在WPS演示中制作导航菜单来源:WPS Office官网WPS演示相信大家都用过,是否想过制作导航菜单让你的演示文档更生动?让页面切换更随你意?下面我们就来探讨一下导航菜单之制作方法。
首先,大家要明确菜单的功能。
常规状态下播放演示时只能单击一次进入下页或者在指定时间后自动进入下一页,这无法满足所有用户的需求。
有时在给客户作产品功能演示时需要在第二页跳转至第8页,然后回到第二页等类似状况,这就需要菜单式组件来调节,让演示使用时更能随心所欲,也比一页页切换显得更专业。
下面是菜单设计过程。
步骤一:建立文件新建一个演示文件,然后存盘。
友情提示:工作中需要养成第一时间存盘的习惯,中途遇到停电/死机等突发状况时,重启电脑后可以找回文档内容,否则所有辛苦的成果将彻底丢失。
图1所示位置即存放临时文件文件夹,可以至该处取回。
图1 文件存放位置步骤二:编辑母版。
1.单击菜单【视图】【母版】【幻灯片母版】进入母版编辑状态;2.将标题和标题样式框和正文文本样式框向右移动,使左边有足够空间显示菜单;3.单击右键,选择【背景】菜单,在填充效果中选择一种自己喜欢的背景图,见图2;图2 修改模板背景4.选择左下角“日期区”文本框,单击【插入】【日期和时间】;5.选择中间“页脚区”文本框,单击【插入】【幻灯片编号】,并在编号#前后加上“第”和“页”字样;6.通过自选图形工具绘出一个园角方框,输入文字“菜单”,并选择一种图形填充色,见图3所示;图3 菜单图形7.重复前一步,制作7个菜单项,分别修改文字为“首页”、“公司简介”、“产品特色”、“产品功能”、“市场计划”、“历史成绩”、“结语”,并修改与菜单不同之背景色(将菜单置于母版中而不置于演示正文中的好处是制做快速且统一,新建的页面将自动生成相应的菜单项,且大小、位置完全一致)。
见图4所示。
图4 完整的菜单步骤三:插入新幻灯片1.单击【插入】【新幻灯片】分别插入6张幻灯片;2.对各页标题进行编辑,使之对菜单名对应。
ppt制作导航栏的方法图解步骤对于初学者来说,可能不知道如何在ppt中制作导航栏,下面就让学习啦小编告诉你 ppt怎样制作导航栏的方法,希望对大家有所帮助。
ppt制作导航栏的方法舞台上右键——设置背景格式——填充——纯色填充——黑色。
ppt制作导航栏的步骤图1 2插入——形状——矩形,在舞台上拉出一个合适的矩形。
绘图工具——形状填充——无填充色。
形状轮廓——其他颜色轮廓,色码如图,透明度48%。
粗细——其他线条——线型——复合类型——由细到粗,宽度6磅。
ppt制作导航栏的步骤图2 3插入——图片,将背景图片导入,放置在顶部,右键——置于底层。
ppt制作导航栏的步骤图3 4边框左上方输入文字,开始——字体中设置好字体、字号、颜色(这些都依个人的设计而定)。
ppt制作导航栏的步骤图4 5边框右侧输入导航目录,分别选择好字体、字号、颜色。
图2为三个目录完成后的效果。
ppt制作导航栏的步骤图6 6插入三张小图,在绘图——格式——大小中,将宽度与高度更改为相同大小。
对齐工具栏中将其顶端对齐并横向分布(按最左与最右的图片构成的间距平均分配图片)。
ppt制作导航栏的步骤图7 7矩形工具如图拉出一个长方形,颜色依个人图片设定,右键将其置于底层。
ppt制作导航栏的步骤图8 8绘图工具——格式——形状效果——棱台,为矩形选择“十字形”棱台。
三张小图选择“松散嵌入”棱台。
ppt制作导航栏的步骤图10 9矩形上方输入标题,艺术字样式中选择一种效果,绘图工具——格式——文本效果中,为其选择一种映像。
ppt制作导航栏的步骤图11 看了ppt怎样制作导航栏的人还看:1.在ppt中怎样添加图片边框2.如何制作高大上的立体导航栏效果3.ppt怎样设计导航栏4.ppt如何制作导航菜单5.ppt如何制作下拉菜单效果6.在WPS演示中如何制作下拉式列表导航7.ppt怎样制作下拉菜单。
利用dw制作漂亮的导航栏效果最近论坛中很多网友问到各种菜单和导航的制作方法,下面我们就网上常见的一些菜单和导航效果做简单的介绍。
考虑到满汉全席的菜单应该是最全的了,我们就以此为名,来顿super大餐。
Let’s Go!一、进门点心:利用Dreamweaver MX制作最基本的下拉菜单实现下拉菜单的思路是首先建立一个相对定位的层,调整其位置,并设置其显示属性为隐藏,然后通过给链接文本或图象添加onclick(点击)或者onmouseover(鼠标划过)的事件来触发“显示-隐藏层”的行为,显示隐藏的层,并且在鼠标划出层时隐藏层,实现下拉菜单的完整效果。
下面介绍在Dreamweaver中的具体操作步骤:1.使用菜单在页面中插入一个层,这个层是相对定位的层,然后再在其中插入一个子层,因为子层的位置是相对于父层而言,所以只要父层的位置不发生变化,改变子层的位置和大小不会改变其相对性,效果如图1所示。
图片如下:图1为了父层不占据页面空间,可以设置其宽和高为0,因为以后要调整子层的位置,所以先不设定子层的显示属性为隐藏,而是到确定子层到合适位置后再设置。
2.选中导航条上的链接文本。
使用快捷键Shift+F3激活行为面板,单击行为面板中的加号按钮,在弹出的行为下拉菜单中选择“显示-隐藏层”,在弹出的设置对话框中选中子层,单击显示按钮,如图2所示。
图片如下:图2 显示层设置完毕后单击确定按钮,修改其触发事件为onmouseover,即当鼠标划过文本时显示层。
接下来还需要设置鼠标划出文本后的行为,继续使用行为面板,选择“显示-隐藏层”,在弹出的对话框中选中子层,单击隐藏按钮,如图3所示。
图片如下:图3 隐藏层设置完毕后单击确定按钮,在行为面板中修改该行为的触发事件为onmouseout,即鼠标划出时隐藏子层。
3.拖动子层,调整其位置到和导航条贴近并垂直位于导航文本的下方的位置。
层在编辑页面中的位置和在浏览器页面中的位置是有差异的,所以需要多次调整并在浏览器中预览效果,只到达到合适的位置。
自己制作动感的flash导航条最近做网页美化的时候自己做了一个flash的导航条,由于看到目前网上的一些有关此类的教程太过复杂而且问题交待不是很清楚,因此在这里再跟大家分享一下一个基本的flash导航条的制作方法:所谓“导航条”就是指一般置于网页上方、可以链接到不同网页位置的按钮菜单。
所谓“动感效果”,是指可以响应鼠标在各个按钮图标上移动和点击时产生不同的画面显示效果,此外还可以添加音频等多媒体效果。
下手开始制作之前,首先需要筹划一下,导航条在原始状态、鼠标移动到按钮上方时、以及点击时究竟需要显示怎样的效果。
从简单的来说,我可以设置两种显示状态,一种就是上面图中所示的原始状态,另一种就是文字呈反白显示,按钮图标更突出显示(从原有的水晶覆盖层下显示改为到覆盖层上方显示)。
这就需要准备两套不同显示状态下的图片(如果你愿意,当然也可以只用一套图片,而用flash中编辑图片效果的方式来改变另一种状态下的显示效果)。
因为原有的静态导航条是我用Photoshop做的,因此准备两套图片不需要新找素材制作,现成就可以拿来使用。
打开flash mx,文件—导入—导入到库,把需要使用的图片都导入到当前的库中,其中一张底图如下:其他图片则是各个按钮的原始图标图片。
按<F11>可以显示库中的内容,如下图:接下来,从库中将那张长条形的底图拖入到场景中,并且设置背景文档的大小与底图大小相同:下面制作各个按钮,插入—新建元件,“行为”选择“按钮”,名字可命名为“首页”,单击确定按钮进入按钮的编辑界面,在上方选中第一帧“弹起”帧(即导航条的原始显示状态),然后将之前导入到库中的代表“首页”的按钮图标拖入到编辑区中,然后添加静态文字,设置字体样式,字体颜色为黑色,将文字和图片的相对位置设置整齐,如下图所示:然后在上方选中“弹起”帧,右键选择“复制帧”,再选中第二帧“指针经过”帧(即响应鼠标动作的显示状态),右键选择“粘贴帧”,然后在“指针经过”帧的编辑区内将文字颜色改为浅蓝色,如下图所示:再将这个“指针经过”帧复制一下,粘贴到“按下”和“点击”两个帧中。
网页导航设计的常见样式导航是指引用户找到自己所需内容的一个入口,对于导航栏目的设计,自然也有一套方法。
让用户能够快速、便捷的找到所需,让用户能够清晰明了的了解到导航条的内容,让用户能够青睐于导航栏目结构的设置,从视觉上做到醒目的效果。
对于导航栏目的最佳设计就是采用文本链接的方式,文本链接方式便于人们了解,直接的看到内容,更醒目,提高了网站的易用性。
对用户来说,易用,易理解,易操作的网站比较重要,而那些因为花哨而制作的导航栏目是不会受用户所喜爱的。
在网页设计中有一些通用的交互设计模式。
网站导航各种各样的通用和大家熟知的设计模式,可以用来作为为网站创建有效地信息架构的基础。
这篇指南涵盖了流行的站点导航设计模式。
对于每一种网站导航栏设计模式,我们将讨论它的一般特征,它的缺点,以及什么时候使用它最好。
顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。
它最常用于网站的主导航菜单,且最通常地放在网站所有页面的网站头的直接上方或直接下方。
顶部水平栏导航设计模式有时伴随着下拉菜单,当鼠标移到某个项上时弹出它下面的二级子导航项。
顶部水平栏导航一般特征:导航项是文字链接,按钮形状,或者选项卡形状,水平栏导航通常直接放在邻近网站logo的地方,它通常位于折叠之上。
顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包含的链接数。
对于只有几个页面或类别的网站来说,这不是什么问题,但是对于有非常复杂的信息结构且有很多模块组成的网站来说,如果没有子导航的话,这并不是一个完美的主导航菜单选择。
顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常好的。
这也是单列布局的网站的主导航的唯一选择(除了通常用于二级导航系统的底部导航)。
当它与下拉子导航结合时,这种设计模式可以支持更多的链接。
竖直/侧边栏导航,侧边栏导航的导航项被排列在一个单列,一项在一项的上面。
它经常在左上角的列上,在主内容区之前——根据一份针对从左到右习惯读者的导航模式的可用性研究,左边的竖直导航栏比右边的竖直导航表现要好。
怎样用Dreamweaver制作导航栏下拉菜单在一些企业或门户网站的导航栏中,经常会看到下拉菜单,这样会使用户操作方便一些。
其实,用Dreamweaver软件就可以制作下拉菜单,只需要点几下就出来了。
而且良好地兼容IE、FF浏览器。
以下是具体制作步骤:一、打开Dreamweaver,点击文件-新建菜单,创建一个HTML 文件,输入网站导航栏文字,并选中输入的文字,在下面的属性栏链接处加一个空链接:#。
然后保存该网页文件。
二、点击窗口-行为菜单,打开行为面板。
三、选中第一步输入的文字,点行为面板上的+号,在弹出的菜单中选-显示弹出式菜单。
四、在弹出的对话框中勾选Don’t show me this message again(不要再次向我提示此信息),再点继续。
五、在下列对话框分别设置内容、外观、高级、位置选项。
在内容选项中,点+号可以添加菜单项,-号可以删除菜单项,缩进项可以自动生成二级菜单。
六、各项都设置好后,按F12,在浏览器中预览网页效果如下:此时你会发现和网页同级的目录多了两个文件,分别是:arrows.gif、mm_menu.js。
请勿修改、移动位置,这是弹出式菜单必须的图片、JS文件。
如需修改下拉菜单,可以选中文字,点击行为面板的显示弹出式菜单即可。
如果下拉菜单下面有Flash,为了不影响下拉菜单的正常效果和层次,需要给Flash添加透明代码:<param name="WMODE" value="transparent"> ,还需在embed标签中加入代码:wmode="transparent",。
we前端开发实践第三单元3.4.4导航栏制作代码以下是一个简单的导航栏制作代码示例:HTML代码:```<nav><ul><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></nav>```CSS代码:```nav {background-color: #333;height: 50px;}ul {list-style: none;margin: 0;padding: 0;display: flex;justify-content: space-between;align-items: center;height: 100%;}li {margin: 0 10px;}a {color: #fff;text-decoration: none;font-size: 18px;font-weight: bold;}```解释:- `<nav>` 标签用于定义导航栏。
- `<ul>` 标签用于定义无序列表,其中包含导航栏的各个选项。
- `<li>` 标签用于定义列表项,即导航栏的每个选项。
- `<a>` 标签用于定义超链接,即导航栏的每个选项的链接地址。
Dreamweaver下拉菜单全攻略下拉菜单是网上最常见到的效果之一,用鼠标轻轻一点或是移过去,就出现一个更加详细的菜单,它不仅节省了网页排版上的空间、使网页布局简洁有序,而且一个新颖美观的下拉菜单,更是为您的网页增色不少。
制作下拉菜单的方法多种多样,本期专栏将为您介绍四种常用的制作方法,让您随心打造自己的下拉菜单。
■ 用Dreamweaver制作下拉菜单Dreamweaver是制作下拉菜单最常用的工具,方法简单,控制自由,可以最大限度地随心打造菜单样式,是制作下拄菜单的必修课。
用Dreamweaver制作下拉菜单的原理很简单,它利用了Behaviors(行为)面板中的内置方法Show-Hi de Layers(隐藏-显示层)方法,并用onMouseOver(鼠标移至)和onMouseOut(鼠标移开)来触发层的隐藏和显示,而将要出现的菜单就在层中。
因此,我们可以分四步来制作下拉菜单,首先我们需要一个导航条,它用来放置首先出现在浏览者眼前的主菜单;然后再制作开始隐藏着而将会出现的下拉选单;接着,进行最关键的一步,为主菜单和下拉选单添加上 睾拖允静愕男Ч 蛔詈螅 颐墙 胁说サ拿阑 奘巍W钪湛吹降男Ч 缤肌?相信你已经等不急了,那就让我们马上开始吧!一、导航条的制作首先进行一些必要的前期工作,按CTRL+J,打开Page Properties(页面属性)窗口,参数设置如图二,这一设置对菜单的位置将有影响,所以请如图设置。
按CTRL+F2打开Objects面板,点击层按钮后在页面中按住鼠标不放拖出一个层,然后在层的Proper ties(属性)面板中设置各参数,Layer ID框填入title,L、T、W、H框分别填入8、15、480、15,背景色填入#006699,如图。
将光标移至层内,点击Objects面板上的表格按钮,插入一个一行四列的表格,设置如图。
按住CTRL键不放点取表格的四个单元格,然后设置它们的宽度为120,并在前两个单元格中输入文字,就是你的主菜单名,可按自己想要的名字输入,我用"经典论坛"和"天极网"为例,并加上链接。
头部导航条标签化方法制作第一种显示方式(简单导航条):结合CSS控制,可以实现如下效果:HTML代码:$metnavtopcss代码:.nav{ width:100%; height:30px; background:url(../navblue.gif) repeat-x 0px 0px;}.nav1{height:30px; width:1000px; margin:0 auto; display: block;overflow:hidden; color:#FFFFFF; text-align:left;line-height:30px; font-size:13px;}.nav1 a{ color:#FFFFFF; padding:0px 21px 0px 21px;}.nav1 a:hover{ color:#003366; background-color:#ffffff;}第二种显示方式(带切换特效):结合CSS控制,可以实现如下效果:HTML代码:$metnavtopcss代码:.nav{ position:absolute; right:0px; bottom:0px; width:100%;height:25px; }.nav li{ list-style:none; float:left;}.nav .navdown{ width:99px; text-align:center; float:left;background-image:url(../nav2.gif);height:25px; border-left:1px solid #FFFFFF;line-height:25px; color:#003399; font-weight:bold;}.nav .navdown a{color:#003399;}.nav .navup{ width:99px; text-align:center; float:left;background-image:url(../nav1.gif);height:25px; border-left:1px solid #FFFFFF;line-height:25px; color:#FFFFFF; font-weight:bold;}.nav .navup a{color:#FFFFFF;}第三种显示方式(纵向显示二级导航):结合CSS控制,可以实现如下效果:HTML代码:$mettopnavcss代码:.nav1{float:left; width:75px; height:35px; text-align:center; position:relative; padding-left:2px;background:url(../menu_line.gif) no-repeat left top; }.nav1 a{display:block; color:#FFFFFF; font-weight:bold;padding-right:2px; }.nav1 a:hover{ background:url(../lia_bg.gif) repeat-x; color:#FFFFFF;} .nav2{position:absolute; top:34px; left:0px; *left:-14px; }*+html .nav2{top:30px;}.nav2 li{list-style-type:none; width:120px; height:25px;border-bottom:1px solid #FFFFFF;}*+html .nav2 li{margin-bottom:-9px;}.nav2 li a{background:#045aa7; color:#FFFFFF; height:25px;border-top:none; line-height:25px; font-weight:normal;}.nav2 li a:hover{font-weight:bold; background:#045aa7;border-top:none;}a.navdown{background:url(../lia_bg.gif) repeat-x 0px 0px;}第四种显示方式(横向显示二级导航):结合CSS控制,可以实现如下效果:HTML代码:$mettopnavcss代码:.nav{height:73px; background:url(../menu_bg.gif) repeat-x bottom left; position:relative; }.nav ul{overflow:hidden; margin-left:5px;}.nav ul li.navl{float:left; height:35px;}.nav ul li.navl a{float:left; display:block; padding-left:6px; height:35px;background:url(../menu_on_left.gif) no-repeat left top; cursor:pointer; text-decoration:none;}.nav ul li.navl a span{float:left; padding:11px 14px 10px 10px;line-height:14px;background:url(../menu_on_right.gif)no-repeat right top; font-size:14px; font-weight:bold;color:#FFFBF0;text-decoration:none; }li.navl a.navdown{background-position:left 100% !important; }li.navl a.navdown span{background-position:right 100% !important; color:#333333 !important; text-decoration:none!important; padding:14px 14px 7px10px !important;}ul.nav2{position:absolute !important; left:20px !important;bottom:8px !important; }ul.nav2 li{float:left !important; height:22px !important;}ul.nav2 li a span{float:left !important; display:block !important; padding:6px 10px 4px 10px !important;line-height:12px !important;background:url(../menu_on_right2.gif) no-repeat right top !important;} ul.nav2 li a span{font-weight:normal !important;color:#333333 !important; font-size:12px !important;}ul.nav2 li a{display:block !important; float:left !important;background:url(../menu_on_left2.gif) no-repeat lefttop !important;cursor:pointer !important;padding-left:3px !important;}ul.nav2 li a{padding-bottom:0px !important;padding-right:0px !important; padding-top:0px !important;height:22px !important;}ul.nav2 li a:hover{text-decoration:none !important;background:url(../menu_on_left2.gif) no-repeat leftbottom !important; }ul.nav2 li a:hover span{background:url(../menu_on_right2.gif) no-repeat right bottom !important; color:#FF6600 !important; }标准PHP代码方法制作以显示纵向二级栏目导航条制作为例:{$lang_home}//首页$val[name]返回顶部尾部导航条结合CSS控制,可以实现如下效果:HTML代码:{$metfootnav}css代码:.footnav{ width:1000px; height:20px; border-bottom:1px solid #8B0000; padding-top:10px; margin-top:3px; }返回顶部横向导航条(当前位置)结合CSS控制,可以实现如下效果:HTML代码:{$lang_home} > $nav_x[name]css代码:.nav_x{ width:100%; font-size:13px; height:30px; font-weight:bold;text-align:left;line-height:30px; background-color:#E9E9E9; color:#990000;border-bottom:1px solid #8B0000;}.nav_x a{color:#990000;}更换$nav_x[name]中的元素可以控制导航显示的内容,如$nav_x[2]只显示当前栏目。
七彩导航栏的制作(⼀)简介:彩⾊的导航⼗分具有视觉美感,简约时尚,⽐较适合于童⼉⽹站,⼥性⽹站等页⾯的导航。
功能:每⼀个栏⽬对应⼀个颜⾊,当⿏标移动到对应栏⽬时,该栏⽬突出显⽰,并同时改变下⽅横线的颜⾊。
实现:1.导航栏⽤ul列表实现,横向显⽰通过li{float:left}实现;2.列表项li和a标签通过display:block;来设置显⽰⽅式为块状元素;3.通过li和a标签的⾼度height:40px;和⾏⾼line-height:40px;来实现hover效果4.导航栏底部的横线通过ul的border-bottom 的设置来实现;5.底部横线随栏⽬颜⾊变化⽽变化通过ul的类名来实现,即当⿏标移到a标签上,执⾏函数改变ul的类名,并在css代码中定义对应类的样式(颜⾊等),每⼀个a标签对应⼀个函数这⾥的实现⽅法思路简单,但是代码量⽐较⼤,在下⼀节的随笔中将展⽰另⼀种更简单的改变样式的⽅法。
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Nav</title>6</head>78<style type="text/css">9 *{margin: 0;padding: 0;}10 #nav{margin-top: 50px}11 body{background-image: url(1.jpg);}12 .bar0,.bar1,.bar2,.bar3,.bar4,.bar5,.bar6{list-style: none;height:48px;padding-left: 123px;width:900px;}13 .bar0{border-bottom: 10px solid #F8A0A0;}14 .bar1{border-bottom: 10px solid #FFD699;}15 .bar2{border-bottom: 10px solid #FFFFCC;}16 .bar3{border-bottom: 10px solid #CCFFE0;}17 .bar4{border-bottom: 10px solid #BBFFFF;}18 .bar5{border-bottom: 10px solid #99C2FF;}19 .bar6{border-bottom: 10px solid #E0CCFF;}2021 li{float: left;}22 li a{text-decoration: none;padding:5px;display: block;line-height: 25px;width: 100px;23 color: black;font-size: 17px;text-align: center;24 border-radius:8px 8px 0 0;margin-left: 1px;margin-top: 12.5px;}2526 #l0:hover,#l1:hover,#l2:hover,#l3:hover,#l4:hover,#l5:hover,#l6:hover27 {height: 40px;margin-top: 2.5px;line-height: 40px;background-color: #F8A0A0;color: white;}28</style>29<body>30<center>31<!-- div#nav>ul>li*5>a[href="#"]{links $} -->32<div id="nav">33<ul class="bar0">34<li ><a id="l0" href="#" style="background-color:#F8A0A0;" onmouseover="ch0()">links 0</a></li>35<li ><a id="l1" href="#" style="background-color:#FFD699;" onmouseover="ch1()">links 1</a></li>36<li ><a id="l2" href="#" style="background-color:#FFFFCC;" onmouseover="ch2()">links 2</a></li>37<li ><a id="l3" href="#" style="background-color:#CCFFE0;" onmouseover="ch3()">links 3</a></li>38<li ><a id="l4" href="#" style="background-color:#BBFFFF;" onmouseover="ch4()">links 4</a></li>39<li ><a id="l5" href="#" style="background-color:#99C2FF;" onmouseover="ch5()">links 5</a></li>40<li ><a id="l6" href="#" style="background-color:#E0CCFF;" onmouseover="ch6()">links 6</a></li>41</ul>42</div>43</center>4445<script type="text/javascript">46function ch0(){47var p1 = document.getElementsByTagName("ul");48 p1[0].className = "bar0";49 }5051function ch1(){52var p1 = document.getElementsByTagName("ul");53 p1[0].className = "bar1";54 }5556function ch2(){57var p1 = document.getElementsByTagName("ul");58 p1[0].className = "bar2";59 }6061function ch3(){62var p1 = document.getElementsByTagName("ul");63 p1[0].className = "bar3";64 }6566function ch4(){67var p1 = document.getElementsByTagName("ul");68 p1[0].className = "bar4";69 }7071function ch5(){72var p1 = document.getElementsByTagName("ul");73 p1[0].className = "bar5";74 }7576function ch6(){77var p1 = document.getElementsByTagName("ul");78 p1[0].className = "bar6";79 }80</script>81</body>82</html>。
竖型导航栏的制作
1、新建html文件index.html,使用文本编辑器进行编辑。
如下图:
2、在<body>内开始编写导航栏的html代码。
使用ul标签建立一个无序列表<ul class="nav">
<li>Home</li>
<li>Hidden Cameras</li>
<li>CCTV Cameras</li>
<li>Employee</li>
<li>Helpful Hints</li>
<li>F.A.Q</li>
<li>About Us</li>
<li>Contact US</li>
</ul>
效果如下图:
此时的列表还不能点击进行导航,我们使用<a>标签进行超链接:
<ul class="nav">
<li><a href="">Home</a></li>
<li><a href="">Hidden Cameras</a></li>
<li><a href="">CCTV Cameras</a></li>
<li><a href="">Employee</a></li>
<li><a href="">Helpful Hints</a></li>
<li><a href="">F.A.Q</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact US</a></li>
</ul>
效果如下图:
3、为了使得导航栏更加美观我用CSS进行样式设计,此时应在<head>标签里进
行引用。
<head>
<link href="./style.css" rel="stylesheet" type="text/css" /> </head>
4、新建CSS文件使用文本编辑器进行编辑
A.应为html页面默认有内、外边距。
为方便我们进行样式设计,把所有标
签默认的内、外边距设为0px。
*{
margin:0px;
padding:0px;
}
B.为了使导航栏在页面中间我们通过设置列表所在的<div>标签的属性实现
#main
{
width:900px;
margin:50px auto;
position:relative
}
C.为了导航栏突出于页面我们对列表标签整体进行设计
.nav {
height:320px;
width:150px;
background:#90BADE;
border-right:1px solid #333;
margin:0 auto;
}
效果如下图:
C.为了去掉列表项中默认的项目标示我们对项目标签进行设置
.nav li {
list-style:none;
width:150px;
border-bottom: 1px solid #90bade;
}
效果如下图:
E.为了实现标签的块状显示我们对<a>进行设置.nav li a{
display:block;
height:36px;
color:#FFF;
width:120px;
*width:150px;
line-height:36px;
background-color:#2175BC;
border-right:10px solid #508FC4;
border-left:10px solid #1958B7;
padding-left:10px;
text-decoration:none;
font-size:13px;
border-bottom:1px solid #555555;
}
效果如下图:
F.为了使鼠标表在项目上滑过时有突出显示我对<a>标签的hover属性进行设置。
.nav li a:hover{
background-color:#508FC4;
border-right:10px solid #5AA1E1;
border-left:10px solid #1B65D2;
}
效果如下图:。