你的位置:首页 > 网页设计

[网页设计]html利用锚点实现定位代码实例

html利用锚点实现定位代码实例:

本章节介绍介绍一下如何利用锚点实现定位,使用锚点实现定位是html固有的功能,当然比较简单,也实现了基本的功能,但是功能相对简单一些,如果想要实现平滑的定位可以参阅jquery实现的点击页面动画方式平滑定位到某元素代码一章节。 下面通过代码实例介绍一下html是如何实现锚点定位的。

代码如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> a{ width:60px; height:20px; background:#F90; font-size:12px; text-align:center; line-height:20px; position:fixed; right:0px; top:50px; cursor:pointer; display:block; text-decoration:none;}#thediv{ width:100%; height:50px; background:#CCC; margin-top:100px;}</style> </head> <body style="height:1000px;"> <a href="#thediv">点击定位</a><div id="thediv"></div></body> </html>

以上代码实现了锚点定位效果,代码非常的简单,将链接a的href属性值设置为要定位元素的id属性值,但是前面要加#。

原文地址是 :http://www.51texiao.cn/HTML5jiaocheng/2015/0615/4385.html

最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14094