CSS3田字格列表的样式编写方法


Posted in HTML / CSS onNovember 22, 2018

在很多项目中,需要实现分格展示的功能,中间有灰色分割线,两侧没有。

如图:

CSS3田字格列表的样式编写方法

按照一般的思路,设置好li的宽度,通过nth-of-type(n){}的方式给li标签添加样式。

设置每个li 33.33%的宽度,但当我们添加1px边框时,最右边的内容就被挤了下来。

这时可以通过给父级 ul 添加:before :after 伪类元素来实现。而不占用li的width

当显示3列时,通过给ul 添加:before来实现

CSS

<style>
        ul li{ list-style: none;}
        .mp-list{   
            position: relative;
            overflow: hidden;
            z-index: 0;
            background-color: #fff;
        }        
        .mp-list:before {
            content: '';
            position: absolute;
            width: 33.33%;
            left: 33.33%;
            height: 100%;
            border-left: .02rem solid #ddd;
            border-right: .02rem solid #ddd;
        }
        .mp-list li {
            width: 33.33%;
            height: 2rem;
            line-height: 2rem;
            font-size: .28rem;
            text-align: center;
            border-bottom: .02rem solid #ddd;
            margin-bottom: -1px;
            float: left;
            position: relative;
            z-index: 10;
            color: #212121;
        }
        .mp-list li a {
            color: #212121;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: .28rem;
        }
    </style>

HTML

<ul class="mp-list">
    <li><a hybrid-link="" href="" title="">香港</a></li>
    <li><a hybrid-link="" href="" title="">澳门</a></li>
    <li><a hybrid-link="" href="" title="">台湾</a></li>
    <li><a hybrid-link="" href="" title="">曼谷</a></li>
    <li><a hybrid-link="" href="" title="">新加坡</a></li>
    <li><a hybrid-link="" href="" title="">首尔</a></li>
    <li><a hybrid-link="" href="" title="">东京</a></li>
    <li><a hybrid-link="" href="" title="">济州岛</a></li>
    <li><a hybrid-link="" href="" title="">芭堤雅</a></li>
</ul>
当显示4列时,给:after添加样式,注意需要更改li的width、.mp-list:before的位置。
.mp-list:after {
    content: '';
    position: absolute;
    width: 10%;
    left: 75%;
    height: 100%;
    border-left: .02rem solid #ddd;
    border-right: 0;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
详解纯CSS3制作的20种loading动效
Jul 05 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 #HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 #HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 #HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 #HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 #HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 #HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 #HTML / CSS
You might like
php Undefined index的问题
2009/06/01 PHP
PHP开发过程中常用函数收藏
2009/12/14 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
Cookie 小记
2010/04/01 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
python实现马耳可夫链算法实例分析
2015/05/20 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
python selenium xpath定位操作
2020/09/01 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
介绍一下gcc特性
2012/01/20 面试题
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
医学生个人求职信范文
2013/09/24 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
入党介绍人评语
2014/05/06 职场文书
班组建设经验交流材料
2014/05/12 职场文书
信用卡催款律师函
2015/05/27 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
mysql死锁和分库分表问题详解
2021/04/16 MySQL
Java 在线考试云平台的实现
2021/11/23 Java/Android
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers