简单的CSS在页面中点击超链接跳转新的页面

最新推荐文章于 2024-04-26 16:34:13 发布
最新推荐文章于 2024-04-26 16:34:13 发布
阅读量5.3k 收藏 13
点赞数 5
文章标签： css html5 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53177153/article/details/129150419
版权

点击超链接后，重新打开一个新的网页，不是在原本的网页进行跳转。

打开创建的网页

  a{
            /* 去除超链接的下划线 */
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>
        点击一下试试
        <br>
        <!--     跳转到 百度网址-->
        <a href="http://www.baidu.com" target="_blank">超链接，在新的页面中打开百度。</a>
    </div>

上面是参考代码，主要是添加 target="_blank

给超链接添加target="_blank"属性

就可以跳转到新的一个页面。

其中target=还有其他属性值。其它用法不多，了解即可。

Target属性self的作用

作用：这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。（在相同的框架中打开被链接文档）

用法：<a herf=“http://www.baidu.com” target=”_self”>跳转</a>

Target属性parent的作用

作用：这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。（在父框架集中打开被链接文档）

用法：<a herf=”http://www.baidu.com” target=”_parent”>跳转</a>

Target属性top的作用

作用：这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口（在整个窗口中打开被链接文档）

用法：<a herf=”http://www.baidu.com” target=”_top>跳转</a>

AAAAA王先生
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
广东茂名-htmlcss静态页面，共三页
02-21
前端计算机课程期末作业，平时作业，小组作业，该资源包括了 1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分； 2. 所有页面相互超链接，可到三级页面，有5-10个页面组成； 3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术； 4. 菜单美观、醒目，二级菜单可正常弹出与跳转； 5. 要有JS特效，如定时切换和手动切换图片新闻； 6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用； 7. 页面清爽、美观、大方，不雷同。航栏（最好可下拉）、中间内容板块、页脚四大部分； 2. 所有页面相互超链接，可到三级页面，有5-10个页面组成； 3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术； 4. 菜单美观、醒目，二级菜单可正常弹出与跳转； 5. 要有JS特效，如定时切换和手动切换图片新闻；航栏（最好可下拉）、中间内容板块、页脚四大部分； 2. 所有页面相互超链接，可到三级页面，有5-10个页面组成； 3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术； 4. 菜单美观、醒目，二级菜单可正
Java 实现Excel文档添加超链接的代码
08-24
超链接即内容链接，通过给特定对象设置超链接，可实现载体与特定网页、文件、邮件、网络等的链接，点击链接载体可打开链接目标，在文档处理中是一种比较常用的功能，本文将介绍通过Java程序给Excel文档添加超链接的方法，感兴趣的朋友一起看看吧
个人简历静态页面，web期末作业，课堂作业，网页制作
02-21
1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分； 2. 所有页面相互超链接，可到三级页面，有5-10个页面组成； 3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术； 4. 菜单美观、醒目，二级菜单可正常弹出与跳转； 5. 要有JS特效，如定时切换和手动切换图片新闻； 6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用； 7. 页面清爽、美观、大方，不雷同1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分； 2. 所有页面相互超链接，可到三级页面，有5-10个页面组成； 3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术； 4. 菜单美观、醒目，二级菜单可正常弹出与跳转； 5. 要有JS特效，如定时切换和手动切换图片新闻； 6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用； 7. 页面清爽、美观、大方，不雷同1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分； 2. 所有页面相互超链接，可到三级页面，有5-10个页面组成
Android实现WebView点击拦截跳转原生
01-03
1. 首先设置Web视图 webview.setWebViewClient(new MyWebViewClient()); webview1.setWebViewClient(new MyWebViewClient()); 2. 拦截点击的链接，跳转到对应的页面 // 监听 所有点击的链接，如果拦截到我们需要的，就跳转到相对应的页面。 private class MyWebViewClient extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, Stri
HTML中的超链接标签使用教程
12-08
网站的各个HTML文档通过超链接的方式相互连接在一起，形成一个连贯的网站。用户可以通过点击超链接跳转到自己希望浏览的页面中。因此超链接在任何一个网站中都可以看到，是串联网站形成整体的核心组成部分。 锚点的布置HTML超链接以标签作为锚点进行触发，锚点需要有一个载体，而这个载体可以是一个文字、一个词、或者一句话，也可以是图像或者某个形状。当鼠标移动到带有锚点的载体上时，鼠标会变成一个小手的状态，示意用户可以进行点击，用户点击这个锚点后会跳转到这个标签中href对应的地址上。 跳转属性的用法在HTML链接中，使用 href 属性 可以创建指向另一个文档的链接，通常用于页面跳转。这个很常
JS的location.href跳出框架打开新页面的方法
10-25
登录页面在框架内打开，想让它直接跳出框架打开（这里不是打开新窗口），终于在网上找到了办法，下面分享给大家
HTML链接在当前页面跳转：target属性
259的博客
11-21 1209
HTML链接在当前页面跳转：target属性，_sele / _blank
html+css实战23-综合路由-跳转其他页面
geyaoisnice的博客
06-02 429
<!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>基本.
frameset分割页面后，点击其中一个页面，全部分割页面集体跳转，而不是当前部分跳转
zk_1325572803的博客
09-20 1218
例如：frameset框架,在框架上一个页面有退出登陆的链接,现在点击这个链接使整个frameset跳到新页面,只是有退出登陆链接的那个页面跳转到了新页面.看下边这段代码：<frameset cols="*,33%" frameborder="NO" border="0" framespacing="0"> <frame src="" name="leftFrame" scrolling=
CSS实现跳转到页面的目标位置
Sumbo_Z的博客
04-26 3633
CSS实现跳转到页面的目标位置
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
12-29
在原页面一张图片上添加了一个链接，链接中有中文，于是出现下面的情况：   解决办法是在tomcat的server.xml文件的中加入URIEncoding=”utf-8”，如下： <Connector URIEncoding=utf-8 connectionTimeout=20000 port=8080 protocol=HTTP/1.1 redirectPort=8443/> 页面跳转相关阅读： JavaScript中通过提示框跳转页面的方法 基于JS实现移动端访问PC端页面时跳转到对应的移动端网页 JS在一定时间内跳转页面及各种刷新页面的实现方法 以上所述是小编给大家
wb养生设计.rar，有登录页面，不过没有导入数据库
12-13
这是我的wb大作业，初学者可用：制作一个网站（包含一个主页，至少五个子页，注意是网站，另外注册和登录页面不算子页，还有主页不可以使用浮动框架来做）；网站主题科学养身，一人一份，制作一个主题明确、内容完整、结构规范合理的静态网站。要求选取内容健康、正能量，具有时代气息。网站提供的信息应与网站主题相符合；每个页面都要求有导航条和页脚（写上版权）信息，使用外部CSS统一网站页面的样式；使用DIV+CSS布局，网页中需要有注册用户的表单（表单需要验证），有文字、图像、多媒体、超链接等，网站达到图文并茂的效果。网站要有自己设计制作的logo，（如果是下载图片请自己处理后使用，不可以直接使用商业网站logo）；要求使用一定量的JavaScript脚本，使得网页具有一定的交互功能。要求首页和子页之间能够相互跳转。页面中不允许有链接错误，图片不显示错误。网站文件管理有序，无多余文件和文件夹，图片放在image文件夹中。页面首页有滚动播出的日期与时间。效果如：今天是2021年11月11日上午10点58分。（滚动效果自定义）
中继器制作左侧二级菜单并跳转对应页面.rp
06-09
①中继器制作左侧导航菜单，每个一级菜单下的二级菜单数量不同； ②每个二级菜单都能跳转到不同的页面； ③需axure9打开
work(旅游).rar旅游网站静态页面，html+css，web课堂期末作品作业
02-21
2. 所有页面相互超链接，可到三级页面，有5-10个页面组成； 3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术； 4. 菜单美观、醒目，二级菜单可正常弹出与跳转； 5. 要有JS特效，如定时切换和手动切换...
work（考试）（心理）(修改).rar前端静态页面制作，web课堂作业，期末考试页面制作
02-21
2. 所有页面相互超链接，可到三级页面，有5-10个页面组成； 3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术； 4. 菜单美观、醒目，二级菜单可正常弹出与跳转； 5. 要有JS特效，如定时切换和手动切换...
CSS 网页布局（详解网页的布局构造）
百赢出品，必属精品
04-26 1127
网页布局是将网页内容按照一定的结构和规则进行排版和组织，使得页面具有良好的结构和易读性。它涉及到页面元素的位置、大小、间距等方面的设计。头部区域、菜单导航区域、内容区域、底部区域。了解网格系统的概念和作用，掌握如何设计和实现网格布局，以及如何利用网格系统进行页面排版和元素定位。理解响应式设计的原理和重要性，掌握使用媒体查询、流式布局等技术实现网页在不同设备上的自适应显示。熟悉CSS中的各种布局模型，包括常规文档流、浮动布局、定位布局（相对定位、绝对定位、固定定位）、Flexbox布局和栅格布局等。
Taro +vue3 中实现全局颜色css变量的设置和使用
最新发布
lele66688888的博客
04-26 398
在其他的web端框架 以及uni-app 等移动端框架中 我感觉也是这样使用的。在行内使用 直接是 字符串就行了 不用使用模板字符串 变量 因为本来就不是变量。这个主题色 一般可以这样总定义的 方便我们随时可以 修改前端的主题颜色。当我们现在需要弄一个随时修改的页面颜色主题色。我们在这个里面 设置一个root 全局样式。这样在全局我们就可以使用这个css 变量。一般有一个app.less 文件。我使用的是 Taro 框架。行内中书写 全局变量css。我们直接把颜色 替换为。
vue echarts折线图 折线堆积图和折线面积图
Z18834071903的博客
04-26 329
vue echarts折线图 折线堆积图和折线面积图
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1001
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
如何在点击第一个css盒子里的超链接实现在第二个css盒子中显示超链接jsp界面
05-26
要在点击第一个CSS盒子中的超链接时在第二个CSS盒子中显示相应的JSP页面，你可以使用JavaScript来实现。 首先，在第一个CSS盒子中的超链接上添加一个`onclick`事件，如下所示： ```html <div class="box"> <a href="#" onclick="loadPage('page1.jsp'); return false;">跳转到第一个JSP页面</a> </div> ``` 在这里，`onclick`事件调用了一个名为`loadPage()`的JavaScript函数，并将要加载的JSP页面的名称作为参数传递给该函数。`return false;`语句可以防止链接的默认行为，即跳转到页面顶部。 接下来，在第二个CSS盒子中添加一个`<div>`元素，用于显示要加载的JSP页面的内容，如下所示： ```html <div class="box"> <div id="pageContent"></div> </div> ``` 在这里，我们添加了一个`id`为`pageContent`的`<div>`元素，用于显示要加载的JSP页面的内容。 最后，在JavaScript中定义`loadPage()`函数，如下所示： ```javascript function loadPage(pageName) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById("pageContent").innerHTML = xhr.responseText; } }; xhr.open("GET", pageName, true); xhr.send(); } ``` `loadPage()`函数使用XMLHttpRequest对象来异步加载指定的JSP页面。当请求完成时，它将通过`document.getElementById()`方法将页面的内容添加到`<div>`元素中。 请注意，`XMLHttpRequest`对象是用于异步加载网页内容的标准方式。在旧版浏览器中，你可能需要使用`ActiveXObject`对象来实现异步加载。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值