您的位置：首页 > Web前端 > CSS

CSS完成一个带跳转功能的导航栏页面(修改之前代码出现乱码的情况)

2017-02-21 08:57 585 查看
1.右侧的内容，设置每个标题的id

<div class="right">
<h2 id="section-1">Html介绍</h2>
<h2 id="section-2">文件标签</h2>
<h2 id="section-3">排版标签</h2>
<h2 id="section-4">块标签</h2>
<h2 id="section-5">字体标签</h2>
</div>


2.左侧导航栏

让每个a标签链接到对应的文档id，实现点击标签跳转到对应的文档内容

<ul class="tab">
<li><a href="#section-1">Html介绍</a></li>
<li><a href="#section-2">文件标签</a></li>
<li><a href="#section-3">排版标签</a></li>
<li><a href="#section-4">块标签</a></li>
<li><a href="#section-5">字体标签</a></li>
<li><a href="#section-6">清单标签</a></li>
<li><a href="#section-7">图形标签</a></li>
<li><a href="#section-8">连接标签</a></li>
<li><a href="#section-9">表格标签</a></li>
</ul>


3.CSS实现导航栏相对浏览器固定

<script type="text/css">
.left{
width: 15%;
position: fixed;/*设置左侧导航栏相对于浏览器窗口固定*/
left: 8%;
}
</script>


4.效果图展示





5.全部代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html学习笔记</title>
<style type="text/css">
body{
background-color: #FFFAFA;
}
.top{
width: 80%;
height: 200px;
text-align: center;/*设置文本居中*/
line-height: 200px;/*将文本高度设置为和容器一样的高度，使文本垂直居中*/
margin: 0 auto;/*设置div容器居中*/
background-color: #E6E6FA;
}
.left{
width: 15%;
position: fixed;/*设置左侧导航栏相对于浏览器窗口固定*/
left: 8%;
}
.right{
width: 65%;
float: right;
margin-right: 10%;
}
ul li{
/*ul是块级元素，可以设置宽度和高度*/
width: 150px;/*设置li的宽度*/
height: 25px;
line-height: 25px;/*将文本高度设置为和容器一样的高度，使文本上下距离一样*/
padding: 5px;
text-align: center;/*文字居中*/
list-style: none;/*去掉列表项前面的圆黑点*/
border:1px solid #DCDCDC;/*设置边框宽度为1px,实线,颜色为darkgray*/
}
a{
text-decoration: none;/*去除a标签内容的下划线*/
color: #1E90FF;
}
li:hover{
background-color: #F5F5F5;
}
a:active{
color: #AFEEEE;
}
</style>
</head>
<body>
<div class="top">
<h1>HTML学习笔记</h1>
</div>
<div id="content">
<div class="left">
<ul class="tab">
<li><a href="#section-1">Html介绍</a></li>
<li><a href="#section-2">文件标签</a></li>
<li><a href="#section-3">排版标签</a></li>
<li><a href="#section-4">块标签</a></li>
<li><a href="#section-5">字体标签</a></li>
<li><a href="#section-6">清单标签</a></li>
<li><a href="#section-7">图形标签</a></li>
<li><a href="#section-8">连接标签</a></li>
<li><a href="#section-9">表格标签</a></li>
</ul>
</div>
<div class="right">
<h2 id="section-1">Html介绍</h2>
<br />
<br />
<br />
<br />
<br />
<br />
<hr>
<h2 id="section-2">文件标签</h2>
<br />
<br />
<br />
<br />
<br />
<br />
<hr>
<h2 id="section-3">排版标签</h2>
<br />
<br />
<br />
<br />
<hr>
<h2 id="section-4">块标签</h2>
<br />
<br />
<br />
<br />
<hr>
<h2 id="section-5">字体标签</h2>
<br />
<br />
<br />
<br />
<hr>
<h2 id="section-6">清单标签</h2>
<br />
<br />
<br />
<br />
<hr>
<h2 id="section-7">图形标签</h2>
<br />
<br />
<br />
<br />
<hr>
<h2 id="section-8">连接标签</h2>
<br />
<br />
<br />
<br />
<hr>
<h2 id="section-9">表格标签</h2>
<br />
<br />
<br />
<br />
<hr>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css html 导航
相关文章推荐
新的分享
章节导航