亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS實(shí)現(xiàn)無(wú)外邊框列表效果

kbyyd24 / 1060人閱讀

摘要：方法一使用外層容器切割方法一使用外層容器切割給每一個(gè)設(shè)定右邊框和下邊框線把放置在一個(gè)外層中，設(shè)定的寬高，通過將一部分的邊框隱藏此方法只需要計(jì)算父容器的寬高，能應(yīng)付任何行與列數(shù)，推薦使用。

方法一：使用外層容器切割

  1. 給每一個(gè) li 設(shè)定右邊框和下邊框線
  2. 把ul放置在一個(gè)外層div中，設(shè)定div的寬高，通過overflow:hidden將一部分li的邊框隱藏

此方法只需要計(jì)算父容器的寬高，能應(yīng)付任何行與列數(shù)，推薦使用。

CSS部分：

body{background: #f3f3f3;}
ul, li{list-style: none; padding: 0; margin: 0;}
div{
    width: 323px;
    height: 302px;
    overflow: hidden;/*超出部分隱藏,切割掉下邊框和右邊框*/
}
div ul{
    /*一個(gè)li元素寬度為81px,width大小只要大于（81 x 4）324px,一排就能顯示四個(gè)li元素*/
    width: 325px;
}
div ul li{
    /*設(shè)置右邊框和下邊框*/
    border-bottom: 1px solid red;
    border-right: 1px solid red;
    height: 100px;
    width: 80px;
    float: left;
    background: #fff;
}

HTML部分：

<div>
        <ul>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
    ul>
div>

方法二：使用CSS選擇器

  1. 給每一個(gè) li 設(shè)定右邊框和下邊框線
  2. 通過CSS選擇器li:nth-child(even)隱藏偶數(shù)li的右邊框
  3. 通過CSS選擇器li:nth-last-child(2)和li:last-child隱藏最后兩個(gè)li的下邊框

此方法僅適用于每行固定顯示兩個(gè)li的情況，不需要計(jì)算寬高，也不需要設(shè)置父容器。

CSS部分：

body{background: #f3f3f3;}
ul, li{list-style: none; padding: 0; margin: 0;}
ul{width: 210px;}
/* 設(shè)置右邊框和下邊框 */
li{width: 100px; height: 80px; float: left; background: #fff; border-width: 0 1px 1px 0; border-color: #ff3333; border-style: solid; }
/* 去除偶數(shù)li的右邊框 */
li:nth-child(even){border-right: 0;}
/* 去除倒數(shù)第2個(gè)li的下邊框 */
li:nth-last-child(2){border-bottom: 0;}
/* 去除最后一個(gè)li的下邊框 */
li:last-child{border-bottom: 0;}

HTML部分：

<div>
        <ul>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
    ul>
div>

方法三：使用table

  1. 給每一個(gè) li 設(shè)定右邊框和下邊框線
  2. 通過CSS選擇器li:nth-child(even)隱藏偶數(shù)li的右邊框
  3. 通過CSS選擇器li:nth-last-child(2)和li:last-child隱藏最后兩個(gè)li的下邊框

CSS部分：

body{background: #f3f3f3;}
table{width:300px; height: 200px; border-collapse:collapse; }
td{ border:1px solid black; background-color: #fff; text-align: center; }
/* 去除第一行所有td的上邊框 */
tr:first-child td,tr:first-child th{ border-top:0px;}
/* 去除最后一行所有td的上邊框 */
tr:last-child td{border-bottom:0px;}
/* 去除每一行里第一個(gè)td的左邊框 */
td:first-child{ border-left:0;}
/* 去除每一行里最后一個(gè)td的右邊框 */
td:last-child { border-right:0;}

HTML部分：

<table>
    <tr>
        <td>11td>
        <td>12td>
        <td>13td>
    tr>
    <tr>
        <td>21td>
        <td>22td>
        <td>23td>
    tr>
table>

?

?

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1141.html

相關(guān)文章

  • css如何實(shí)現(xiàn)n宮格布局?

    摘要：常見應(yīng)用場(chǎng)景現(xiàn)在的界面基本都是大同小異宮格布局現(xiàn)在基本成了每個(gè)必然的存在帶邊框常用在功能導(dǎo)航頁(yè)面無(wú)邊框常用在首頁(yè)分類設(shè)計(jì)目標(biāo)在環(huán)境下通過實(shí)現(xiàn)宮格并且可以支持有無(wú)邊框和每個(gè)格是否正方形有邊框且每個(gè)格為正方形無(wú)邊框最終效果百分比小技巧先解釋一個(gè) 常見應(yīng)用場(chǎng)景 現(xiàn)在的APP界面基本都是大同小異, 宮格布局現(xiàn)在基本成了每個(gè)APP必然的存在. 帶邊框, 常用在功能導(dǎo)航頁(yè)面 showImg(htt...

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

  • H5多列布局

    摘要：多列布局基本概念多列布局類似報(bào)紙或雜志中的排版方式，上要用以控制大篇幅文本。在網(wǎng)頁(yè)制作時(shí)采用層疊樣式表技術(shù)，可以有效地對(duì)頁(yè)面的布局字體顏色背景和其它效果實(shí)現(xiàn)更加精確的控制。 多列布局 基本概念 1、多列布局類似報(bào)紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數(shù)量 /*列數(shù)*/ -webkit-column-count: 3; /*分割線*/ -webkit...

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

  • H5多列布局

    摘要：多列布局基本概念多列布局類似報(bào)紙或雜志中的排版方式，上要用以控制大篇幅文本。在網(wǎng)頁(yè)制作時(shí)采用層疊樣式表技術(shù)，可以有效地對(duì)頁(yè)面的布局字體顏色背景和其它效果實(shí)現(xiàn)更加精確的控制。 多列布局 基本概念 1、多列布局類似報(bào)紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數(shù)量 /*列數(shù)*/ -webkit-column-count: 3; /*分割線*/ -webkit...

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

  • CSS學(xué)習(xí)筆記(九) 界面組件之導(dǎo)航菜單

    摘要：為了讓包圍列表項(xiàng)，沒有使用，而是使用了，是因?yàn)榍罢邥?huì)導(dǎo)致后來(lái)添加到下拉菜單中的子菜單無(wú)法顯示它們最終會(huì)顯示在父元素的外面，結(jié)果會(huì)導(dǎo)致溢出而被隱藏。它與父元素之間的間隙，實(shí)際上下拉菜單中第一個(gè)鏈接的邊框。 菜單由一組鏈接組成。用 HTML 中的列表元素（ul 或 ol）來(lái)分組鏈接不僅符合邏輯，而且即使沒有額外的 CSS 也能適當(dāng)顯示鏈接的層次。默認(rèn)情況下，由于列表（li）是塊級(jí)元素...

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

  • 從項(xiàng)目中學(xué)習(xí)HTML+CSS

    摘要：最近由于工作原因以及自己的懈怠，已經(jīng)很久都沒有更新過博客了。所以這次就根據(jù)具體的一個(gè)網(wǎng)頁(yè)項(xiàng)目來(lái)梳理一下我這段時(shí)間學(xué)習(xí)這些東西的成果。最近由于工作原因以及自己的懈怠，已經(jīng)很久都沒有更新過博客了。通過這段時(shí)間，我發(fā)現(xiàn)堅(jiān)持一件事情是真的很難，都說萬(wàn)事開頭難，但是在放棄這件事上好像開頭了后面就順理成章的繼續(xù)下去了。中間即使不怎么情愿也在努力的每周更新博客，但是自從9月份以來(lái)，第一次因?yàn)楣ぷ餍枰影喽?..

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<