本章節介紹如何利用錨點實現定位,使用錨點實現定位是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屬性值,但前面要加#。
以上是如何使用html實作定位程式碼實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!