<!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. Banner中文字怎么排版才好看?

    今天这命题,相信有很多人提出过疑问,一个好的文字排版会给你的作品增添色彩,我们先看看好的作品是怎样的. 看完这些图大家都能感觉出来这是一个好的作品,大家天生就对美和丑有一定的区分. 其实文字排版也好, ...

  2. div 自适应宽度

    div 自适应宽度 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  3. 3层+SVN学习笔记(2)

    在对于餐桌付款程序设计时,需要先选中餐桌,然后点击付款.正常情况是这样的: 在程序设计时,没有考虑到用户未点击餐桌而直接进行付款的情况,程序出现以下错误: 在设计时,需要考虑用户未点击餐桌而直接进行付 ...

  4. Class^=,Class*= ,Class$=含义(转)

    在Twitter 中有看到如下selector: .show-grid [class*="span"] { background-color: #eee; text-align: ...

  5. slice、substring、substr

    slice() 定义和用法 slice() 方法可从已有的数组中返回选定的元素. string.slice(start, end)提取一个字符串 string.substring(start, end ...

  6. HQL进阶

    1.HQL查询性能优化 1.1.避免or操作 1.1.1.where子句包含or操作,执行时不使用索引 from Hose where street_id='1000' or street_id='1 ...

  7. Spring 获取资源文件路径

    import org.springframework.core.io.ClassPathResource; import org.springframework.core.io.Resource; s ...

  8. 使用ASI传递post表单..参数是数组

    你可以使用addPostValue方法来发送相同name的多个数据(梦维:服务端会以数组方式呈现): ASIFormDataRequest *request = [ASIFormDataRequest ...

  9. POJ3104 Drying 2017-05-09 23:33 41人阅读 评论(0) 收藏

    Drying Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 15604   Accepted: 3976 Descripti ...

  10. PAT甲 1002. A+B for Polynomials (25) 2016-09-09 22:50 64人阅读 评论(0) 收藏

    1002. A+B for Polynomials (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue T ...