制作移动友好的结账导航

时间:2015-12-29 18:26:25

标签: css html5 responsive-design

我正在学习响应式设计,但我仍然坚持让一大堆css响应。这是一个结帐导航,我想列出要叠加的项目。以下是代码:

JSFiddle

HTML

<div class="checkout-wrap">
  <ul class="checkout-bar" style="text-decoration:none">
    <li class="visited"><a style="text-decoration:none !important" href="">Step 1</a></li>
    <li class="last">Setp 2</li>
    <li class="last active">Setp 3</li>
    <li class="last">Setp 4</li>
    <li class="last">Setp 5</li>
  </ul>
</div>

CSS

.checkout-wrap {
      color: #444;
      font-family: 'PT Sans Caption', sans-serif;
      margin: 40px auto;
      /*max-width: 1200px;*/
      position: relative;
    }

    ul.checkout-bar li {
      color: #ccc;
      display: block;
      font-size: 14px;
      padding: 5px 5px;
      position: relative;
    }
    ul.checkout-bar li:before {
      -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
      box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
      background: #ddd;
      border: 2px solid #FFF;
      border-radius: 50%;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      left: 15px;
      line-height: 37px;
      height: 35px;
      position: absolute;
      text-align: center;
      text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
      top: 4px;
      width: 20px;
      z-index: 999;
    }
    ul.checkout-bar li.active {
      color: #77AA4E;
      font-weight: bold;
      text-decoration:none !important;
    }
    ul.checkout-bar li.active:before {
      background: #77AA4E;
      z-index: 99999;
      text-decoration:none !important;
    }

    ul.checkout-bar li.next {
        background:#ccc;
        font-weight: bold;
      text-decoration:none !important;
    }
    ul.checkout-bar li.next:before {
        background:#ccc;
        z-index: 99999;
        text-decoration:none !important;
    }
    /*ul.checkout-bar li.next:after {
        background:#ccc;
    }*/

    ul.checkout-bar li.visited {
      background: #ECECEC;
      color: #57aed1;
      z-index: 99999;
    }
    ul.checkout-bar li.visited:before {
      background: #57aed1;
      z-index: 99999;
    }
    ul.checkout-bar li:nth-child(1):before {
      content: "1";
    }
    ul.checkout-bar li:nth-child(2):before {
      content: "2";
    }
    ul.checkout-bar li:nth-child(3):before {
      content: "3";
    }
    ul.checkout-bar li:nth-child(4):before {
      content: "4";
    }
    ul.checkout-bar li:nth-child(5):before {
      content: "5";
    }
    ul.checkout-bar li:nth-child(6):before {
      content: "6";
    }
    ul.checkout-bar li:nth-child(7):before {
      content: "7";
    }
     ul.checkout-bar li:nth-child(8):before {
      content: "8";
    }
      ul.checkout-bar li:nth-child(9):before {
      content: "9";
    }
    ul.checkout-bar a {
      color: #57aed1;
      font-size: 14px;
      /*font-weight: 600;*/
      text-decoration: none  !important;
    }

我怎样才能让它适合移动设备?任何建议表示赞赏。我正在阅读一些文章,但我尝试过的文章尚未产生任何内容。

0 个答案:

没有答案