成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

css定位實(shí)現(xiàn)星級(jí)展示沒(méi)有交互

kohoh_ / 3142人閱讀

摘要：效果如圖，通過(guò)定位放兩張背景圖，外層的放灰色的顆星圖，內(nèi)層的也是，寬度根據(jù)不同級(jí)別來(lái)展示，從而實(shí)現(xiàn)，代表半顆星，代表顆星，以此類(lèi)推，即默認(rèn)比如顆星乘就是的后綴數(shù)字，以此可以動(dòng)態(tài)展示要注意這個(gè)星星默認(rèn)為，間距，展示的星星寬度記得計(jì)算間距。

<div class="star_evaluate">
       <span class="star star_10">span>
div>
.star_evaluate{
            position: relative;
            display: inline-block;
            width: 100px;
            height:16px;
            background: url("./../../public/img/star_gray.png") no-repeat;
            background-size:cover;
            overflow: hidden;
            .star{
              position: absolute;
              top:0;
              left:0;
              display: inline-block;
              height:16px;
              background: url("./../../public/img/star.png") no-repeat;
              background-size:cover;
              overflow: hidden;
            }
            .star_1{
              width:8px;
            }
            .star_2{
              width:21px;
            }
            .star_3{
              width:29px;
            }
            .star_4{
              width:42px;
            }
            .star_5{
              width:50px;
            }
            .star_6{
              width:63px;
            }
            .star_7{
              width:71px;
            }
            .star_8{
              width:84px;
            }
            .star_9{
              width:92px;
            }
            .star_10{
              width:100px;
            }
          }

效果如圖，通過(guò)定位放兩張背景圖，外層的放灰色的5顆星圖，內(nèi)層的也是，寬度根據(jù)不同級(jí)別來(lái)展示，從而實(shí)現(xiàn)，

star_1 ,代表半顆星，star_2 代表1顆星，以此類(lèi)推，即默認(rèn)比如2.5顆星乘2就是class的后綴數(shù)字，以此可以動(dòng)態(tài)展示

要注意這個(gè)星星默認(rèn)為16px*16px，間距5px，展示的星星寬度記得計(jì)算間距。

之前看過(guò)網(wǎng)友的實(shí)現(xiàn)方式，有通過(guò)一個(gè)星星平鋪，來(lái)顯示的，但是平鋪的這種方式應(yīng)該是不可以讓星星之間產(chǎn)生間距的，如果有大神有辦法，請(qǐng)一定告訴我，謝謝！

如有寫(xiě)的不對(duì)的地方，還請(qǐng)大家多多指正，感謝查看！

?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1579.html

相關(guān)文章

  • 純CSS的星級(jí)評(píng)價(jià)效果

    摘要：代碼實(shí)現(xiàn)一星兩星三星四星五星去掉標(biāo)簽?zāi)J(rèn)樣式初始化樣式鼠標(biāo)懸浮精益求精上面我們的星星評(píng)分效果已初見(jiàn)成效，但是暴露了一個(gè)問(wèn)題，就是我們的評(píng)價(jià)機(jī)制缺少記憶功能。這里有點(diǎn)不一樣的是每個(gè)星星對(duì)應(yīng)一個(gè)單選框和一個(gè)標(biāo)簽，的層級(jí)要高于單選框。 前言 showImg(https://segmentfault.com/img/bVO4MF?w=122&h=23); 這種星星評(píng)價(jià)效果，相信大家這個(gè)并不陌生...

    lijy91 評(píng)論0 收藏0

  • 純CSS的星級(jí)評(píng)價(jià)效果

    摘要：代碼實(shí)現(xiàn)一星兩星三星四星五星去掉標(biāo)簽?zāi)J(rèn)樣式初始化樣式鼠標(biāo)懸浮精益求精上面我們的星星評(píng)分效果已初見(jiàn)成效，但是暴露了一個(gè)問(wèn)題，就是我們的評(píng)價(jià)機(jī)制缺少記憶功能。這里有點(diǎn)不一樣的是每個(gè)星星對(duì)應(yīng)一個(gè)單選框和一個(gè)標(biāo)簽，的層級(jí)要高于單選框。 前言 showImg(https://segmentfault.com/img/bVO4MF?w=122&h=23); 這種星星評(píng)價(jià)效果，相信大家這個(gè)并不陌生...

    Lin_R 評(píng)論0 收藏0

  • PokemonGo：LBS游戲開(kāi)發(fā)

    摘要：優(yōu)化后的方案降低了捕捉門(mén)檻，也鼓勵(lì)用戶(hù)走動(dòng)去發(fā)現(xiàn)和捕捉更多精靈。 寫(xiě)在前面 去吧！皮卡丘！小時(shí)候擁有一臺(tái)任天堂是多少熊孩子的夢(mèng)想，每個(gè)夜晚被窩里透出的微弱光線，把小小的童年帶入另一個(gè)世界，家門(mén)口的鳥(niǎo)和狗，森林里的蟲(chóng)和瀑布，山洞里的超音蝠，帶著小小的夢(mèng)，走過(guò)一個(gè)個(gè)城市，一路冒險(xiǎn)，飛天潛水，攀瀑碎巖，所向披靡。每個(gè)醒來(lái)的清晨，都恍如出門(mén)冒險(xiǎn)的那天~ 要做什么 基于開(kāi)放地圖二次開(kāi)發(fā)，完成簡(jiǎn)易...

    daydream 評(píng)論0 收藏0

  • PokemonGo：LBS游戲開(kāi)發(fā)

    摘要：優(yōu)化后的方案降低了捕捉門(mén)檻，也鼓勵(lì)用戶(hù)走動(dòng)去發(fā)現(xiàn)和捕捉更多精靈。 寫(xiě)在前面 去吧！皮卡丘！小時(shí)候擁有一臺(tái)任天堂是多少熊孩子的夢(mèng)想，每個(gè)夜晚被窩里透出的微弱光線，把小小的童年帶入另一個(gè)世界，家門(mén)口的鳥(niǎo)和狗，森林里的蟲(chóng)和瀑布，山洞里的超音蝠，帶著小小的夢(mèng)，走過(guò)一個(gè)個(gè)城市，一路冒險(xiǎn)，飛天潛水，攀瀑碎巖，所向披靡。每個(gè)醒來(lái)的清晨，都恍如出門(mén)冒險(xiǎn)的那天~ 要做什么 基于開(kāi)放地圖二次開(kāi)發(fā)，完成簡(jiǎn)易...

    Michael_Lin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<