如何使用html實作定位程式碼實例
- 迷茫原創
- 2017-03-25 17:58:293147瀏覽
本章節介紹如何利用錨點實現定位，使用錨點實現定位是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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：如何了解HTML結構的語意化下一篇：如何了解HTML結構的語意化