码迷,mamicode.com
首页 > 其他好文 > 详细

锚点的使用和总结

时间:2014-08-06 11:47:11      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   java   使用   os   io   strong   

一个简单的锚点的例子

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>定位到具体位置</title>
      <style type="text/css">
       /*CSS reset*/
       body, div, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
       table{border-collapse:collapse;border-spacing:0;}
       fieldset,img {border:0;}
       address,caption, cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
       ol,ul {list-style:none;}
       capation,th{text-align:left;}
       h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
       q:before, q:after{content:‘ ‘}
       abbr,acronym{border:0;}


       .positionDiv{width: 70%; margin: 0 auto; height: 400px; border: 1px solid #000;}
       #div1{background-color: red;}
       #div2{background-color: green;}
       #div3{background-color: blue;}
       #div4{background-color: yellow;}
       #div5{background-color: orange;}
       #content{width: 70%; margin-top: 20px; overflow: auto;}
       #menu{ position:fixed; border: 1px solid #000; width: 15%; top:20px; right: 50px;}
       #menu ul li{list-style: none; padding: 10px; text-align: center; border: 1px solid #000;}
      </style>
  </head>

  <body>
    
    <div id="menu">
        <ul>
            <li><a href="#div1">div1</a></li>
            <li><a href="#div2">div2</a></li>
            <li><a href="#div3">div3</a></li>
            <li><a href="#div4">div4</a></li>
            <li><a href="#div5">div5</a></li>
        </ul>
    </div>

      <div id="content">
          <div id="div1" class="positionDiv">
                 <span>div1</span>    
          </div>

        <div id="div2" class="positionDiv">
                 <span>div2</span>    
          </div>

          <div id="div3" class="positionDiv">
                 <span>div3</span>    
          </div>

          <div id="div4" class="positionDiv">
                 <span>div4</span>    
          </div>

          <div id="div5" class="positionDiv">
                 <span>div5</span>    
          </div>
      </div>
      
  </body>

  <script type="text/javascript">

  </script>
</html>

 

锚点的使用和总结,布布扣,bubuko.com

锚点的使用和总结

标签:style   blog   color   java   使用   os   io   strong   

原文地址:http://www.cnblogs.com/wangyuanliang/p/3894052.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!