<!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. 详解JMeter正则表达式

    详解JMeter正则表达式(1) 1．概览 JMeter中包含范本匹配软件Apache Jakarta ORO .在Jakarta网站上有一些关于它的文档,例如a summary of the pat ...

  2. spring mvc , spring data jpa 知识点

    <mvc:view-controller path="/login" view-name="login.jsp"/> <!-- 会直接跳到/W ...

  3. cocos2d-js 安卓自定义本地通知功能

    安卓新手,笔记有理解不当的地方望指出,经过几天折腾终于可以实现类似ios的本地通知功能(ios就几行代码),可能有第三方sdk可以方便实现,暂时没去找 思路: 1. startService 和bin ...

  4. hive 报错 java.lang.RuntimeException: Unable to instantiate org.apache.hadoop.hive.metastore.HiveMetaStoreClient

    Exception in thread "main" java.lang.RuntimeException: java.lang.RuntimeException: Unable ...

  5. 【转】Hibernate的getSQLQuery方法对char类型的解析问题

    [转]Hibernate的getSQLQuery方法对char类型的解析问题 建立数据库: create table T_TEST1( id char (32), name varchar (255) ...

  6. spring-data-jpa+hibernate 各种缓存的配置演示

    本文所有测试用代码在https://github.com/wwlleo0730/restjplat 的分支addDB上 目前在使用spring-data-jpa和hibernate4的时候,对于缓存关 ...

  7. hdu-1067（最大独立集）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1068 题意:一个男生集合和一个女生集合,给出两个集合之间一一对应的关系,求出两个集合中最大独立集的点数 ...

  8. Deployment is out of date due to changes in the underlying project contents. Deployment is out of date due to changes in the underlying project contents. You'll need to manually 'Redeploy' the projec

    原因1:导入的jar包路径不对,造成第一个错误, 原因2:设置右键工程->属性->myeclipse->web->deployment选use workbenk defaul ...

  9. node.js初步总结

    一:先上一段代码 process.argv.forEach(function (val, index, array) {    console.log(index + ":" + ...

  10. spring mvc学习笔记（一）web.xml文件配置的一点重要信息

    通过这个web.xml文件可以看出,所有的*.shtml的请求,都会被springmvc这个servlet处理.这里如果没有指定contextConfigLocation这个参数,将会按照默认规则在c ...