《CSS导栏创建操作步骤.doc》由会员分享，可在线阅读，更多相关《CSS导栏创建操作步骤.doc（5页珍藏版）》请在金锄头文库上搜索。
1、垂直导航栏1. 创建名为navmenu.css的样式表文件2. 创建名为nav.html的HTML文件3. 在名为nav.html的HTML文件中通过属性 样式 附加样式表,导入名为navmenu.css的样式表文件4. 创建新样式如下:在选择器类型中选择:高级;在名称栏中输入:#navmenu定位设置:position: absolute;width: 150px;left: 25px;top: 50px;5. 创建列表和标签在名为nav.html的HTML文件中,插入标签和项目列表,并作相关的链接如下: 首页 个人简历 我的能力 联系我 6. 创建导航栏样式/*为所有的列表项定义字体外形和
2、大小，删除标准项目符号，并清除列表中的空白和填充*/#navmenu ul font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; margin: 0px; padding: 0px; border: 1px solid #990000; list-style-type: none;/*保证所出现底部的空白用于分隔每个列表项，两项之间为2px*/#navmenu li margin-bottom: 2px;/*将链接的激活区域扩展到一个块并添加背景图像、宽度和边框*/#nav
3、menu a background-image: url(images/listnav_out.jpg); display: block; width: 140px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 5px; border: 1px solid #cc9900;/*当按钮处于标准或已按状态时定义其文本外观，制定一种特别的颜色并清除连接的下划线,此项定义在标签#navmenu 中正常链接、已访问链接的样式*/#navmenu a:link,#navmenu a:visited col
4、or: #993300; text-decoration: none;/*在跳转状态中交换图像并改变文本颜色*/#navmenu a:hover color: #ffffff; background-image: url(images/listnav_over.jpg); border: 1px dotted #990000;/*设定所选按钮的外观和感觉，在导航栏中指示当前页面*/#selnavmenu a:link,sel#navmenu a:visited,#selnavmenu a:hover color: #ffffff; background-image: url(images/li
5、stnav_over.jpg); border: 1px dotted #990000;水平导航步骤一:创建名为:menunav.html文件，创建一个项目列表（文本列表 项目列表 学生信息 学费信息 报到信息 就业信息效果如下： 学生信息 学费信息 报到信息 就业信息 步骤二:隐藏li的默认样式定义CSS如下:将菜单置入中，如下： 学生信息 学费信息 报到信息 就业信息 效果如下：学生信息学费信息报到信息就业信息步骤三:将菜单变成横向定义CSS如下:.menunav lifloat:left;效果如下：学生信息学费信息报到信息就业信息 步骤四:调整宽度在CSS中添加定义width:100px
6、, 修改后CSS如下：.menunav lifloat:left;width:100px;效果如下：学生信息 学费信息 报到信息 就业信息 步骤五:设置基本链接效果设置链接的CSS如下：.menunav a:linkcolor:#666;background:#CCC;text-decoration:none;.menunav a:visitedcolor:#666;text-decoration:underline;.menunav a:hovercolor:#FFF; font-weight:bold;text-decoration:underline;background:#F00;步骤六:将链接以块级元素显示在a的样式定义中增加display:block，使链接以块级元素显示，这时菜单链接的背景色填满整个li的宽度。修改CSS如下：.menunav adisplay:block；text-align:center;/*将菜单文字居中*/ height:30px; /*用height:30px增加背景的高度；*/.menunav lifloat:left; width:100px; background:#CCC; margin-left:3px; /*3px使每个菜单之间空3px距离*/line-height:30px; /*定义行高，使链接文字纵向居中*/
