1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .demo {
  8.                 width: 600px;
  9.             }
  10.             .demo-container {
  11.                 clear: both;
  12.                 padding: 30px 20px;
  13.                 text-align: left;
  14.                 margin: 0 auto;
  15.                 line-height: 18px;
  16.             }
  17.  
  18.             .line-01 {
  19.                 margin: 20px 0;
  20.                 line-height: 1px;
  21.                 border-left: 200px solid #ddd;
  22.                 border-right: 200px solid #ddd;
  23.                 text-align: center;
  24.             }
  25.  
  26.             .line-02 {
  27.                 height: 1px;
  28.                 border-top: 1px solid #ddd;
  29.                 text-align: center;
  30.             }
  31.             .line-02 span {
  32.                 position: relative;
  33.                 top: -12px;
  34.                 background: #fff;
  35.                 padding: 0 20px;
  36.             }
  37.             .line-03 {
  38.                 width: 600px;
  39.             }
  40.             .line-03 b {
  41.                 background: #ddd;
  42.                 margin-top: 4px;
  43.                 display: inline-block;
  44.                 width: 180px;
  45.                 height: 1px;
  46.                 overflow: hidden;
  47.                 vertical-align: middle;
  48.             }
  49.             .line-03 span {
  50.                 display: inline-block;
  51.                 width: 220px;
  52.                 vertical-align: middle;
  53.                 text-align: center;
  54.             }
  55.             .line-04 {
  56.                 overflow: hidden;
  57.                 zoom: 1;
  58.             }
  59.             .line-04 b {
  60.                 background: #ddd;
  61.                 margin-top: 12px;
  62.                 float: left;
  63.                 width: 26%;
  64.                 height: 1px;
  65.                 overflow: hidden;
  66.             }
  67.             .line-04 span {
  68.                 padding: 0 10px;
  69.                 width: 32%;
  70.                 float: left;
  71.                 text-align: center;
  72.             }
  73.             .line-05 {
  74.                 letter-spacing: -1px;
  75.                 color: #ddd;
  76.             }
  77.             .line-05 span {
  78.                 letter-spacing: 0;
  79.                 color: #222;
  80.                 margin: 0 20px;
  81.             }
  82.  
  83.         </style>
  84.     </head>
  85.     <body>
  86.         <div class="demo-container demo">
  87.             <div class="line-01">小小分隔线 单标签实现</div><br/>
  88.             <div class="line-02">
  89.                 <span>小小分隔线 巧用色实现</span>
  90.             </div><br/>
  91.             <div class="line-03">
  92.                 <b></b>
  93.                 <span>小小分隔线 inline-block实现</span>
  94.                 <b></b>
  95.             </div><br/>
  96.             <div class="line-04">
  97.                 <b></b>
  98.                 <span>小小分隔线 浮动来实现</span>
  99.                 <b></b>
  100.             </div><br/>
  101.             <div class="line-05">———————————<span>小小分隔线 字符来实现</span>————————————</div>
  102.         </div>
  103.     </body>
  104. </html>

