<!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. Linux下干净卸载mysql详解

    转自:http://blog.csdn.net/tjcyjd/article/details/52189182 1.使用以下命令查看当前安装mysql情况 rpm -qa|grep -i mysql ...

  2. Vue源码（一）

    入口文件 src/core/instance/index.js 中可以看到 function Vue (options) { if (process.env.NODE_ENV !== 'product ...

  3. 请描述一下 cookies，sessionStorage和localStorage的区别？

    cookie在浏览器和服务器间来回传递. sessionStorage和localStorage不会sessionStorage和localStorage的存储空间更大:sessionStorage和 ...

  4. wkhtmktopdf

    1: sudo apt-get install wkhtmltopdf   2: sudo apt-get xvfb   3: 切换到root用户: echo 'xvfb-run --server-a ...

  5. C#Remoting

    C# Remoting   细细品味C#——.Net Remoting专题 http://www.cnblogs.com/xia520pi/archive/2011/11/02/2233371.htm ...

  6. IP流量重放与pcap文件格式解析

    (作者:燕云   出处:http://www.cnblogs.com/SwordTao/ 欢迎转载,但也请保留这段声明,谢谢!)   君不见 黄河之水 天上来 奔流到海不复回   君不见 高堂明镜 悲 ...

  7. Oracle11gR2-聚簇因子浅析

    创建表t1,t2 SQL> conn n1/n1 Connected. SQL> SQL> SQL> create table t1 as select trunc(rownu ...

  8. 如何有效地学习《空中英语教室》&《彭蒙惠英语》

    读者定位: <大家说英语>是学习美式口语入门书,内容全部是情境会话,定位为“初级美式生活会话”. <空中英语教室>以浅显英语提供从新闻.旅游到时尚等流行话题,丰富会话材料,定位 ...

  9. re模块之research

    2. re.research re.research扫描整个字符串并返回第一个成功的匹配. 2.1函数语法: re.search(pattern, string, flags=0) 参数 描述 pat ...

  10. Invoke and BeginInvoke(转载:http://www.cnblogs.com/worldreason/archive/2008/06/09/1216127.html)

    一.为什么Control类提供了Invoke和BeginInvoke机制? 关于这个问题的最主要的原因已经是dotnet程序员众所周知的,我在此费点笔墨再次记录到自己的日志,以便日后提醒一下自己. 1 ...