成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

kbyyd24 / 927人閱讀

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

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

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

此方法只需要計算父容器的寬高，能應(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{
    /*一個li元素寬度為81px,width大小只要大于（81 x 4）324px,一排就能顯示四個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. 給每一個 li 設(shè)定右邊框和下邊框線
  2. 通過CSS選擇器li:nth-child(even)隱藏偶數(shù)li的右邊框
  3. 通過CSS選擇器li:nth-last-child(2)和li:last-child隱藏最后兩個li的下邊框

此方法僅適用于每行固定顯示兩個li的情況，不需要計算寬高，也不需要設(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個li的下邊框 */
li:nth-last-child(2){border-bottom: 0;}
/* 去除最后一個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. 給每一個 li 設(shè)定右邊框和下邊框線
  2. 通過CSS選擇器li:nth-child(even)隱藏偶數(shù)li的右邊框
  3. 通過CSS選擇器li:nth-last-child(2)和li:last-child隱藏最后兩個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;}
/* 去除每一行里第一個td的左邊框 */
td:first-child{ border-left:0;}
/* 去除每一行里最后一個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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1141.html

相關(guān)文章

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

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

    sarva 評論0 收藏0

  • H5多列布局

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

    Jingbin_ 評論0 收藏0

  • H5多列布局

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

    mayaohua 評論0 收藏0

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

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

    pingink 評論0 收藏0

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

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

    Lin_R 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<