zoukankan      html  css  js  c++  java
  • html利用锚点实现定位代码实例

    本章节介绍介绍一下如何利用锚点实现定位,使用锚点实现定位是html固有的功能,当然比较简单,也实现了基本的功能,但是功能相对简单一些,如果想要实现平滑的定位可以参阅jquery实现的点击页面动画方式平滑定位到某元素代码一章节。 下面通过代码实例介绍一下html是如何实现锚点定位的。

    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>http://www.100sucai.com</title>
    <style type="text/css">  
    .a{
      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;
    }
    #thediv{
      100%;
      height:50px;
      background:#CCC;
      margin-top:100px;
    }
    </style>  
    </head>  
    <body style="height:1000px;">  
    <a class="a" href="#thediv">点击定位</a>
    <div id="thediv">
    <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>
    </div>
    </body>  
    </html>
    

    以上代码实现了锚点定位效果,代码非常的简单,将链接a的href属性值设置为要定位元素的id属性值,但是前面要加#。

  • 相关阅读:
    一分钟教你解决前端分流问题
    win7 mysql 数据库轻松实现数据库定时备份
    mysql 修改密码
    what is yaml ?
    php实现监控在线服务应用程序小栗子
    Python装饰器小代码
    2,构造代码块
    1,匿名对象,封装
    7,random
    测试错题
  • 原文地址:https://www.cnblogs.com/good10001/p/4744156.html
Copyright © 2011-2022 走看看