Rumah > Artikel > hujung hadapan web > 如何使用html实现定位代码实例
如何使用html实现定位代码实例
- 迷茫asal
- 2017-03-25 17:58:293099semak imbas
本章节介绍介绍一下如何利用锚点实现定位，使用锚点实现定位是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!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何了解HTML结构的语义化Artikel seterusnya：详解Sublime Text 插件Emmet的使用