HTML和CSS实现内部导航（锚链接）

最新推荐文章于 2021-06-09 16:43:32 发布
最新推荐文章于 2021-06-09 16:43:32 发布
阅读量1.5k 收藏 6
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44011306/article/details/106238844
版权
本文展示了如何利用HTML的锚链接和CSS实现内部页面导航。通过实例代码，详细讲解了HTML结构和CSS样式设置，帮助读者理解并掌握内部导航的实现方法。
摘要由CSDN通过智能技术生成

HTML和CSS实现内部导航

效果展示

在这里插入图片描述

代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书签链接</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="mr-cont">
    <div class="mr-top">
        <a id="top">
            <div class="mr-nav">
                <ul>
                    <li><a href="#rongyao">华为荣耀</a></li>
                    <li><a href="#mate8">华为mate8</a></li>
                    <li><a href="#huaweip8">华为p8</a></li>
                    <li><a href="#huawei5c">华为5a</a></li>
                    <li><a href="#huaweig9">华为g9</a></li>
                </ul>
                <img class="mr-banner"src="images/1.jpg"width='945' height="430">
            </div>
        </a>
    </div>
    <div class="mr-txt">
        <h3>&nbsp;位置：<a id="rongyao">华为荣耀</a><a href="#top">>>回到顶部</a></h3>
        <div class="mr-phone rongyao">
            <div class="mr-pic"><img src="images/ry1.jpg" alt=""></div>
            <div class="mr-pic"><img src="images/z5.jpg" alt=""></div>
            <div class="mr-pic"><img src="images/z7.jpg" alt=""></div>
            <div class="mr-pic"><img src="images/ry4.jpg" alt=""></div>
            <div class="mr-pic"><img src="images/ry5.jpg" alt=""></div>
            <div class="mr-pic"><img src="images/ry6.jpg" alt=""></div>
            <div class="mr-pic"><img src="images/ry7.jpg" alt=""></div>
            <div class="mr-pic"><img src="images/ry8.jpg" alt=""></div>
        </div>
        <h3>&nbsp;位
最低0.47元/天 解锁文章
康立志
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML学习（二）链接和导航
carmazhao的专栏
07-30 2636
title属性  xx当鼠标指向了xx这个链接，就会显示出来aaa这个tip 可以定位到页面的某个位置，如下例子： 1.页面内 here! clickme点击页面上的clickme就会转到here！那里 2.不同页面之间的定位跳转 就会跳转到xx.html页面的aaa这个id标签来 target属性 可以指示从哪个frame中打开 关于URL的内容： 1.协议：htt
css 锚点 链接
timebeign的博客
12-12 1838
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
html连接导航
chaojishuaigeli的专栏
11-13 429
URL、超链接   •URL：URL表示资源在网络中的地址，比如 http://127.0.0.1/a.htm、ftp://192.168.88.128/b.zip。还有URI的概念，比URL大，有的类中使用URI这种说法，可以暂时看成和URL一样就行。 •超级链接：<a href="http://www.rupeng.com">如鹏网。 •中还可以嵌套图片，这样
CSS学习：锚点链接
weixin_45981643的博客
06-20 364
[|( BrC’|]
html导航
qq_42049884的博客
09-16 279
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.m...
HTML 链接锚标签及其在SEO中的作用介绍
09-28
在SEO（搜索引擎优化）中，锚标签的运用也十分重要，它不仅对网站的内部链接结构构建起着关键作用，同时也对网站的排名有一定的影响。 锚标签最核心的属性是href属性，通过这个属性可以指定超链接的目标地址。例如...
HTML&CSS2;.zip
09-26
在学习过程中，你可能会遇到以下主题：如何创建和使用内联框架，如何通过CSS设置超链接的样式（包括颜色、下划线、过渡效果等），以及如何利用锚记链接在页面内部建立链接。此外，你还将学习如何将这些元素整合进你...
HTML_导航
白雪
11-17 948
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>样式学习</title> <style> #navigator{ .
导航网站源代码
03-18
这是一款用比较新的排列方式来进行排版的导航网站。下载完软件后，修改好里面的相关链接和文字即可变成你自己的导航网站了。
css实现流程导航效果(三种方法)
12-13
css实现流程导航效果，具体内容如下所示： ::tip 使用纯css线上 流程导航效果。    本文统一采取 flex 布局 ,你也可以采用其他布局实现，核心原理不变 :::   ## 方法一 利用裁剪  该方法IE下不支持 利用裁剪 clip-path: polygon（），直接画出一个三角 唯一一点需要算出大致百分比就可以画出来   <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width">
【CSS】锚点链接的应用
qq_45677671的博客
12-26 503
1. position定位属性 语法：position：static/absolute/relative/fixed/sticky； 说明： static（默认值）： 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。忽略任何top、bottom、left、right声明 absolute（绝对定位）： 相对于父级元素的绝对定位，浮出、脱离文档流，不占据空间，就是我们所说的层，其位置相对于最近的以定位父元素而言的位置，若父元素都没有定位，则以
（7）html链接与导航
mxd
04-16 1405
URL简介： URL即统一资源定位符，用于指定
html导航制作4种链接状态,CSS超链接常见四种状态在控制
weixin_29928877的博客
06-02 364
高级渲染技巧和代码示例 GPU Pro 7下载代码示例 移动设备正呈现着像素越来越高,屏幕尺寸越来越小的发展趋势. 由于像素着色的能耗非常大,因此 DPI 的增加以及移动设备固有的功耗受限环境为降低像素着色成本带来了巨大的压力. MSAA 有 ...利用SHELL脚本实现文件完整性检测程序(1&period;2版更新)一..开发背景 因时势所逼,需要对服务器的文件系统实行监控.虽然linu...
锚链接 特效导航栏
qq_41563226的博客
06-25 388
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;    &
用CSS锚链接实现简单的图片切换
weixin_30314813的博客
08-13 345
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
通过 Frame来实现页面内部导航
php菜鸟技术天地
06-02 671
有什么问题请到<a href='/bbs/forums.php?fid=21'>论坛中发表 区中： --> <a href="javascript:jumpto('http://www.163.com')">网易 | <a href="javascript:jumpto('http://www.sohu.com')">搜狐 | <a href="javascript:jumpto('http
HTML将导航栏设置成超链接,如何设置在html中保留超链接格式但不实现跳转
weixin_32601635的博客
06-09 694
---恢复内容开始---老师布置了一个任务，要求用户登录或者不登录都会有一个主页(home.jsp)，如果登录的话就会跳转至登录界面(login.jsp)，在登录界面中有个验证码，还要求有个和很多登录页面一样的“看不清，换一个”的文字，实现点击“看不清，换一个”实现验证码的刷新。刚开始的时候把index.jsp作为login.jsp来写，然后点击“看不清，换一个”可以实现局部刷新验证码，代码如下看...
HTML教程：在同一文档中创建内部链接
通过学习，你可以理解HTML文档的组织方式，掌握创建锚记和超级链接的方法，并了解HTML语言的功能。 在HTML中，链接到同一文档的某个部分是通过锚记（Anchor）来实现的。锚记使用`<A>`标签配合`NAME`属性来创建。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值