如何使用html实现定位代码实例

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

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>http://HdhCmsTest100sucai测试数据</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;
}
#thep{
  width:100%;
  height:50px;
  background:#CCC;
  margin-top:100px;
}
</style>  
</head>  
<body style="height:1000px;">  
<a class="a" href="#thep">点击定位</a>
<p id="thep">
<li><a href="http://HdhCmsTest100sucai测试数据/web/jquerytexiao/daohangcaidan/" title="导航菜单">导航菜单</a></li>
<li><a href="http://HdhCmsTest100sucai测试数据/web/jquerytexiao/xuanxiangka/" title="table选项卡">table选项卡</a></li>
</p>
</body>  
</html>

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

以上就是如何使用html实现定位代码实例的详细内容，更多请关注Gxl网其它相关文章！

查看更多关于如何使用html实现定位代码实例的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did100748

更新时间：2022-11-03 阅读：43次