HTML5之锚链接

最新推荐文章于 2022-10-26 11:51:39 发布

weixin_33800463

最新推荐文章于 2022-10-26 11:51:39 发布

阅读量714

点赞数

文章标签： python xhtml

原文链接：https://my.oschina.net/AaronDMC/blog/796158

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

如下图所示：

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

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

代码实现如下：

<!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>

第二种：

首先，在 HTML 文档中对锚进行命名（创建一个书签）：<a href="#tips">锚链接</a>
然后，在同一个文档中创建指向该锚的链接：<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>

转载于:https://my.oschina.net/AaronDMC/blog/796158