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

Home

Web Front-end

HTML Tutorial

How to use html to implement positioning code examples

迷茫

Mar 25, 2017 pm 05:58 PM

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn