<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>各种类型的线条</title>

	<style type="text/css">

		*{

			margin: 0;

			padding: 0;

		}

		.container{

			height: 100px;

			font-size: 24px;

			font-weight: bold;

			background: #f3f3f3;

			margin-bottom: 30px;

			text-align: center;

			line-height: 100px;

		}

		.line_one h3{

			vertical-align: middle;

			text-align: center;

			line-height: 100px;

		}

		.line_one h3 span{

			vertical-align: middle;

			display: inline-block;

			padding: 0 50px;

		}

		.line_one h3:before,.line_one h3:after{

			display: inline-block;

			vertical-align: middle;

			content: "";

			width: 100px;

			height: 3px;

			background: #000000;

		}

		.line_two span{

			letter-spacing: -1px; //通过设置字符间距是线之间的空白消失

		}

		.line_two strong{

			padding: 0 50px;

		}

	</style>

</head>

<body>

	<div class="container line_one">

		<h3><span>世界那么大</span></h3>

	</div>

	<div class="container line_two">

		<h3>

			<span>—————————</span>

			<strong>世界那么大</strong>

			<span>—————————</span>

		</h3>

	</div>

	<div class="container line_four">

	</div>

	<div class="container line_five">

	</div>

	<div class="container line_six">

	</div>

	<div class="container line_seven">

	</div>

</body>

</html>

　　

Demo—标题左右两侧的对等横线的更多相关文章

  1. bootstrap 页面标题

    页面标题会突出显示,当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题显得特别有用,页面标题会给不是页面标题之间的元素加上横线 加以区分,以突出标题显示. 页面标题类 显示效果图 代码 ...

  2. 6-Highcharts曲线图之带标识

    <!DOCTYPE> <html lang='en'> <head> <title>6-Highcharts曲线图之带标识</title> ...

  3. 5-Highcharts曲线图之轴反转

    <!DOCTYPE> <html lang='en'> <head> <title>5-Highcharts曲线图之轴反转</title> ...

  4. 视区相关单位vw, vh..简介以及可实际应用场景

    这篇文章发布于 2012年09月24日,星期一,01:15,归类于 css相关. 阅读 37012 次, 今日 12 次 by zhangxinxu from http://www.zhangxinx ...

  5. 实现tip浮层

    实现简单的tip浮层: html代码: <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  6. ExtJS4.2学习(11)——高级组件之Grid

    大纲: 1.首先,搭建起来一个最基础的Grid组件: 2.其次,利用前边MVC架构将代码重构: 3.再者,介绍下Grid的一些特性. 一.搭建基础的Grid组件 在文章的开始,我们首先简单的搭建一个G ...

  7. DIV+CSS命名参考

    用了一段CSS布局设计网页,发现自己的命名有点混乱,完全按照自己的想法命名,虽然没什么影响,有不给别人看源文件,但是工作室有时候和团队合作完成项目的时候,就遇到麻烦了,要修改一个地方相当的费事.所以还 ...

  8. 结构-行为-样式-css&html横纵居中最佳实践

    最近在做手机端的H5项目,有个标题是在一根横线中的,就是水平居中加垂直居中(如图一).这应该是前端开发中经常遇到的一个场景了,做的次数多了就有一些体会,我今天就总结了下这种结构的实现思路:首先,用元素 ...

  9. jFreeChart利用CategoryDatase,ChartFactory.createBarChart生成的柱状图

    package com.potevio.rnd; import java.io.File; import java.io.FileNotFoundException; import java.io.F ...

随机推荐

  1. python 打造一个sql注入脚本 （一）

    0x00前言: 昨天刚刚看完小迪老师的sql注入篇的第一章 所以有了新的笔记. 0x01笔记: sql注入原理: 网站数据传输中,接受变量传递的值未进行过滤,导致直接带入数据库查询执行的操作. sql ...

  2. C经典实例

    1,九九乘法表 undefined reference to `sqrt' linux本身无math库 -lm,伪链接;

  3. 说说JDK中的List－ArrayList、Vector、LinkedList

    为方便开发人员,JDK提供了一套主要数据结构的实现,比如List.Map等.今儿说说List接口. List接口的一些列实现中,最常用最重要的就是这三个:ArrayList.Vector.Linked ...

  4. 关于String和StringBuilder、StringBuffer的一个简单性能测试

    String a=String b + String c + String d 这种代码在程序里应该随处可见,一部分人不知道这段代码的缺陷在哪,另一部分人知道这样写不好,但是太顺手了下意识就写了. 在 ...

  5. Django的contenttypes应用、缓存相关

    一.django的contenttypes contenttypes 是Django内置的一个应用 , 可以追踪项目中所有app 和 model 的对应关系, 并记录djang_content_typ ...

  6. halcon采集一幅图像

    **顺序也很重要,必须现有窗口,才能设置属性 dev_close_window()dev_open_window (0, 0, 1400, 1200, 'black', WindowHandle)de ...

  7. 教你看懂Code128条形码

    首     页 条码控件 条码技术 条码新闻 合作伙伴 联系我们 常见问题 电话:010-84827961 当前位置:条形码控件网 > 条形码控件技术文章 > >正文   教你看懂C ...

  8. C# a++ 与 ++a 的区别

    C# a++ 与 ++a 的区别 运行环境:Window7 64bit,.NetFramework4.61,C# 6.0: 编者:乌龙哈里 2017-02-21 查资料时看到别人的写法 while(+ ...

  9. C++Primer笔记-----day06

    ================================================================day06=============================== ...

  10. git如何处理别人的pull request及解决冲突 （转）

    原贴地址 出过两次了,每次都查很多资料,太蛋疼,记录在此. 当你的项目比较牛逼的时候,有人给你贡献代码,但他修改的地方恰恰你前阵子也修改了,这样在github中就不能够自动merge了. 因此你需要手 ...