摘要:单个标签实现分隔线优点代码简洁巧用背景色实现分隔线优点代码简洁,可自适应宽度实现分隔线点此查看实例展示优点文字可多行浮动实现分隔线优点利用字符实现分隔线小小分隔线字符来实现优点代码简洁以上简单介绍了分隔线的
单个标签实现分隔线:
.demo_line_01{
</>复制代码
padding: 0 20px 0;
margin: 20px 0;
line-height: 1px;
border-left: 200px solid #ffffd;
border-right: 200px solid #ffffd;
text-align: center;
}
优点:代码简洁
巧用背景色实现分隔线:
.demo_line_02{
</>复制代码
height: 1px;
border-top: 1px solid #ffffd;
text-align: center;
}
.demo_line_02 span{
</>复制代码
position: relative;
top: -8px;
background: #fff;
padding: 0 20px;
}
优点:代码简洁,可自适应宽度
inline-block实现分隔线:
点此查看实例展示
.demo_line_03{
</>复制代码
width:600px;
}
.demo_line_03 b{
</>复制代码
background: #ffffd;
margin-top: 4px;
display: inline-block;
width: 180px;
height: 1px;
_overflow: hidden;
vertical-align: middle;
}
.demo_line_03 span{
</>复制代码
display: inline-block;
width: 220px;
vertical-align: middle;
}
优点:文字可多行
浮动实现分隔线:
.demo_line_04{
</>复制代码
width:600px;
}
.demo_line_04{
</>复制代码
overflow: hidden;
_zoom: 1;
}
.demo_line_04 b{
</>复制代码
background: #ffffd;
margin-top: 8px;
float: left;
width: 26%;
height: 1px;
_overflow: hidden;
}
优点:NUN
利用字符实现分隔线:
</>复制代码
letter-spacing: -1px;
color: #ffffd;
}
.demo_line_05 span{
</>复制代码
letter-spacing: 0;
color: #222;
margin:0 20px;
}
优点:代码简洁 以上简单介绍了分隔线的写法,也许还有其它比较合适的写法,看环境各取所需吧!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/52359.html
摘要:单个标签实现分隔线优点代码简洁巧用背景色实现分隔线优点代码简洁,可自适应宽度实现分隔线点此查看实例展示优点文字可多行浮动实现分隔线优点利用字符实现分隔线小小分隔线字符来实现优点代码简洁以上简单介绍了分隔线的 showImg(https://segmentfault.com/img/bVbaGqW?w=766&h=442);单个标签实现分隔线: .demo_line_01{ paddin...
摘要:文本标题元素注意在一个页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码标题元素元素默认效果是显示最大显示最小默认效果是由浏览器自带样式提供可以通过进行修改每个标题元素是独占一行并且是垂直排列在实际开发中常用的标题元素最 文本 标题元素 注意: 在一个HTML页面中最好只使用一个标题 因为浏览器只会抓取一个多了没用 示例代码: 一花一世界 一叶一孤城 娃哈哈 爽歪歪...
摘要:文本标题元素注意在一个页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码标题元素元素默认效果是显示最大显示最小默认效果是由浏览器自带样式提供可以通过进行修改每个标题元素是独占一行并且是垂直排列在实际开发中常用的标题元素最 文本 标题元素 注意: 在一个HTML页面中最好只使用一个标题 因为浏览器只会抓取一个多了没用 示例代码: 一花一世界 一叶一孤城 娃哈哈 爽歪歪...
摘要:的演示整个项目的地址的地址起初只是想简单开始重新做一遍百度前端技术学院的任务,但是在做的过程中萌生了要记录下自己在过程中遇到的一系列问题的想法。现在我把自己完成的小项目的源码在上分享出来,希望可以帮到广大前端初学者们。 Task02的演示DEMO:https://amnova.github.io/New-... 整个项目的GitHub地址:https://github.com/amn...
摘要:的演示整个项目的地址的地址起初只是想简单开始重新做一遍百度前端技术学院的任务,但是在做的过程中萌生了要记录下自己在过程中遇到的一系列问题的想法。现在我把自己完成的小项目的源码在上分享出来,希望可以帮到广大前端初学者们。 Task02的演示DEMO:https://amnova.github.io/New-... 整个项目的GitHub地址:https://github.com/amn...
阅读 1077·2021-09-27 13:36
阅读 1168·2021-09-08 09:35
阅读 1224·2021-08-12 13:25
阅读 1556·2019-08-29 16:52
阅读 3071·2019-08-29 15:12
阅读 2852·2019-08-29 14:17
阅读 2756·2019-08-26 13:57
阅读 1134·2019-08-26 13:51
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要