垂直导航栏
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
font-weight:bold;text-decoration:underline;background:#F00;}
a:hover{color:#FFF;
步骤六:将链接以块级元素显示
在a 的样式定义中增加display:block，使链接以块级元素显示，这时菜单链接的背景色填满整个li的宽度。
修改CSS如下：
.menunav a{
display:block；
text-align:center;/*将菜单文字居中*/
height:30px; /*用height:30px增加背景的高度；*/
}
.menunav li{
float:left;
width:100px;
background:#CCC;
margin-left:3px; /*3px使每个菜单之间空3px距离*/
line-height:30px; /*定义行高，使链接文字纵向居中*/
}
因篇幅问题不能全部显示，请点此查看更多更全内容
Copyright © 2019- igat.cn 版权所有 赣ICP备2024042791号-1
违法及侵权请联系：TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务