CSS导航栏创建操作步骤
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
垂直导航栏
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. 创建导航栏样式
/*为所有的列表项定义字体外形和大小，删除标准项目符号，并清除列表中的空白和填充*/
#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;
}
/*将链接的激活区域扩展到一个块并添加背景图像、宽度和边框*/
#navmenu 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 {
color: #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/listnav_over.jpg);
border: 1px dotted #990000;
}
水平导航
步骤一:创建名为:menunav.html文件，创建一个项目列表（文本→列表→项目列表
效果如下：
∙学生信息
∙学费信息
∙报到信息
∙就业信息
步骤二:隐藏li的默认样式
定义CSS如下:
将菜单置入
效果如下：
学生信息
学费信息
报到信息
就业信息
步骤三:将菜单变成横向
定义CSS如下:
.menunav li{
float:left;
}
效果如下：
学生信息学费信息报到信息就业信息
步骤四:调整宽度
在CSS中添加定义width:100px, 修改后CSS如下：
.menunav li{
float:left;
width:100px;
}
效果如下：
学生信息学费信息报到信息就业信息
步骤五:设置基本链接效果
设置链接的CSS如下：
.menunav a:link{color:#666;background:#CCC;text-decoration:none;}
.menunav a:visited{color:#666;text-decoration:underline;}
.menunav a:hover{color:#FFF;
font-weight:bold;text-decoration:underline;background:#F00;}
步骤六:将链接以块级元素显示
在a 的样式定义中增加display:block，使链接以块级元素显示，这时菜单链接的背景色填满整个li的宽度。
修改CSS如下：
.menunav a{
display:block；
text-align:center;/*将菜单文字居中*/
height:30px; /*用height:30px增加背景的高度；*/
}