<!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. Joker的运维开发之路

    python 1--数据类型,流程控制 2--数据类型详细操作,文件操作,字符编码 https://mp.weixin.qq.com/s/i3lcIP82HdsSr9LzPgkqww 点开更精彩 目前 ...

  2. ubuntu安装Theano+cuda

    由于学习需要用到GPU加速机器学习算法,需要安装theano+cuda. 开源库的一大问题就是:难安装. 为了搞好这个配置,我是前前后后花了3天,重装了3次ubuntu重装了5次驱动才搞定. 故发此贴 ...

  3. 13_java之final|static|包|匿名对象|代码块|内部类

    01final关键字概念 * A: 概述 继承的出现提高了代码的复用性,并方便开发.但随之也有问题,有些类在描述完之后,不想被继承, 或者有些类中的部分方法功能是固定的,不想让子类重写.可是当子类继承 ...

  4. C++函数及参数

    传值->传递的是数据副本(结构.普通数据类型数据) 传地址->传递的是数据变量的地址(数组等) 传值的缺点是需要复制数据副本,数据量大可能增加内存需求,降低系统运行速度; 传地址也有传地址 ...

  5. [Z]CiteSeer统计的计算机领域的期刊和会议的影响因子

    稍微有点早,04年的,但很全 http://emuch.net/html/200510/128286.html 另附一个不明来路的排名:http://www.wi2.uni-erlangen.de/_ ...

  6. RPC通信

    @version: @author: morgana @license: Apache Licence @contact: vipmorgana@gmail.com @site: @software: ...

  7. 读《分布式一致性原理》JAVA客户端API操作

    创建会话 客户端可以通过创建一个Zookeeper实例来连接服务器.4种构造方法如下 ZooKeeper(connectString, sessionTimeout, watcher): ZooKee ...

  8. RocketMQ初探(一)

    初学RocketMQ,认识一门新技术,还是哪三问:是什么?能干什么?怎么用? 消息中间件主要是实现分布式系统中解耦.异步消息.流量销锋.日志处理等场景. Rocketmq是阿里捐赠给Apache的.3 ...

  9. Kettle中配置oracle RAC

    由于项目中使用了oracle v-ip做了oracle数据库集群,现在需要把项目中程序进行升级. 原来的程序中直接使用的是JDBC然后配置的kettle.properties配置文件,如下图: 根据项 ...

  10. Innobackupex MySQL 全备、增备及恢复

    简介: 在这之前都是通过 mysqldump 来备份数据库的,由于是逻辑备份,所以采用这种备份方式数据是很安全的,跨平台.版本都很容易. 凡事有利必有弊,逻辑备份在你数据库比较大时,备份.恢复数据所耗 ...