[CSS3] 几种分割线实现方法的更多相关文章

  1. .Net MVC 导入导出Excel总结(三种导出Excel方法，一种导入Excel方法) 通过MVC控制器导出导入Excel文件(可用于java SSH架构)

    .Net MVC  导入导出Excel总结(三种导出Excel方法,一种导入Excel方法) [原文地址] 通过MVC控制器导出导入Excel文件(可用于java SSH架构)   public cl ...

  2. .NET中常用的几种解析JSON方法

    一.基本概念 json是什么? JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是一种轻量级的数据交换格式,是存储和交换文本信息的语法. ...

  3. IOS开发－几种截屏方法

    IOS开发-几种截屏方法 1.        UIGraphicsBeginImageContextWithOptions(pageView.page.bounds.size, YES, zoomSc ...

  4. C语言的几种取整方法

    C语言的几种取整方法 来源:http://blog.sina.com.cn/s/blog_4c0cb1c001013ha9.html 1.直接赋值给整数变量.如: int i = 2.5; 或 i = ...

  5. Word 2010巧妙绘制各种分割线的方法（图文）

    引用: 使用Word编辑文档时,可能为了使某些内容醒目显示,或者为了使文档内容显示的更美观.更有层次感,需要为文档添加一些分割线,如添加下框线.插入水平线.使用特殊符号快速绘制分割线等等.在Word ...

  6. 24种设计模式--模版方法模式【Template Method Pattern】

    周三,9:00,我刚刚坐到位置,打开电脑准备开始干活.“小三,小三,叫一下其它同事,到会议室,开会”老大跑过来吼,带着淫笑.还不等大家坐稳,老大就开讲了,“告诉大家一个好消息,昨天终于把牛叉模型公司的 ...

  7. VB几种函数参数传递方法，Variant，数组，Optional，ParamArray

    VB几种函数参数传递方法,Variant,数组,Optional,ParamArray 一) 过程的参数被缺省为具有 Variant 数据类型. 1)ByRef按 地址传递参数在 VB 中是缺省的 按 ...

  8. iOS中常用的四种数据持久化方法简介

    iOS中常用的四种数据持久化方法简介 iOS中的数据持久化方式,基本上有以下四种:属性列表.对象归档.SQLite3和Core Data 1.属性列表涉及到的主要类:NSUserDefaults,一般 ...

  9. iPhone开发 数据持久化总结（终结篇）—5种数据持久化方法对比

    iPhone开发 数据持久化总结(终结篇)—5种数据持久化方法对比   iphoneiPhoneIPhoneIPHONEIphone数据持久化 对比总结 本篇对IOS中常用的5种数据持久化方法进行简单 ...

随机推荐

  1. linux 常用压缩打包和解压命令

    ## zcvf gzip jcvf bzip2 gunzip  tar zxvf  jxvf  

  2. 2018.09.01 独立集（树形dp）

    描述 给定一颗树(边权为1),选取一个节点子集,使得该集合中任意两个节点之间的距离都大于K.求这个集合节点最多是多少 输入 第一行是两个整数N,K 接下来是N-1行,每行2个整数x,y,表示x与y有一 ...

  3. 2018.08.28 codeforces600E（dsu on tree）

    传送门 一道烂大街的dsu on tree板题. 感觉挺有趣的^_^ 代码真心简单啊! 就是先处理轻儿子,然后处理重儿子,其中处理轻儿子后需要手动消除影响. 代码: #include<bits/ ...

  4. ThinkPHP5 union分页

    直接贴代码,记录一下,备用 $a = Db::name(表名)->field(字段)->where(条件)->buildSql(); $b = Db::name(表名)->fi ...

  5. python面向对象-4类的继承与方法的重载

    1.类的继承与方法的重载 上面就是先定义了一个类A,然后由定义了一个类B,B继承了类A,这样B就有了A的非私有属性和方法. class Washer: company='ZBL' def __init ...

  6. 《Forward团队-爬虫豆瓣top250项目-设计文档》

    成员:马壮,李志宇,刘子轩,年光宇,邢云淇,张良 设计方案: 1.能分析HTML语言: 2.提取重要数据,并保存为文本文档: 3.用PY代码调取文本文档的数据: 4.编写提取部分数据的python代码 ...

  7. 用Execute操作数据库

    1.原型是:_ConnectionPtr Execute( _bstr_t CommandText, VARIANT * RecordsAffected, long Options ); 参数 1. ...

  8. PAT甲 1009. Product of Polynomials (25) 2016-09-09 23:02 96人阅读 评论(0) 收藏

    1009. Product of Polynomials (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yu ...

  9. hdu 4952 暴力

    http://acm.hdu.edu.cn/showproblem.php?pid=4952 给定x,k,i从1到k,每次a[i]要是i的倍数,并且a[i]大于等于a[i-1],x为a0 递推到下一个 ...

  10. 用 PHP 编写 http 服务器

    概述 众所周知,我们一般使用 PHP 开发Web程序时需要使用到比如Apache或Nginx等Web服务器来支持,那么有没有办法直接使用PHP开发HTTP服务器,答案当然是可以的,最近看了一遍Work ...