可能是最优雅的分割线实现方式CSS实现

前段时间在做项目迭代的时候遇到一个需求，其中包含一条分割线，大致大概长这样：

然后我就看到项目之前实现分割线的方法，基本都是这样实现的：

<div>物料下载(仅内网可下载)</div>

div{height: 40px;line-height: 40px;text-align: center;font-size: 12px;color: #ccc;position: relative;margin-bottom: 15px;&::before {content: '';position: absolute;left: -20px;top: 19px;z-index: 1;background-color: #ddd;width: 35%;height: 1px;}&::after {content: '';position: absolute;right: -20px;top: 19px;z-index: 1;background-color: #ddd;width: 35%;height: 1px;}
}

于是乎，我就搜了一下，发现大家好像都是这样实现分割线的，于是，我就暗戳戳地用自己的方法来实现了一套"华丽丽"的【分割线】，以下是我的实现方法：

<fieldset><legend>物料下载(仅内网可下载)</legend>
</fieldset>

当我不加任何样式的时候，它长这样

现在，我们再来稍微来给它加点样式康康:

fieldset {border: 0;border-top: 1px solid #ddd;text-align: center;legend {padding: 0 5%;}
}

当当当当，就这几行样式，就可以呈现出和之前方案一模一样的效果啦，是不是一下子少了很多工作量？
这两种实现方式你都可以在我建的这codePen项目中看到。

最后，我们再来说说这里的fieldset 和 legend标签：

上面截图是MDN中对它的解释和用法。

我们可以看到，其实fieldset标签是用来呈现分组样式的，一般我们可能会用在表单里多一些，fieldset标签不仅可以包裹legend元素，还有其他元素可以包裹，只是legend的呈现形式就会像这个组的标题一样，当时想到用这个实现分割线是因为很早之前学html的时候记得有这个属性，但一直没有在实践中用到过它，因为它的样式大多时候并不能满足我们的UI设计，但那天突发奇想，抱着试试的态度，居然真的找到了它的“最佳实践”，哈哈哈，推荐给大家呀~

也欢迎大家关注我，一起学习，一起进步呀：

B站(短视频类，基本控制在10分钟内，讲解清楚一个小的知识点)：web前端aliveAmy

CSDN: aliveAmy

掘金(之前没怎么用过掘金，但以后也会在上面更新啦): aliveAmy

有任何疑问也可以发邮件给我，看到后会及时回复大家： aliveAmy719@gmail.com

可能是最优雅的分割线实现方式CSS实现相关推荐

jupyter python视频教程_【邢不行|量化小讲堂22】优雅的Python编程方式：Jupyter Notebook视频教程...
引言: 邢不行的系列帖子"量化小讲堂",通过实际案例教初学者使用python进行量化投资,了解行业研究方向,希望能对大家有帮助. 个人微信:xingbuxing0807,有问题欢迎 ...
git rebase VS git merge？更优雅的 git 合并方式值得拥有
写在前面如果你不能很好的应用 Git,那么这里为你提供一个非常棒的 Git 在线练习工具 Git Online ,你可以更直观的看到你所使用的命令会产生什么效果另外,你在使用 Git 合并分支时只 ...
聊一聊工作中如何优雅的通过TDD方式来维护一个高质量的NPM包
背景最近一直在采用TDD(测试驱动开发)的方式来维护公司内部的一套通用业务逻辑. 既然是应用到公司实际项目中的,那就不能随随便便搭个脚手架来完成了. 调研过程中,发现TypeScript libra ...
程序员过关斩将--更加优雅的Token认证方式JWT
点击上方"蓝字"带你去看小星星菜菜,上次你讲的cookie和session认证方式,我这次面试果然遇到了结果怎么样? 结果面试官问我还有没有更好的方式? 看来你又挂了别说了, ...
Spring Boot项目优雅的全局异常处理方式（全网最新）
全局异常处理前言一.全局异常处理方式一 1.1 自定义全局异常类 1.2 手动抛出异常 1.3 测试打印二.全局异常处理方式二 2.1 定义基础接口类 2.2 定义枚举类 2.3 自定义异常类 ...
java token生成和验证_程序员应该如何设计更优雅的Token认证方式？
基于Token的认证通过上一篇你大体已经了解session和cookie认证了,session认证需要服务端做大量的工作来保证session信息的一致性以及session的存储,所以现代的web应用 ...
Vue 三种带文字分割线实现方式
第一种利用::before 和 ::after实现 <div class="not_has_more">常用品牌</div> .not_has_more ...
html分割线自动适应,CSS实现自适应分隔线的N种方法
CSS实现自适应分隔线的N种方法分割线是网页中比较常见的一类设计了, 这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景 ...
转：【总结】浏览器CSS Hacks汇总，浏览器兼容方式CSS Hacks
[总结]浏览器CSS Hacks汇总浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的漏洞 ...

可能是最优雅的分割线实现方式CSS实现

可能是最优雅的分割线实现方式CSS实现相关推荐

最新文章

热门文章