css實(shí)現(xiàn)九宮格，覆蓋單格顯示邊框

douzifly 發(fā)布于2019-08-01 15:53 / 810人閱讀

效果圖

css

    *{
        margin:0px;
        padding:0px;
    }
    ul.box{
        list-style:none;
        width:165px;
        height:165px;
        padding:30px;
    }
    .box li{
        float:left;
    }
    .box a{
        display:block;
        width:50px;
        height:50px;
        border:5px solid blue;
        margin-left:-5px;
        margin-top:-5px;        
    }
    .box a:hover{
        position:relative;
        border-color:red;
        z-index:100;
    }
    .box:after{
        content:"";
        height:0;
        visibility:hidden;
        clear:both;
        display:block;
    }

html

云服務(wù)器 GPU云服務(wù)器九宮格九宮格圖九宮格源碼支付寶九宮格

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

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

相關(guān)文章

css實(shí)現(xiàn)九宮格，覆蓋單格顯示邊框

效果圖 showImg(https://segmentfault.com/img/bVE1jK?w=209&h=179); css *{ margin:0px; padding:0px; } ul.box{ list-style:none; width:165px; height:165px; ...

CHENGKANG 2019-08-29 11:29 評(píng)論0 收藏0
小程序—九宮格心形拼圖

摘要：而微信小程序中也剛好有進(jìn)度條這個(gè)組件。推薦和意見(jiàn)反饋推薦給朋友意見(jiàn)反饋這個(gè)兩個(gè)功能就是用了，微信小程序的組件，這里需要注意的就是，在清除的默認(rèn)樣式時(shí)，需要把的偽元素的邊框也去掉。總結(jié)這次做的這個(gè)九宮格心形拼圖的小程序，第一版已經(jīng)上線(xiàn)了。說(shuō)明前幾天在朋友圈看到好幾次這種圖片。 showImg(https://segmentfault.com/img/bVbeAoX?w=321&h=3...

myeveryheart 2019-08-23 10:33 評(píng)論0 收藏0
CSS魔法堂：重拾Border之——圖片作邊框

摘要：一鋪搞定一鋪清袋粵語(yǔ)的一鋪搞定其實(shí)就是一次完成全部工作的意思，上面關(guān)于的屬性，要是每次都逐個(gè)設(shè)置那要敲多少次鍵盤(pán)啊。。。語(yǔ)法粵語(yǔ)的一鋪清袋其實(shí)就是把之前的成果一次性歸零。前言 ?當(dāng)CSS3推出border-radius屬性時(shí)我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來(lái)模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)border-top-left/...

linkFly 2019-08-30 12:59 評(píng)論0 收藏0
練習(xí)九宮格

摘要：背景每日一練繪制九宮格要求九宮格垂直居中于頁(yè)面只能使用和標(biāo)簽添加背景邊框代碼九宮格要求不能修改標(biāo)簽，僅通過(guò)實(shí)現(xiàn)效果添加綠色的邊框效果圖有很多種方法可以實(shí)現(xiàn)我用的是伸縮盒本來(lái)不想用的但是文字的上下居中沒(méi)有固定的高度只有百分比背景:每日一練:繪制九宮格要求:九宮格垂直居中于頁(yè)面,只能使用ul和li標(biāo)簽,添加背景邊框代碼九宮格要求: 1:不能修改標(biāo)簽，僅通過(guò) css 實(shí)現(xiàn)效...

shiina 2019-08-30 15:44 評(píng)論0 收藏0
小程序?qū)嵺`（三）：九宮格實(shí)現(xiàn)及item跳轉(zhuǎn)

摘要：效果圖實(shí)現(xiàn)效果圖紅色線(xiàn)包含部分的九宮格效果，并附帶點(diǎn)擊時(shí)間。效果圖：實(shí)現(xiàn)效果圖紅色線(xiàn)包含部分的九宮格效果，并附帶item點(diǎn)擊時(shí)間。 ------------------------------------------------------------------------------------------------------ 具體實(shí)現(xiàn)： 1、首先添加圖片資源文件　在...

番茄西紅柿 2019-04-23 13:34 評(píng)論0 收藏0