zoukankan      html  css  js  c++  java
  • 粘性定位

    <<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
        <script src="main.js"></script>
    </head>
    <body>
        <dl>
            <div>
              <dt>A</dt>
              <dd>Andrew W.K.</dd>
              <dd>Apparat</dd>
              <dd>Arcade Fire</dd>
              <dd>At The Drive-In</dd>
              <dd>Aziz Ansari</dd>
            </div>
            <div>
              <dt>C</dt>
              <dd>Chromeo</dd>
              <dd>Common</dd>
              <dd>Converge</dd>
              <dd>Crystal Castles</dd>
              <dd>Cursive</dd>
            </div>
            <div>
              <dt>E</dt>
              <dd>Explosions In The Sky</dd>
            </div>
            <div>
              <dt>T</dt>
              <dd>Ted Leo &amp; The Pharmacists</dd>
              <dd>T-Pain</dd>
              <dd>Thrice</dd>
              <dd>TV On The Radio</dd>
              <dd>Two Gallants</dd>
            </div>
          </dl>
    </body>
    </html>>
    * {
      box-sizing: border-box;
    }
    
    dl > div {
      background: #FFF;
      padding: 24px 0 0 0;
    }
    
    dt {
      background: #B8C1C8;
      border-bottom: 1px solid #989EA4;
      border-top: 1px solid #717D85;
      color: #FFF;
      font: bold 18px/21px Helvetica, Arial, sans-serif;
      margin: 0;
      padding: 2px 0 0 12px;
      position: -webkit-sticky;
      position: sticky;
      top: -1px;
    }
    
    dd {
      font: bold 20px/45px Helvetica, Arial, sans-serif;
      margin: 0;
      padding: 0 0 0 12px;
      white-space: nowrap;
    }
    
    dd + dd {
      border-top: 1px solid #CCC;
    }
  • 相关阅读:
    洛谷P3799 妖梦拼木棒
    bzoj1008 [HNOI2008]越狱
    洛谷P3414 SAC#1
    洛谷P1078 文化之旅
    bzoj1053 [HAOI2007]反素数ant
    洛谷P1588 丢失的牛
    bzoj1085 [SCOI2005]骑士精神
    noip2016 蚯蚓
    noip2016 换教室
    html笔记03:表单
  • 原文地址:https://www.cnblogs.com/liverpool-ADH/p/9768401.html
Copyright © 2011-2022 走看看