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

最新推荐文章于 2023-03-23 14:10:47 发布

原创

最新推荐文章于 2023-03-23 14:10:47 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #导航

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

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