资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/文字在线中间，CSS巧妙实现分隔线的几种方法

文字在线中间，CSS巧妙实现分隔线的几种方法

hosition / 1179人阅读

摘要：单个标签实现分隔线优点代码简洁巧用背景色实现分隔线优点代码简洁，可自适应宽度实现分隔线点此查看实例展示优点文字可多行浮动实现分隔线优点利用字符实现分隔线小小分隔线字符来实现优点代码简洁以上简单介绍了分隔线的


单个标签实现分隔线：

.demo_line_01{

</>复制代码 
  1. padding: 0 20px 0;
  2. margin: 20px 0;
  3. line-height: 1px;
  4. border-left: 200px solid #ffffd;
  5. border-right: 200px solid #ffffd;
  6. text-align: center;

}
优点：代码简洁

巧用背景色实现分隔线：

.demo_line_02{

</>复制代码 
  1. height: 1px;
  2. border-top: 1px solid #ffffd;
  3. text-align: center;

}
.demo_line_02 span{

</>复制代码 
  1. position: relative;
  2. top: -8px;
  3. background: #fff;
  4. padding: 0 20px;

}
优点：代码简洁，可自适应宽度

inline-block实现分隔线：

点此查看实例展示

.demo_line_03{

</>复制代码 
  1. width:600px;

}
.demo_line_03 b{

</>复制代码 
  1. background: #ffffd;
  2. margin-top: 4px;
  3. display: inline-block;
  4. width: 180px;
  5. height: 1px;
  6. _overflow: hidden;
  7. vertical-align: middle;

}
.demo_line_03 span{

</>复制代码 
  1. display: inline-block;
  2. width: 220px;
  3. vertical-align: middle;

}
优点：文字可多行

浮动实现分隔线：

.demo_line_04{

</>复制代码 
  1. width:600px;

}
.demo_line_04{

</>复制代码 
  1. overflow: hidden;
  2. _zoom: 1;

}
.demo_line_04 b{

</>复制代码 
  1. background: #ffffd;
  2. margin-top: 8px;
  3. float: left;
  4. width: 26%;
  5. height: 1px;
  6. _overflow: hidden;

}
优点：NUN

利用字符实现分隔线：

———————————小小分隔线 字符来实现————————————

.demo_line_05{

</>复制代码 
  1. letter-spacing: -1px;
  2. color: #ffffd;

}
.demo_line_05 span{

</>复制代码 
  1. letter-spacing: 0;
  2. color: #222;
  3. margin:0 20px;

}
优点：代码简洁 以上简单介绍了分隔线的写法，也许还有其它比较合适的写法，看环境各取所需吧！

GPU云服务器 云服务器 js缓存的几种方法 最基本的几种 html的几种轮播 一段巧妙的css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52359.html

相关文章

  • 文字在线中间，CSS巧妙实现分隔线的几种方法

    摘要：单个标签实现分隔线优点代码简洁巧用背景色实现分隔线优点代码简洁，可自适应宽度实现分隔线点此查看实例展示优点文字可多行浮动实现分隔线优点利用字符实现分隔线小小分隔线字符来实现优点代码简洁以上简单介绍了分隔线的 showImg(https://segmentfault.com/img/bVbaGqW?w=766&h=442);单个标签实现分隔线： .demo_line_01{ paddin...

    CODING 评论0 收藏0

  • HTML与CSS中的文本个人分享

    摘要：文本标题元素注意在一个页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码标题元素元素默认效果是显示最大显示最小默认效果是由浏览器自带样式提供可以通过进行修改每个标题元素是独占一行并且是垂直排列在实际开发中常用的标题元素最 文本 标题元素 注意: 在一个HTML页面中最好只使用一个标题 因为浏览器只会抓取一个多了没用 示例代码: 一花一世界 一叶一孤城 娃哈哈 爽歪歪...

    MartinHan 评论0 收藏0

  • HTML与CSS中的文本个人分享

    摘要：文本标题元素注意在一个页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码标题元素元素默认效果是显示最大显示最小默认效果是由浏览器自带样式提供可以通过进行修改每个标题元素是独占一行并且是垂直排列在实际开发中常用的标题元素最 文本 标题元素 注意: 在一个HTML页面中最好只使用一个标题 因为浏览器只会抓取一个多了没用 示例代码: 一花一世界 一叶一孤城 娃哈哈 爽歪歪...

    iliyaku 评论0 收藏0

  • 2016百度前端技术学院Task02

    摘要：的演示整个项目的地址的地址起初只是想简单开始重新做一遍百度前端技术学院的任务，但是在做的过程中萌生了要记录下自己在过程中遇到的一系列问题的想法。现在我把自己完成的小项目的源码在上分享出来，希望可以帮到广大前端初学者们。 Task02的演示DEMO：https://amnova.github.io/New-... 整个项目的GitHub地址：https://github.com/amn...

    venmos 评论0 收藏0

  • 2016百度前端技术学院Task02

    摘要：的演示整个项目的地址的地址起初只是想简单开始重新做一遍百度前端技术学院的任务，但是在做的过程中萌生了要记录下自己在过程中遇到的一系列问题的想法。现在我把自己完成的小项目的源码在上分享出来，希望可以帮到广大前端初学者们。 Task02的演示DEMO：https://amnova.github.io/New-... 整个项目的GitHub地址：https://github.com/amn...

    lolomaco 评论0 收藏0

发表评论

登陆后可评论

0条评论

hosition

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<