CSS实现无外边框列表效果

时间: 2019-03-06阅读: 183标签: 效果

方法一:使用外层容器切割

  1. 给每一个 li 设定右边框和下边框线
  2. 把ul放置在一个外层div中,设定div的宽高,通过overflow:hidden将一部分li的边框隐藏

此方法只需要计算父容器的宽高,能应付任何行与列数,推荐使用。

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{
    /*设置右边框和下边框*/
    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 设定右边框和下边框线
  2. 通过CSS选择器li:nth-child(even)隐藏偶数li的右边框 

  3. 通过CSS选择器li:nth-last-child(2)和li:last-child隐藏最后两个li的下边框

此方法仅适用于每行固定显示两个li的情况,不需要计算宽高,也不需要设置父容器。

CSS部分:

body{background: #f3f3f3;}
ul, li{list-style: none; padding: 0; margin: 0;}
ul{width: 210px;}
/* 设置右边框和下边框 */
li{width: 100px; height: 80px; float: left; background: #fff; border-width: 0 1px 1px 0; border-color: #ff3333; border-style: solid; }
/* 去除偶数li的右边框 */
li:nth-child(even){border-right: 0;}
/* 去除倒数第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 设定右边框和下边框线
  2. 通过CSS选择器li:nth-child(even)隐藏偶数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>11</td>
        <td>12</td>
        <td>13</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
    </tr>
</table>

使用CSS实现逼真的水波纹点击效果

虽然webkit具有遮罩的能力(webkit mask),不过webkit虽然强大,但在跨浏览器上总是它的罩门,况且在性能上也是往往会造成困扰(这也是为什么chrome要这么吃资源了),因此撇开webkit不谈,我们该用什么方法,才可以做出水波纹的效果呢?

css实现页面翻转 正反两面展示不同的内容

页面旋转使用css3的rorateY(180deg) 实现页面的翻转,使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素,demo:<div><div>反面的内容</div><div>正面的内容</div></div>

CSS 搞怪的 text-decoration

今天在改一个项目的时候却遇到了一个莫名其妙的属性:text-decoration,这个属性,其实就只是用来把一段文字加上上横线、删除线或底线的属性罢了,通常会用在移除超链接的底线、或一些特殊强调的效果里头

强大的CSS:用纯css模拟下雪的效果

下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥。浏览器实现动画无非css3和canvas(还有gif)

css滚动视差之水波纹效果

核心属性: background-attachment;这个属性就牛逼了, 它可以定义背景图片是相对视口固定,还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成高大上。

CSS实现文字下面波浪线动画效果

就是使用径向渐变绘制我们的波浪线效果,一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的。所以,我们只要使用径向渐变绘制圆弧

实现一个div的拖拽效果

实现思路:鼠标按下开始拖拽,记录摁下鼠标时的鼠标位置以及元素位置,拖动鼠标记下当前鼠标的位置,鼠标当前位置-摁下时鼠标位置= 鼠标移动距离

css左边竖条的实现方法

问题描述:在只使用一个标签的情况下实现左边竖线。使用border;使用伪元素来实现;内/外阴影;drop-shadow;渐变 linearGradient

better-scroll之吸顶效果巨坑挣扎中

今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC),关于其中的API大家可以去官网看下 这里就给大家介绍几种常用的以及需要注意的点是什么

js实现文字上下滚动效果

做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效。 要点提示: 1、特效初始化代码

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全