上一節為大家分析了一下日期時間選擇器的基本組成結構;
這一節主要講解樣式實現.

準備工作

1. 首先來確定一下各個部分的大小,主要是高度.為了元件顯示比較和諧,這裡整個控制元件高度為200px;
2. 選擇項的高度為40px;

示意圖:

大家可以根據需要自行調整.

開始擼碼

1. 新建工程,作者是採用WebStorm進行開發(前端神器),具體建立過程就不詳述了.應該都會.
2. 新建一個HTML檔案.

接下來按照前面介紹的元件結構寫幾個div.

    <div class="最外層">
    <div class="中間橫線"></div>
 

    <div class="滑動列表1">
        <ul>
            <li></li>
        </ul>
    </div>
    <div class="滑動列表2">
        <ul>
            <li></li>
        </ul>
    </div>
</div>

樣式實現

先指定最外層div樣式:

 .wrap {
          width: 100%
 
;
          height: 200px;
          background: #fff;
          position: relative;
          text-align: center
       }

用chrome預覽一下:

發現有邊距,把邊距去掉;

 * {
      margin: 0; 
      padding: 0;
   }

再實現中間橫線部分的樣式:

        .wrap .line {
            height: 40px;
            border-top: 1px solid #D6DDE7
 
;
            border-bottom: 1px solid #D6DDE7;
            width: 100%;
            position: absolute;
            top: 40%
        }

實現中間選中部分的樣式後就可以大致看出一點模樣了;

接下來實現滑動列表的樣式:

        .wrap .item {
            margin: 0;
            padding: 0 3%;
            display: inline-block;
            vertical-align: top;
            text-align: center;
            overflow: hidden;
            height: 200px;
        }

        .wrap .item ul {
            list-style: none;
            margin: 0;
            padding: 0;
            text-align: center;
            min-height: 120px;
            width: 80px;
            overflow: hidden;
        }

        .wrap .item ul li {
            height: 40px;
            line-height: 40px;
            color: #898c90;
            font-size: 15px
        }

        .wrap .item ul li.selected {
            color: #292a2b;
            font-size: 17px
        }

現在整個控制元件就有模有樣了,看圖.

字型不好看,換一個.

body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #000;
    font-size: 14px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    overflow-y: auto
}

好了,控制元件的樣式實現就完成了.
大家可以根據需要再自行調整.

結語

現在我們的控制元件還不能滑動,只有一個基本的樣式,但是也可以裝個逼噠,下一節為大家講解如何讓控制元件滑動起來;敬請期待.

修改增加item高度200px.