文档章节

HTML5之锚链接

Aaron_DMC
 Aaron_DMC
发布于 2016/11/29 15:14
字数 1047
阅读 48
收藏 0

锚链接一般用于本页面的跳转,比如页面太长,到了尾部要瞬间到顶部,就可以用锚链接。

如下图所示:

数码 男装 女装 电影 音乐会 通信 阅读 美容 旅游”  就是一些锚链接。

示例:点击"数码 男装 女装 电影 音乐会 通信 阅读 美容 旅游"等就能跳转到相关内容,就像船放的一个锚。

代码实现如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>HTML5之锚链接 --- 测试</title>
		<meta name="generator" content="editplus" />
		<meta name="author" content="" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<style type="text/css">
			*{margin:0px;padding:0px;}
			html,body{family:"微软雅黑";font-size:12px;color:#666;}
			ul,li{list-style-type:none;}
			a{text-decoration:none;}
			#nav{width:100%;height:100px;background:#DD2727;}
			#nav ul{width:1200px;height:100px;margin:0px auto;}
			#nav ul li{float:left;width:100px;height:50px;margin-top:50px;}
			#nav ul li a{font-size:20px;color:#fff;}

			#digtal{width:100%;height:500px;background:#ff9933;}
			#male{width:100%;height:500px;background:#ccff66;}
			#female{width:100%;height:500px;background:#ff00cc;}
			#movie{width:100%;height:500px;background:#99ff00;}
			#music{width:100%;height:500px;background:#006600;}
			#cmcc{width:100%;height:500px;background:#0000ff;}
			#reading{width:100%;height:500px;background:#ff0000;}
			#beautiful{width:100%;height:500px;background:#ff00cc;}
			#travel{width:100%;height:500px;background:#339900;}

			.box{width:1200px;margin:0px auto;}
			.box h1{background:#000;color:#fff;line-height:50px;}
		</style>

	</head>
	<body>
		<div id="nav">
			<ul>
				<li><a href="#digtal">数码</a></li>
				<li><a href="#male">男装</a></li>
				<li><a href="#female">女装</a></li>
				<li><a href="#movie">电影</a></li>
				<li><a href="#music">音乐会</a></li>
				<li><a href="#cmcc">通信</a></li>
				<li><a href="#reading">阅读</a></li>
				<li><a href="#beautiful">美容</a></li>
				<li><a href="#travel">旅游</a></li>
			</ul>
		</div>

		<div class="box">
			<div id="digtal">
				<h1>数码</h1>
			</div>
			<div id="male">
				<h1>男装</h1>
			</div>
			<div id="female">
				<h1>女装</h1>
			</div>
			<div id="movie">
				<h1>电影</h1>
			</div>
			<div id="music">
				<h1>音乐会</h1>
			</div>
			<div id="cmcc">
				<h1>通信</h1>
			</div>
			<div id="reading">
				<h1>阅读</h1>
			</div>
			<div id="beautiful">
				<h1>美容</h1>
			</div>
			<div id="travel">
				<h1>旅游</h1>
			</div>
		</div>
	</body>

</html>

 

 

第二种: 

  1. 首先,在 HTML 文档中对锚进行命名(创建一个书签):<a href="#tips">锚链接</a>

  2. 然后,在同一个文档中创建指向该锚的链接:<a name="tips">锚链接</a>

  name 属性规定锚(anchor)的名称。

  可以使用 name 属性创建 HTML 页面中的书签。

  书签不会以任何特殊方式显示。

  当使用命名锚(named anchors)时,可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样就无需不停地滚动页面来寻找需要的信息了。

  提示:当点击“到下面”后,焦点就会跳到”下面“处,如果想让效果明显,可以在上面代码片断之间加上。

代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>HTML5之锚链接 --- 测试</title>
		<meta name="generator" content="editplus" />
		<meta name="author" content="" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<style type="text/css">
			*{margin:0px;padding:0px;}
			html,body{family:"微软雅黑";font-size:12px;color:#666;}
			ul,li{list-style-type:none;}
			a{text-decoration:none;}
			#nav{width:100%;height:100px;background:#DD2727;}
			#nav ul{width:1200px;height:100px;margin:0px auto;}
			#nav ul li{float:left;width:100px;height:50px;margin-top:50px;}
			#nav ul li a{font-size:20px;color:#fff;}

			#digtal{width:100%;height:500px;background:#ff9933;}
			#male{width:100%;height:500px;background:#ccff66;}
			#female{width:100%;height:500px;background:#ff00cc;}
			#movie{width:100%;height:500px;background:#99ff00;}
			#music{width:100%;height:500px;background:#006600;}
			#cmcc{width:100%;height:500px;background:#0000ff;}
			#reading{width:100%;height:500px;background:#ff0000;}
			#beautiful{width:100%;height:500px;background:#ff00cc;}
			#travel{width:100%;height:500px;background:#339900;}

			.box{width:1200px;margin:0px auto;}
			.box h1{background:#000;color:#fff;line-height:50px;}
		</style>

	</head>
	<body>
		<div id="nav">
			<ul>
				<li><a href="#digtal">数码</a></li>
				<li><a href="#male">男装</a></li>
				<li><a href="#female">女装</a></li>
				<li><a href="#movie">电影</a></li>
				<li><a href="#music">音乐会</a></li>
				<li><a href="#cmcc">通信</a></li>
				<li><a href="#reading">阅读</a></li>
				<li><a href="#beautiful">美容</a></li>
				<li><a href="#travel">旅游</a></li>
			
				<!--  第二种方式  -->
				<li><a href="#abc">链接标题</a></li>
			</ul>
		</div>

		<div class="box">
			<div id="digtal">
				<h1>数码</h1>
			</div>
			<div id="male">
				<h1>男装</h1>
			</div>
			<div id="female">
				<h1>女装</h1>
			</div>
			<div id="movie">
				<h1>电影</h1>
			</div>
			<div id="music">
				<h1>音乐会</h1>
			</div>
			<div id="cmcc">
				<h1>通信</h1>
			</div>
			<div id="reading">
				<h1>阅读</h1>
			</div>
			<div id="beautiful">
				<h1>美容</h1>
			</div>
			<div id="travel">
				<h1>旅游</h1>
			</div>


			<!--  第二种方式  -->
			<div id="anchor">
				<a name="abc">链接标题</a>
			</div>
			
		</div>
	</body>

</html>

 

© 著作权归作者所有

Aaron_DMC
粉丝 8
博文 65
码字总数 73707
作品 0
上海
后端工程师
私信 提问
深入简出 好程序员教你HTML5开发基本常识

1.什么是HTML5开发工程师? HTML5开发工程师是协调HTML5设计师、后端程序员实现网站页面或程序界面,优化交互体验的一个职位。 2.HTML5开发工程师需要掌握哪些职业技能?   市场非常需要精通...

好程序员IT
06/12
27
0
扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂
2018/06/01
0
0
W3C发布HTML5官方Logo

W3C(World-Wide Web Consortium,万维网联盟)在今天放出了HTML5的官方新Logo,并对最近的网络开发技术做出了新的解释。HTML5在过去一年左右的时间里 成为大家争论的焦点。在Google的支持以...

mallon
2011/01/19
756
3
html5 使用window.history进行前端mvc跳转

//主要行为和方法如下: history.pushState(), history.replaceState() window.onpopstate事件 使用方式 if (!!(window.history && history.pushState)) { // 支持History API var stateOb......

IamOkay
2014/11/29
3.5K
0
类“来钱道”html5 app开发

【需求描述】 开发类似“来钱道”app的html5 版本。 主要是发布任务,接任务,审核任务,充值提现,邀请好友,上线分享收益 等。 【技术要求】 要求用thinkphp框,推荐采用mui、hui、zui 等h...

冯京宝
2017/11/13
6
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
6
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
6
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部