<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
.demo {
width: 600px;
}

.line_01 {
padding: 0 20px 0;
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 {
width: 600px;
}

.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>

<div class="demo-container demo">
<div class="line_01">小小分隔线单标签实现</div>
<br>
<br>
<div class="line_02"><span>小小分隔线 巧用色实现</span></div>
<br>
<br>
<div class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></div>
<br>
<br>
<div class="line_04"><b></b><span>小小分隔线 浮动来实现</span><b></b></div>
<br>
<br>
<div class="line_05">———————————<span>小小分隔线 字符来实现</span>————————————</div>
<br>
<br>
</div>

</body>
</html>

css实现分割线的更多相关文章

  1. css 分割线样式_css实现文章分割线的多种方法总结

    这篇文章整理css如何实现文章分割线的多种方式,分割线在页面中可以起到美化作用,那么就来看看使用css实现分割线样式的多种方法.效果如下: 方式一:单个标签实现分隔线: html: <div c ...

  2. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  3. css :before 内容左边 分割线（四）

    商品 左边分割线,使用css伪类实现,before or  after <style> *{ margin:; padding:; } .clearfix { *zoom:; } .cle ...

  4. css分割线 文字居中的7种实现方式

    最近开始研究前端,会不定期更新一些小块代码,写下自己的学习笔记,也希望能和大家一起进步! 1.单个标签实现分隔线: <html> <head lang="en"& ...

  5. css中渐变的分割线和自定义滚动条样式

    css中渐变的分隔线: <div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1 ...

  6. 分割线用CSS样式做出来的效果

    一:单个标签实现分隔线:. ; ; line-height: 1px; border-left: 200px solid #ddd; border-right: 200px solid #ddd; t ...

  7. 最好的导航分割栏，分割线，实现底部透明，纯css

    <div class="Ui_Ct_Line padding_5"> <div>为您推荐</div> </div> .Ui_Ct_L ...

  8. CSS 分割线

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. CSS 3学习——边框

    在CSS 3中可以设置边框圆角.边框阴影和边框图像,分别通过border-radius.border-image和box-shadow属性设置. 边框圆角 border-radius属性是以下4个属性 ...

随机推荐

  1. 在CDH5.5.0上安装Kudu6.0

    1. 下载安装文件: a. CSD文件:KUDU-0.6.0.jar b. kudu parcel:KUDU-0.6.0-1.kudu0.6.0.p0.334-el6.parcel和manifest. ...

  2. Console命令详解,让调试js代码变得更简单

    Firebug是网页开发的利器,能够极大地提升工作效率. 但是,它不太容易上手.我曾经翻译过一篇<Firebug入门指南>,介绍了一些基本用法.今天,继续介绍它的高级用法. ======= ...

  3. myeclipse激活法，可以试一试

    我的myeclipse2014也是这样激活: 第一步:输入任意用户名 第二步:点击Systemid... 按钮,自动生成本机器的systemid. 第三步: 点菜单Tools->RebuildK ...

  4. 破解Outlook数据文件密码/PST访问密码

    不少人会经常用outlook,邮件多的时候可能不定期导出一个PST文件,为安全起见,给PST文件设置访问密码,可是时间长了,难免忘记,怎么办呢?不用担心,你自己就可以解决,无论是Outlook97.O ...

  5. Hive的API的说明

    之前通过命令行的界面可以操作Hive,可是在实际的生产环境中,往往都是需要写API的,因此对Hive的API简单的列举了一下.并对Hive进行了一个简单的封装.具体的封装可以参考github网站主页: ...

  6. url中

    url中汉字被转换为UTF-8,通过此网址可以解析UTF-8编码.在地址栏中输入文字或者其它的,则可能输入法或者是相关的程序进行解析. http://www.mytju.com/classcode/t ...

  7. php 画图片2

    <?php // 使用php操作gd库做图 // 1. 创建一个画布资源 $im = imagecreatetruecolor(200, 50); // 2. 创建背景色 // 2.1 得到背景 ...

  8. Cordova学习（一） 环境搭建

    一.什么是cordova Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等. Cordova还提供了一组统一的Java ...

  9. Java并发编程学习笔记（二）——对象的共享

    主要概念:可见性.重排序.失效数据.最低安全性.发布.逸出.线程封闭(Ad-hoc.栈封闭.ThreadLocal类).不变性.Final域.事实不可变对象. 1.在没有同步的情况下,编译器.处理器以 ...

  10. 使用Excel 2007绘制甘特图

    本文将教大家如何使用Excel 2007制作甘特图.Excel并未提供甘特图类型,但还是可以绘制甘特图的,方法就是通过对堆积条形图类型进行自定义,使之显示任务.任务工期和层次结构. 下面的过程可帮助创 ...