程序员经验分享-hwhale

前端实战：小实例5——锚点导航

2023-11-17

前言

锚点定位用于网站某一模块的定位，让用户能够通过锚点直接跳到相应模块，从而实现页面内跳转，常在网页内容较长时使用。多个锚点显示可用一个无序列表显示，利用 ul 和 li 标签，在 li 标签中使用 a 标签实现锚点，对应标签用法可查看 HTML常见标签介绍1 和 HTML常见标签介绍2。

实现思路

  1. 使用 div 包住锚点导航栏，在其中放置列表 ul 和 li；
  2. 在 li 标签中放置 a 标签，href 属性设置为 #锚点值 使其指向锚点处；
  3. 设置多个 div 模块模拟网页内容；
  4. 在 div 模块中设置 id 或在 div 模块中添加 a 标签并设置 name 属性，使属性值与对应锚点值一致；
    a 标签的 name 属性在 HTML5 中不支持

HTML + CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除所有元素的默认外边距和内边距 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 锚点导航栏列表样式 */
        .anchor ul {
            list-style: none;   /* 去除列表符号 */
            position: fixed;    /* 固定定位，固定在浏览器当前窗口 */
            right: 150px;
            bottom: 200px;
        }
        
        /* 锚点导航栏列表项样式 */
        .anchor ul li {
            width: 100px;
            height: 50px;
            line-height: 50px;  /* 设置行高，文本垂直居中 */
            text-align: center;  /* 文本水平居中 */
            border: 1px solid black;  /* 设置边距 */
        }

        /* 锚点导航栏列表项超链接样式 */
        .anchor ul li a{
            text-decoration: none;  /* 去除下划线 */
        }

        /* 模块样式 */
        .box {
            /* 模拟实际内容 */
            height: 600px;
            width: 900px;
            background-color: paleturquoise;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 锚点导航栏 -->
    <div class="anchor">
        <ul>
            <li><a href="#box1">模块一</a></li>
            <li><a href="#box2">模块二</a></li>
            <li><a href="#box3">模块三</a></li>
            <li><a href="#box4">模块四</a></li>
        </ul>
    </div>
    <!-- 模块 -->
    <div class="box" id="box1">模块一</div>
    <div class="box" id="box2">模块二</div>
    <div class="box" id="box3">模块三</div>
    <div class="box" id="box4">模块四</div>
</body>
</html>

实现效果

锚点导航栏

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

小实例

前端

html

css

前端实战：小实例5——锚点导航 的相关文章

随机推荐

  • Python运行不了，无法运行Python解决办法（超全面）

    前言 Python是一门广泛使用的编程语言 但在使用过程中 我们可能会遇到无法运行Python的问题 本文将提供一个超全面的解决方案 帮助读者排除常见的Python运行问题 并提供相应的解决办法 帮助Python学习 以下所有学习资料文末免

  • tensorflow安装教程（一般使用国内的清华源进行安装）

    注 安装tensorflow numpy这些源 记得用国内的清华镜像源 国外的源由于网络延迟无法安装 1 国内安装tensorflow的命令 pip install index url https pypi douban com simpl

  • 法拉克机器人自动怎么调_发那科机器人的简单设置你知道吗

    发那科机器人使用后台逻辑时 可以在后台执行只包含对应后台逻辑指令的TP程序 程序从 初到 后被反复执行 该执行不受急停 暂停 报警的影响 设定后台逻辑的步骤非常简单 1 按下MENU键 2 选择SETUP 3 选择BG LOGIC 进入如下

  • 洛谷P5731——蛇形方阵（c++）

    题目描述 给出一个不大于 9 的正整数 n 输出 n n 的蛇形方阵 从左上角填上 1 开始 顺时针方向依次填入数字 如同样例所示 注意每个数字有都会占用 3 个字符 前面使用空格补齐 输入格式 输入一个正整数 n 含义如题所述 输出格式

  • Qt 设置窗口的背景图片

    Qt 设置窗口的背景图片 一 给Qt窗口设置背景图片 mainwindow cpp 设置背景图片 path 图片路径 void MainWindow setBackgroundImage QString path QPixmap pixma

  • 零基础学习Vue: 第38课 Vue单页面使用router-link实现页面跳转小案例：

    零基础学习Vue 第38课 Vue单页面使用router link实现页面跳转小案例 实现效果如下 以下是所有代码

  • Ubuntu操作遇到的报错解决方法汇总（持续更新）

    1 在anaconda中创建了虚拟环境并安装了pytorch 但是编译过程中仍然报没有torch的错误 CMake Error at crawler crane crane tutorials CMakeLists txt 23 find

  • Form表单提交数据的几种方式

    1 submit提交 在form标签中添加Action 提交的地址 和method post 且有一个submit按钮

  • conda安装OpenCV

    安装参考 错误方法conda install channel https conda anaconda org menpo opencv3 C Users 15761 gt conda install channel https conda

  • Cplex求解QCP非线性规划

    import ilog concert import ilog cplex public class QCPex1 public static void main String args try IloCplex cplex new Ilo

  • Environment variable CLASSPATH not set!

    hdfs 问题 Environment variable CLASSPATH not set getJNIEnv getGlobalJNIEnv failed WARNING Logging before InitGoogleLogging

  • is not eligible for getting processed by all BeanPostProcessors

    BeanPostProcessor是控制Bean初始化开始和初始化结束的接口 换句话说实现BeanPostProcessor的bean会在其他bean初始化之前完成 BeanPostProcessor会通过接口方法检查其他类型的Bean并做

  • Visio 2013绘制时序图

    为什么要绘制时序图 我们编码的时候 知道有的用例的业务逻辑按照比较确定的时间先后顺序进行展开 这时候 我们就需要知道我们设计的系统中的不同类之间传递消息 可以认为是不同对象函数间的调用 要按照怎么样的顺序 传递什么消息 返回什么消息 这时候

  • Altium designer 原理图转换为pcb时出现的 unknown pin 和 failed to add class member

    网上有很多方法 大部分都是让直接新建一个pcb文件 这显然太不现实了 上述错误可以看出 unknown pin 的错误是在add pin to net的时候发生的 failed to add class member 的错误实在add to

  • 开源库TinyXML2简介及使用

    TinyXML2是一个开源 简单 小巧 高效的C XML解析器 它只有一个 h文件和一个 cpp文件组成 可以轻松集成到其它程序中 它解析XML文档并从中构建可以读取 修改和保存的文档对象模型 Document Object Model D

  • matplotlib绘制折线图

    matplotlib绘制折线图 这阳春三月的邵大白在家过的什么日子 幽栖地僻经过少 花径不曾缘客扫 开个逗b号纪念下这段闭关的时光 万一他以后就变成一个数据分析的大v号了来 好了邵大白课堂开课了 折线图绘制 咱先画个图 载慢悠的加东西 导包

  • Java基础（十三）：枚举、注解

    文章目录 一 设置 author标签 二 枚举 enum 一 枚举的两种实现方式 二 enum常用方法 三 注解 一 设置 author标签 设置 author等标签 以后每次创建一个类 自动带着作者信息 二 枚举 enum 枚举表示一组常

  • git提交规范

    1 新功能用add 2 改bug用fix 3 如果使用禅道或者jira 在add或fix后面加上 编号如 add 3563 gt 1 指标名称修改

  • Android Studio解决gradle时下载资源过慢问题

    替换镜像下载方式 打开Android Studio项目中的build gradle文件 找到以下位置 修改jcenter地址为 https maven aliyun com repository jcenter 示例 buildscript

  • 前端实战：小实例5——锚点导航

    前言 锚点定位用于网站某一模块的定位 让用户能够通过锚点直接跳到相应模块 从而实现页面内跳转 常在网页内容较长时使用 多个锚点显示可用一个无序列表显示 利用 ul 和 li 标签 在 li 标签中使用 a 标签实现锚点 对应标签用法可查看

热门标签