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

CHENGKANG 發(fā)布于2019-08-29 11:29 / 1165人閱讀

效果圖

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://specialneedsforspecialkids.com/yun/111686.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; ...

douzifly 2019-08-01 15:53 評(píng)論0 收藏0
小程序—九宮格心形拼圖

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

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

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

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

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

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

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

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