竖型导航栏的制作
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
竖型导航栏的制作
1、新建html文件index.html，使用文本编辑器进行编辑。如下图：
2、在
内开始编写导航栏的html代码。使用ul标签建立一个无序列表效果如下图：
此时的列表还不能点击进行导航，我们使用标签进行超链接:
效果如下图：
3、为了使得导航栏更加美观我用CSS进行样式设计，此时应在
标签里进行引用。
4、新建CSS文件使用文本编辑器进行编辑
A.应为html页面默认有内、外边距。为方便我们进行样式设计，把所有标
签默认的内、外边距设为0px。
*{
margin:0px;
padding:0px;
}
B.为了使导航栏在页面中间我们通过设置列表所在的
#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．为了实现标签的块状显示我们对进行设置.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.为了使鼠标表在项目上滑过时有突出显示我对标签的hover属性进行设置。
.nav li a:hover{
background-color:#508FC4;
border-right:10px solid #5AA1E1;
border-left:10px solid #1B65D2;
}
效果如下图：