您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容主要讲解“使用CSS3如何编写田字格列表样式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“使用CSS3如何编写田字格列表样式”吧!
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; }
到此,相信大家对“使用CSS3如何编写田字格列表样式”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。