<!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. 局域网使用NAT进行测试第三方接口

      问题分析   在局域网内开发一些涉及到第三方的接口调用功能时(譬如:支付),需要对方服务器进行接口回调,接受对方发送过来的信息.问题来了,我们一般开发都是在内网,如何才能获取到外网返回的数据呢?如 ...

  2. [转] Mac系统终端命令行不执行命令 总出现command not found解决方法

    配置过安卓开发环境,改过bash_profile这个文件,最后不知怎么的只有cd命令能执行,我猜测可能修改bash_profile文件后没有保存 导致的     保存命令是: source .bash ...

  3. eclipse 使用lombok 精简java bean

    前言:             lombok 提供了简单的注解的形式来帮助我们简化消除一些必须有但显得很臃肿的 java 代码.特别是相对于 POJO             lombok 的官方网址 ...

  4. 基于七牛Python SDK写的一个批量下载脚本

    前言 上一篇基于七牛Python SDK写的一个同步脚本所写的脚本只支持上传,不支持文件下载. 虽然这个需求不太强烈,但有可能有人(在备份.迁移时)需要,而官方有没提供对应的工具,所以我就把这个功能也 ...

  5. Bilateral Filtering(双边滤波) for SSAO

    原网址:http://blog.csdn.net/bugrunner/article/details/7170471 1. 简介 图像平滑是一个重要的操作,而且有多种成熟的算法.这里主要简单介绍一下B ...

  6. java byte to hex

    String str; byte[] bs = null; bs =str.getBytes(); bs =str.getBytes("utf-8") java  byte to ...

  7. 跟我学算法-SVM(支持向量机)

    支持向量机是一个点离决策边界越近,离决策面越远的问题 求解的过程主要是通过拉格朗日乘子法,来求解带约束的优化问题,在问题中涉及两个方面,一个是线性的,一个是非线性的,非线性的有 我们平时比较常见的高斯 ...

  8. springboot 的定时任务使用

    定时任务在Spring Boot中的集成 在启动类中加入开启定时任务的注解: 在SpringBoot中使用定时任务相当的简单.首先,我们在启动类中加入@EnableScheduling来开启定时任务. ...

  9. Sqlserver ROW_NUMBER()

    SELECT ROW_NUMBER() OVER (ORDER BY A.orderdate,A.orderid),* from Sales.Orders A

  10. C#路径的相关操作

    1.判定一个给定的C#路径是否有效,合法 通过Path.GetInvalidPathChars或Path.GetInvalidFileNameChars方法获得非法的C#路径/文件名字符,可以根据它来 ...