本章节介绍介绍一下如何利用锚点实现定位,使用锚点实现定位是html固有的功能,当然比较简单,也实现了基本的功能,但是功能相对简单一些,如果想要实现平滑的定位可以参阅jquery实现的点击页面动画方式平滑定位到某元素代码一章节。 下面通过代码实例介绍一下html是如何实现锚点定位的。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>http://www.100sucai.com</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://www.100sucai.com/web/jquerytexiao/daohangcaidan/" title="导航菜单">导航菜单</a></li> <li><a href="http://www.100sucai.com/web/jquerytexiao/xuanxiangka/" title="table选项卡">table选项卡</a></li> </p> </body> </html>
以上代码实现了锚点定位效果,代码非常的简单,将链接a的href属性值设置为要定位元素的id属性值,但是前面要加#。
Atas ialah kandungan terperinci 如何使用html实现定位代码实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!