<!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. 2018.08.29 NOIP模拟 movie（状压dp/随机化贪心）

    [描述] 小石头喜欢看电影,选择有 N 部电影可供选择,每一部电影会在一天的不同时段播 放.他希望连续看 L 分钟的电影.因为电影院是他家开的,所以他可以在一部电影播放过程中任何时间进入或退出,当然他 ...

  2. 2018.07.23 codeforces 438D. The Child and Sequence（线段树）

    传送门 线段树维护区间取模,单点修改,区间求和. 这题老套路了,对一个数来说,每次取模至少让它减少一半,这样每次单点修改对时间复杂度的贡献就是一个log" role="presen ...

  3. 实现字符串函数，strlen(),strcpy(),strcmp(),strcat()

    实现字符串函数,strlen(),strcpy(),strcmp(),strcat() #include<stdio.h> #include<stdlib.h> int my_ ...

  4. javascript 字符数组转换成以逗号隔开的字符串

    var ids = [];angular.forEach(pulsarServers,function (server) { ids.push(server.id);});ids = ids.join ...

  5. 常见的it软件默认端口

    tomcat:8080 nginx:80 mysql:3306 oracle:1521 nexus:8081 浏览器:80 redis:6379 solr:tomcat部署默认8080 jetty部署 ...

  6. PhotoModeler Scanner教程

    Marking and Referencing 标记和校正 标记和校正是通过多张照片人工匹配共同特征的过程.点击一张图片的明显视觉特征,然后将它匹配到不同角度拍摄的其他图片的相同特征上. Approp ...

  7. （KMP灵活运用 利用Next数组 ）Theme Section -- hdu -- 4763

    http://acm.hdu.edu.cn/showproblem.php?pid=4763 Theme Section Time Limit: 2000/1000 MS (Java/Others)  ...

  8. laravel命令

    新建控制器 php artisan make:controller IssuesController 新建控制器并自动生成对应RESTful风格路由相关CURD方法 php artisan make: ...

  9. HDU1254 推箱子（BFS） 2016-07-24 14:24 86人阅读 评论(0) 收藏

    推箱子 Problem Description 推箱子是一个很经典的游戏.今天我们来玩一个简单版本.在一个M*N的房间里有一个箱子和一个搬运工,搬运工的工作就是把箱子推到指定的位置,注意,搬运工只能推 ...

  10. hdu 1205 吃糖果【鸽巢原理】

    题目 这道题不难,看别人博客的时候发现大家都说用鸽巢原理,这是个什么鬼,于是乎百度之. 1.把某种糖果看做隔板,如果某种糖果有n个,那么就有n+1块区域,至少需要n-1块其他种糖果才能使得所有隔板不挨 ...