<!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. 修改socket缓冲区大小

    #include <stdio.h>#include <sys/time.h>#include <sys/types.h>#include <sys/sock ...

  2. Laravel Tinker 使用笔记

    我们知道,Laravel Tinker 提供了命令行式的交互调试途径.使用极其方便直观. 使用: #php artisan tinker 要点: 命令要在一行上输入完成,回车执行.>>&g ...

  3. oracle两个客户端路径记录

    32 C:\WINDOWS\assembly\GAC_64\Oracle.DataAccess\2.112.3.0__89b483f429c4734264 C:\WINDOWS\Microsoft.N ...

  4. easyui-tabs及其内容展示

    方案一<div class="easyui-panel">        <div class="easyui-tabs" fit=" ...

  5. 7.20 文本框内容 超出 显示 。。 和 split

    word-wrap:break-word; word-break:break-all; overflow:auto; split  去 :等 ,只要有: 就会在:两边 各生产一个值 ,所有 应习惯把最 ...

  6. android触控,先了解MotionEvent(一)

    http://my.oschina.net/banxi/blog/56421 这是我个人的看法,要学好android触控,了解MotionEvent是必要,对所用的MotionEvent常用的API要 ...

  7. 使用Java实现网络爬虫

    网络爬虫 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本. 另外一些不常使用的名字还有蚂蚁.自动索引.模 ...

  8. 2018.10.04 NOIP模拟 K进制（模拟）

    传送门 签到题,直接瞎模拟就行了. 代码

  9. 2018.07.20 洛谷P4178 Tree（点分治）

    传送门 又一道点分治. 直接维护子树内到根的所有路径长度,然后排序+双指针统计答案. 代码如下: #include<bits/stdc++.h> #define N 40005 using ...

  10. Web Service测试工具小汇

    1..NET WebService Studio 这款工具出自微软内部,最大的优点是可视化很好,不用去看那些XML文件,WebService的基础内容就有XML,但是测试中Case过多,每次测试结果都 ...