如何使用html實作定位程式碼實例

迷茫
發布: 2017-03-25 17:58:29
原創
3099 人瀏覽過

本章節介紹如何利用錨點實現定位,使用錨點實現定位是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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板