<!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. 系统调用方式文件编程-open

    通过Linux系统调用函数编写应用程序,该应用程序实现文件的复制功能 文件描述符--在Linux系统中,所有打开的文件也对应一个数字,这个数字由系统来分配. 1.打开文件--open 头文件:#inc ...

  2. c++中类的静态成员对象

    在c++中,可以声明一个静态的成员对象,但是此时仅仅声明,没有定义,也不会创建这个内部的静态成员对象.只有在类体外部定以后才能创建这个对象. #include<iostream> usin ...

  3. 2018.09.15 poj2117Electricity（割点）

    传送门 其实求一个图删除一个点之后,联通块最多有多少. 直接tarjan求割点更新答案就行了. 但注意原图不一定连通. 代码: #include<iostream> #include< ...

  4. 2018.08.14 bzoj4241: 历史研究（回滚莫队）

    传送们 简单的回滚莫队,调了半天发现排序的时候把m达成了n... 代码: #include<bits/stdc++.h> #define N 100005 #define ll long ...

  5. 2018.07.18 洛谷P1171 售货员的难题（状压dp）

    传送门 感觉是一道经典的状压dp,随便写了一发卡了卡常数开了个O（2）" role="presentation" style="position: relati ...

  6. 【Unity】2.3 项目浏览器和资源的组织

    分类:Unity.C#.VS2015 创建日期:2016-03-29 一.Project-工程浏览器 前面我们说过,Unity中的Project View(称为工程浏览器)相当于VS2015中的解决方 ...

  7. ssh到远程执行命令并返回

    假设有三台机器 host1,host2,host3,host1能免密登录其他两台.要在第一台的机器里面写一个脚本分别删除每台机器的/root/test.txt rm -rf /root/test.tx ...

  8. NATAPP打穿内网

    前一篇博文写了ngrok作为内网穿透工具现在开始开始学习另外一种内 网穿透natapp(他也是基于ngrok的一种高速内网穿透服务)多的介绍就 不说了,开始进入正题. 第一步:先登录natapp官网( ...

  9. 仿iPhone滑屏操作

    <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <m ...

  10. Object-C中方法

    //方法         //方法分了两种         //1.类方法,类调用,方法以+开头         //2.实例方法,对象调用,方法以-开头              //类方法和实例方 ...