HTML/CSS實(shí)現(xiàn)賬單吸頂效果

效果

image.png

案例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover" />
    <title>sticky粘性效果</title>
    <!--
      @author: SM
      @email: sm0210@qq.com
      @desc 賬單吸頂效果
    -->
    <!--
        css
    -->
    <style type="text/css">
     *,*::after,*::before {
        margin: 0px;
        padding: 0px;
        -webkit-tap-highlight-color: transparent;
        -webkit-input-placeholder-color: transparent;
        -webkit-overflow-scrolling: touch;
        outline: none;
      }
      body {
        font-family: "PingFang SC", "蘋方", "PingFangSC-Regular", "Helvetica Neue",Helvetica,STHeiTi,sans-serif;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
        -ms-touch-action: none;
        color: #676767;
        background: #fff;
        font-size: 14px;
      }
      ul, li {
        list-style: none;
      }
      /*
              彈性盒
          */
      .box-flex {
        display: -webkit-box;
      }
      .box-flex-1{
        -webkit-box-flex: 1;
      }

      .padding-lf-15 {
        padding-left: 16px;
        padding-right: 16px;
      }
      .font-size-12 {
        font-size: 12px;
      }

      .filter_content {
        height: 42px;
        line-height: 42px;
        border-bottom: 1px solid #ccc;
        background-color: #fff;
        transition:0.4s ease;
        position: sticky;
        top: 0px;
        z-index: 10;
      }
      .filter_info {
        position: relative;
      }
      .filter_info span {
        display: inline-block;
      }
      .filter_info span:after {
        content: '';
        margin-left: 10px;
        width: 0;
        height: 0;
        position: absolute;
        top: 18px;
        border-width: 5px;
        border-style: solid;
        border-color: #ccc transparent transparent transparent;
      }
      .filter_info span:first-child {
        margin-right: 60px;
      }
      .filter_search:before {
        content: '';
        border-left: 1px solid #ccc;
        position: absolute;
        height: 16px;
        margin-left: -15px;
        top: 13px;
      }
      /*
              明細(xì)
          */
      .bill_detail_month {
        height: 70px;
        background-color: #F6F6F6;
        /* 粘性效果 */
        transition:0.4s ease;
        position: sticky;
        z-index: 9;
        top: 42px;
        border-bottom: 1px solid #F1F1F1;
      }
      .bill_detail_month .bill_detail_month_text {
        min-width: 58px;
        height: 26px;
        line-height: 26px;
        background-color: #fff;
        -webkit-border-radius: 40px;
        margin-top: 23px;
        padding-left: 12px;
        position: relative;
      }

      .bill_detail_month .bill_detail_month_text:after {
        content: '';
        border: 1px solid red;
        position: absolute;
        right: 15px;
        top: 12px;
        border-width: 5px;
        border-style: solid;
        border-color: #ccc transparent transparent transparent;
      }

      .bill_detail_month .bill_detail_text {
        padding-top: 15px;
        text-align: right;
        color: #B4B4B4;
        font-size: 14px;
      }
      /*
              消費(fèi)明細(xì)
          */
      .bill_detail_info {
        height: 112px;
      }
      .bill_detail_info_icon {
        line-height: normal;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        -webkit-border-radius: 40px;
        margin-top: 36px;
      }
      .bill_detail_info_money {
        margin-top: 36px;
        width: 110px;
        text-align: right;
        color: #353535;
        font-weight: bold;
        font-size: 18px;
      }
      /*
              收入
          */
      .bill_detail_info_money.income {
        color: #EB4D30;
      }
      /*
              圖標(biāo)
          */
      .bill_detail_info_icon.elm {
        background-color: #0C9EFA;
      }

      .bill_detail_info_icon.zs {
        background-color: #E00611;
      }

      .bill_detail_info_icon.yeb {
        background-color: #E95621;
      }
      .bill_detail_info_icon.tk {
        background-color: #178EE0;
      }

      .bill_detail_info_icon.tb {
        background-color: #FC4603;
      }

      .bill_detail_info_icon_content {
        margin-left: 20px;
        margin-top: 36px;
      }
      .bill_detail_info_icon_content li {
        line-height: 22px;
        color: #5D5D5D;
      }
      .bill_detail_info_1px {
        border-bottom: 1px solid #ccc;
      }
      .bill_detail_info:last-child .bill_detail_info_1px {
        border-bottom: none;
      }
      .bill_detail_info_date {
        color: #A4A4A4;
      }
    </style>
  </head>
  <body>
    <!-- box -->
      <div class="box">
        <!-- 篩選/分類 -->
        <div class="box-flex padding-lf-15 filter_content">
          <div class="box-flex-1 filter_info "><span>篩選</span><span>分類</span></div>
          <div class="filter_search">搜索</div>
        </div>
        <!--明細(xì)-->
        <div class="bill_detail">
          <!-- 月份 -->
          <div class="box-flex padding-lf-15 bill_detail_month">
            <div class="bill_detail_month_text">本月</div>
            <div class="box-flex-1 bill_detail_text">
              <ul>
                <li>支出 ￥1,250.03</li>
                <li>收入 ￥144.55</li>
              </ul>
            </div>
          </div>
          <!-- 具體明細(xì) -->
          <div class="box-flex padding-lf-15 bill_detail_info">
            <div class="bill_detail_info_icon zs"></div>
            <div class="box-flex-1 box-flex bill_detail_info_1px">
              <div class="box-flex-1 bill_detail_info_icon_content">
                <ul>
                  <li>信用卡還款-銀行</li>
                  <li class="font-size-12">借還款</li>
                  <li class="bill_detail_info_date font-size-12">03-28 18:19</li>
                  </ul>
              </div>
              <div class="bill_detail_info_money">-297.84</div>
            </div>
          </div>

          <div class="box-flex padding-lf-15 bill_detail_info">
            <div class="bill_detail_info_icon elm"></div>
            <div class="box-flex-1 box-flex bill_detail_info_1px">
              <div class="box-flex-1 bill_detail_info_icon_content">
                <ul>
                  <li>黃燜雞米飯(XX快餐)</li>
                  <li class="font-size-12">飲食</li>
                  <li class="bill_detail_info_date font-size-12">03-28 18:19</li>
                  </ul>
              </div>
              <div class="bill_detail_info_money">-11.40</div>
            </div>
          </div>

          <div class="box-flex padding-lf-15 bill_detail_info">
            <div class="bill_detail_info_icon yeb"></div>
            <div class="box-flex-1 box-flex bill_detail_info_1px">
              <div class="box-flex-1 bill_detail_info_icon_content">
                <ul>
                  <li>某額寶-收益</li>
                  <li class="font-size-12">理財(cái)</li>
                  <li class="bill_detail_info_date font-size-12">03-28 18:19</li>
                  </ul>
              </div>
              <div class="bill_detail_info_money income">+0.94</div>
            </div>
          </div>

          <div class="box-flex padding-lf-15 bill_detail_info">
            <div class="bill_detail_info_icon tk"></div>
            <div class="box-flex-1 box-flex bill_detail_info_1px">
              <div class="box-flex-1 bill_detail_info_icon_content">
                <ul>
                  <li>退款-商品</li>
                  <li class="font-size-12">交通出行</li>
                  <li class="bill_detail_info_date font-size-12">03-28 18:19</li>
                  </ul>
              </div>
              <div class="bill_detail_info_money income">+6.54</div>
            </div>
          </div>

          <div class="box-flex padding-lf-15 bill_detail_info">
            <div class="bill_detail_info_icon tb"></div>
            <div class="box-flex-1 box-flex bill_detail_info_1px">
              <div class="box-flex-1 bill_detail_info_icon_content">
                <ul>
                  <li>商品購買</li>
                  <li class="font-size-12">交通出行</li>
                  <li class="bill_detail_info_date font-size-12">03-28 18:19</li>
                  </ul>
              </div>
              <div class="bill_detail_info_money">-10.36</div>
            </div>
          </div>

          <!-- 具體明細(xì)end -->

        </div><!-- 賬單詳情 -->
        <!-- 2月 -->
        <div class="bill_detail">
          <!-- 月份 -->
          <div class="box-flex padding-lf-15 bill_detail_month">
            <div class="bill_detail_month_text">2月</div>
            <div class="box-flex-1 bill_detail_text">
              <ul>
                <li>支出 ￥1,250.03</li>
                <li>收入 ￥144.55</li>
              </ul>
            </div>
          </div>
          <!-- 具體明細(xì) -->
          <div class="box-flex padding-lf-15 bill_detail_info">
            <div class="bill_detail_info_icon zs"></div>
            <div class="box-flex-1 box-flex bill_detail_info_1px">
              <div class="box-flex-1 bill_detail_info_icon_content">
                <ul>
                    <li>信用卡還款-銀行</li>
                    <li class="font-size-12">借還款</li>
                    <li class="bill_detail_info_date font-size-12">02-28 18:19</li>
                  </ul>
              </div>
              <div class="bill_detail_info_money">-297.84</div>
            </div>
          </div>

          <div class="box-flex padding-lf-15 bill_detail_info">
            <div class="bill_detail_info_icon elm"></div>
            <div class="box-flex-1 box-flex bill_detail_info_1px">
              <div class="box-flex-1 bill_detail_info_icon_content">
                <ul>
                    <li>黃燜雞米飯(XX快餐)</li>
                    <li class="font-size-12">飲食</li>
                    <li class="bill_detail_info_date font-size-12">02-28 18:19</li>
                  </ul>
              </div>
              <div class="bill_detail_info_money">-11.40</div>
            </div>
          </div>

          <div class="box-flex padding-lf-15 bill_detail_info">
            <div class="bill_detail_info_icon yeb"></div>
            <div class="box-flex-1 box-flex bill_detail_info_1px">
              <div class="box-flex-1 bill_detail_info_icon_content">
                <ul>
                    <li>某額寶-收益</li>
                    <li class="font-size-12">理財(cái)</li>
                    <li class="bill_detail_info_date font-size-12">02-28 18:19</li>
                  </ul>
              </div>
              <div class="bill_detail_info_money income">+0.94</div>
            </div>
          </div>

          <div class="box-flex padding-lf-15 bill_detail_info">
            <div class="bill_detail_info_icon tk"></div>
            <div class="box-flex-1 box-flex bill_detail_info_1px">
              <div class="box-flex-1 bill_detail_info_icon_content">
                <ul>
                    <li>退款-商品</li>
                    <li class="font-size-12">交通出行</li>
                    <li class="bill_detail_info_date font-size-12">02-28 18:19</li>
                  </ul>
              </div>
              <div class="bill_detail_info_money income">+6.54</div>
            </div>
          </div>

          <div class="box-flex padding-lf-15 bill_detail_info">
            <div class="bill_detail_info_icon tb"></div>
            <div class="box-flex-1 box-flex bill_detail_info_1px">
              <div class="box-flex-1 bill_detail_info_icon_content">
                <ul>
                    <li>商品購買</li>
                    <li class="font-size-12">交通出行</li>
                    <li class="bill_detail_info_date font-size-12">02-28 18:19</li>
                  </ul>
              </div>
              <div class="bill_detail_info_money">-10.36</div>
            </div>
          </div>
          <!-- 具體明細(xì)end -->
        </div><!--賬單詳情-->
        <!-- 1月-->
        <div class="bill_detail">
          <!-- 月份 -->
          <div class="box-flex padding-lf-15 bill_detail_month">
            <div class="bill_detail_month_text">1月</div>
            <div class="box-flex-1 bill_detail_text">
              <ul>
                <li>支出 ￥1,250.03</li>
                <li>收入 ￥144.55</li>
              </ul>
            </div>
          </div>
          <!-- 具體明細(xì) -->
          <div class="box-flex padding-lf-15 bill_detail_info">
            <div class="bill_detail_info_icon zs"></div>
            <div class="box-flex-1 box-flex bill_detail_info_1px">
              <div class="box-flex-1 bill_detail_info_icon_content">
                <ul>
                    <li>信用卡還款-銀行</li>
                    <li class="font-size-12">借還款</li>
                    <li class="bill_detail_info_date font-size-12">01-28 18:19</li>
                  </ul>
              </div>
              <div class="bill_detail_info_money">-297.84</div>
            </div>
          </div>

          <div class="box-flex padding-lf-15 bill_detail_info">
            <div class="bill_detail_info_icon elm"></div>
            <div class="box-flex-1 box-flex bill_detail_info_1px">
              <div class="box-flex-1 bill_detail_info_icon_content">
                <ul>
                    <li>黃燜雞米飯(XX快餐)</li>
                    <li class="font-size-12">飲食</li>
                    <li class="bill_detail_info_date font-size-12">01-28 18:19</li>
                  </ul>
              </div>
              <div class="bill_detail_info_money">-11.40</div>
            </div>
          </div>

          <div class="box-flex padding-lf-15 bill_detail_info">
            <div class="bill_detail_info_icon yeb"></div>
            <div class="box-flex-1 box-flex bill_detail_info_1px">
              <div class="box-flex-1 bill_detail_info_icon_content">
                <ul>
                    <li>某額寶-收益</li>
                    <li class="font-size-12">理財(cái)</li>
                    <li class="bill_detail_info_date font-size-12">01-28 18:19</li>
                  </ul>
              </div>
              <div class="bill_detail_info_money income">+0.94</div>
            </div>
          </div>

          <div class="box-flex padding-lf-15 bill_detail_info">
            <div class="bill_detail_info_icon tk"></div>
            <div class="box-flex-1 box-flex bill_detail_info_1px">
              <div class="box-flex-1 bill_detail_info_icon_content">
                <ul>
                    <li>退款-商品</li>
                    <li class="font-size-12">交通出行</li>
                    <li class="bill_detail_info_date font-size-12">01-28 18:19</li>
                  </ul>
              </div>
              <div class="bill_detail_info_money income">+6.54</div>
            </div>
          </div>

          <div class="box-flex padding-lf-15 bill_detail_info">
            <div class="bill_detail_info_icon tk"></div>
            <div class="box-flex-1 box-flex bill_detail_info_1px">
              <div class="box-flex-1 bill_detail_info_icon_content">
                <ul>
                    <li>退款-商品</li>
                    <li class="font-size-12">交通出行</li>
                    <li class="bill_detail_info_date font-size-12">01-28 18:19</li>
                  </ul>
              </div>
              <div class="bill_detail_info_money income">+6.54</div>
            </div>
          </div>

          <div class="box-flex padding-lf-15 bill_detail_info">
            <div class="bill_detail_info_icon tk"></div>
            <div class="box-flex-1 box-flex bill_detail_info_1px">
              <div class="box-flex-1 bill_detail_info_icon_content">
                <ul>
                    <li>退款-商品</li>
                    <li class="font-size-12">交通出行</li>
                    <li class="bill_detail_info_date font-size-12">01-28 18:19</li>
                  </ul>
              </div>
              <div class="bill_detail_info_money income">+6.54</div>
            </div>
          </div>

          <!-- 具體明細(xì)end -->
        </div><!--賬單詳情-->

      </div>
    <!-- box -->
  </body>
