<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .demo {

                width: 600px;

            }

            .demo-container {

                clear: both;

                padding: 30px 20px;

                text-align: left;

                margin: 0 auto;

                line-height: 18px;

            }

            .line-01 {

                margin: 20px 0;

                line-height: 1px;

                border-left: 200px solid #ddd;

                border-right: 200px solid #ddd;

                text-align: center;

            }

            .line-02 {

                height: 1px;

                border-top: 1px solid #ddd;

                text-align: center;

            }

            .line-02 span {

                position: relative;

                top: -12px;

                background: #fff;

                padding: 0 20px;

            }

            .line-03 {

                width: 600px;

            }

            .line-03 b {

                background: #ddd;

                margin-top: 4px;

                display: inline-block;

                width: 180px;

                height: 1px;

                overflow: hidden;

                vertical-align: middle;

            }

            .line-03 span {

                display: inline-block;

                width: 220px;

                vertical-align: middle;

                text-align: center;

            }

            .line-04 {

                overflow: hidden;

                zoom: 1;

            }

            .line-04 b {

                background: #ddd;

                margin-top: 12px;

                float: left;

                width: 26%;

                height: 1px;

                overflow: hidden;

            }

            .line-04 span {

                padding: 0 10px;

                width: 32%;

                float: left;

                text-align: center;

            }

            .line-05 {

                letter-spacing: -1px;

                color: #ddd;

            }

            .line-05 span {

                letter-spacing: 0;

                color: #222;

                margin: 0 20px;

            }

        </style>

    </head>

    <body>

        <div class="demo-container demo">

            <div class="line-01">小小分隔线 单标签实现</div><br/>

            <div class="line-02">

                <span>小小分隔线 巧用色实现</span>

            </div><br/>

            <div class="line-03">

                <b></b>

                <span>小小分隔线 inline-block实现</span>

                <b></b>

            </div><br/>

            <div class="line-04">

                <b></b>

                <span>小小分隔线 浮动来实现</span>

                <b></b>

            </div><br/>

            <div class="line-05">———————————<span>小小分隔线 字符来实现</span>————————————</div>

        </div>

    </body>

</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. Windows下误删资料的恢复

    只要三步,就能找回你删掉并清空回收站的东西 : 1.打开“运行”消息框,然后输入regedit (打开注册表) 2.依次展开:HEKEY——LOCAL——MACHIME/SOFTWARE/micros ...

  2. python基础之删除文件及删除目录的方法-乾颐堂

    下面来看一下python里面是如何删除一个文件及文件夹的~~ 首先引入OS模块 import os 删除文件: os.remove() 删除空目录: os.rmdir() 递归删除空目录: os.re ...

  3. Task构造

    //原文:http://www.tuicool.com/articles/IveiQbQ 创建并且初始化Task 使用lambda表达式创建Task Task.Factory.StartNew(() ...

  4. jQuery 插件使用记录

    Validate 表单验证 ver 1.6 浏览更多 默认情况下,当表单 submit 时,那些验证不通过的 field 旁边会出现错误消息提示,有时很方便,但有时看起来很不美观.可以关闭此消息提示. ...

  5. 2018.10.22 bzoj4380: [POI2015]Myjnie（区间dp）

    传送门 区间dp好题. f[i][j][k]f[i][j][k]f[i][j][k]表示区间[i,j][i,j][i,j]最小值为kkk时的最大贡献. 然后可以枚举端点转移. 当时口胡到这儿就不会了. ...

  6. 2018.10.12 NOIP模拟 数据结构（线段树）

    传送门 sb线段树题居然还卡常. 修改操作直接更新区间最小值和区间标记下传即可. 询问加起来最多5e65e65e6个数. 因此直接询问5e65e65e6次最小值就行了. 代码

  7. day02(继承，重写，this，super，final，抽象类)

    继承 概述:日常生活中儿女总会继承长辈的遗产,java语言也是.通过继承多种实物之间形成一种关系. 特点: ①一个类只能继承一个父类 ②一个父类可以有多个子类 ③可以多层继承(a类继承b类   C类继 ...

  8. 20155202 2016-2017-2 《Java程序设计》第6周学习总结

    20155202 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 输入输出 数据从来源取出:输入串流 java.io.InputStream 写入目的的:输出 ...

  9. java web基础之mvc模式设计（一）--使用httpservlet实现mvc分层设计，DAO层使用的是dbutils实现与数据库的链接

    一:1.最终的实现效果图: 2.案例的目录结构: 3.案例中使用到的jar包: 二:案例的链接数据库的层次结构关系:数据库是:mysql ,数据库名字:dsm,表格名字:customers 数据库表格 ...

  10. Java内存模型以及Volatile、Synchronize关键字的疑问

    1.众所周知,java的内存模型是一个主内存,每个线程都有一个工作内存空间,那么主内存同步到工作内存是什么时候发生的呢?工作内存同步会主内存又是什么时候发生的呢? 在cpu进行线程切换时就会发生这些同 ...