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属性值,但是前面要加#。

  • 相关阅读:
    好想和这俩妹子一起晒晒太阳
    APP里如何添加本地文本
    Xcode静态检查分析代码
    漫谈iOS程序的证书和签名机制
    CrashMonkey4IOS App测试
    iOS 通信常用小功能
    iOS开发之如何跳到系统设置里的各种设置界面
    从APP跳转到WI-FI
    iOS 微信支付总结
    iOS支付宝支付总结
  • 原文地址:https://www.cnblogs.com/good10001/p/4744156.html
Copyright © 2011-2022 走看看