</html>

最后編輯于：2019.03.15 17:17:18

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市子库，隨后出現(xiàn)的幾起案子回季，更是在濱河造成了極大的恐慌烂翰，老刑警劉巖放钦，帶你破解...
沈念sama閱讀 218,386評(píng)論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡如孝，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,142評(píng)論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門娩贷，熙熙樓的掌柜王于貴愁眉苦臉地迎上來第晰，“玉大人，你說我怎么就攤上這事彬祖∽率荩” “怎么了？”我有些...
開封第一講書人閱讀 164,704評(píng)論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵储笑，是天一觀的道長甜熔。經(jīng)常有香客問我，道長突倍，這世上最難降的妖魔是什么腔稀？我笑而不...
開封第一講書人閱讀 58,702評(píng)論 1贊 294
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮羽历，結(jié)果婚禮上焊虏，老公的妹妹穿的比我還像新娘。我一直安慰自己窄陡，他們只是感情好炕淮，可當(dāng)我...
茶點(diǎn)故事閱讀 67,716評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著跳夭，像睡著了一般涂圆。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上币叹，一...
開封第一講書人閱讀 51,573評(píng)論 1贊 305
城市分裂傳說
那天润歉，我揣著相機(jī)與錄音，去河邊找鬼颈抚。笑死踩衩，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的贩汉。我是一名探鬼主播驱富，決...
沈念sama閱讀 40,314評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼匹舞！你這毒婦竟也來了褐鸥？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,230評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤赐稽，失蹤者是張志新（化名）和其女友劉穎叫榕，沒想到半個(gè)月后浑侥，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,680評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡晰绎，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,873評(píng)論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年寓落，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片荞下。...
茶點(diǎn)故事閱讀 39,991評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡伶选，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出锄弱，到底是詐尸還是另有隱情考蕾，我是刑警寧澤，帶...
沈念sama閱讀 35,706評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布会宪，位于F島的核電站，受9級(jí)特大地震影響蚯窥，放射性物質(zhì)發(fā)生泄漏掸鹅。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,329評(píng)論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一拦赠、第九天我趴在偏房一處隱蔽的房頂上張望巍沙。院中可真熱鬧，春花似錦荷鼠、人聲如沸句携。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,910評(píng)論 0贊 22
一樁弒父案允乐，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽矮嫉。三九已至，卻和暖如春牍疏，著一層夾襖步出監(jiān)牢的瞬間蠢笋，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,038評(píng)論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工鳞陨，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留昨寞，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,158評(píng)論 3贊 370
代替公主和親
正文我出身青樓厦滤，卻偏偏與公主長得像援岩，于是被迫代替她去往敵國和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子掏导，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,941評(píng)論 2贊 355

HTML/CSS實(shí)現(xiàn)賬單吸頂效果

效果

案例：

推薦閱讀更多精彩內(nèi)容