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

最新推荐文章于 2022-03-17 23:25:14 发布

Java_jfei

最新推荐文章于 2022-03-17 23:25:14 发布

阅读量1.3k

点赞数

分类专栏： Web前端学习文章标签： css html 导航

本文链接：https://blog.csdn.net/Java_jfei/article/details/56273139

版权

本文介绍如何使用CSS修复之前代码中的乱码问题，并实现一个带有跳转功能的导航栏。通过为每个标题设置id，利用HTML的a标签链接到相应文档id，实现了点击导航栏跳转到对应内容。同时，CSS被用来使导航栏在浏览器中保持固定位置。文章附带了最终效果的展示和全部代码。

摘要由CSDN通过智能技术生成

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