How to use html to implement positioning code examples-HTML Tutorial-php.cn

How to use html to implement positioning code examples

迷茫

Release： 2017-03-25 17:58:29

Original

3072 people have browsed it

This chapter introduces how to use anchor points to achieve positioning. Using anchor points to achieve positioning is an inherent function of HTML. Of course, it is relatively simple and it also implements basic functions. However, the function is relatively simple. If you want to achieve smooth positioning You can refer to the chapter on how jquery implements click page animation to smoothly position the code of a certain element. The following uses code examples to introduce how html implements anchor positioning.

The code is as follows:

<!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>

Copy after login

The above code realizes the anchor positioning effect. The code is very simple. Set the href attribute value of link a to be positioned. The id attribute value of the element, but add # in front.

The above is the detailed content of How to use html to implement positioning code examples. For more information, please follow other related articles on the PHP Chinese website!