<!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. jquery Autocomplete函数

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

  2. Clustering Factor——索引的成本指标

    使用索引是我们面对海量数据搜索是一种常用的手段.通过有效的索引访问,可以使我们更快的访问到需要的数据,减少物理.逻辑IO,从而提高系统性能.在CBO时代,Oracle对于提交SQL的执行路径是有所选择 ...

  3. sed、grep、awk -- 三剑客笔记记录

    sed常用操作笔记   1.删除文件最后一行: sed -i '$d' filename 2.递归替换内容:sed -i 's/内容A/内容B/g' filename sed -i "s/S ...

  4. linux中的常用压缩与解压缩命令

    linux中常用的压缩格式有   .zip   .gz   .bz2   .tar.gz   .tar.bz2 一..zip 1.命令格式 zip 压缩文件名 源文件名         (压缩文件到当 ...

  5. martin/docker-cleanup-volumes

    https://hub.docker.com/r/martin/docker-cleanup-volumes/

  6. 压测工具Locuse的使用

    我是听朋友提起的"蝗虫"(Locust),然而她不想用python,我就拿来试一试~ http的 各种压测工具也已经太多了,所以主要是试试locust在当前比较流行的rpc协议上的 ...

  7. Tkinter Listbox(列表框)

    Python - Tkinter Listbox(列表框): 列表框部件用于显示一个项目列表,用户可以选择的项目数   列表框部件用于显示一个项目列表,用户可以选择的项目数. 语法: 这里是一个简单的 ...

  8. 为什么stm32有的外设在进行初始化的时候需要将寄存器重设为缺省值？不设置会怎么样？

    首先,缺省值就是默认值的意思,默认值可以理解为设计芯片的人认为用这个参数,比较适中,起码不可能耽误你对某一模块进行驱动.然后,为什么除了默认值(缺省值),还有这么多其他的参数可以进行选择呢,那就要看你 ...

  9. Android 4 学习（20）：ActionBar

    参考<Pro Android 4.0> ActionBar 11.0之后,ActionBar在Activity中默认存在,可以在代码中设置其显示与否: ActionBar actionBa ...

  10. t讯src的一点小秘密

    1.腾讯网首页发表评论未做限制 风险url:http://coral.qq.com/2774166934 使用burp的intruder模块生成payload 未做任何限制导致可批量提交大量的评论…… ...