刚开始做的时候 想了一下 这个是怎么做出来的，后来在网上看到有个类似的效果，研究一下

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>两根线中间有文字的实现</title>

	<link rel="stylesheet" href="iconfont/iconfont.css">

	<style>

        .dv1 {

        	width:327px;

        	height: 22px;

        	position: relative;

        	margin:100px auto;

        }

        .liner {

        	width:100%;

        	height:1px;

        	background-color: #ccc;

        	position: relative;

        	top:50%;

        }

        .dv2 {

        	text-align:center;

        	width:120px;

        	height:22px;

        	line-height: 22px;

        	margin:0 auto;

        	background-color: #fff;

        	position: relative;

        	z-index:3;

        }

          .icon-star {

          	font-size:22px;

          	color:red;

          	margin-right:10px;

          }

	</style>

</head>

<body>

	<div class="dv1">

		<div class="liner"></div>

        <div class="dv2">

        	<i class="iconfont icon-star"></i>

        	<span>热门推荐</span>

        </div>

	</div>

</body>

</html>

　　代码中的小星星可以在阿里字体图标库中下载一个 试试 ，应该没问题

CSS 两边是线 中间是文字的效果的更多相关文章

  1. css 两边是线，中间文字的多种实现方法

    <div class="soild_text_one"> <fieldset> <legend>历史活动一</legend> < ...

  2. CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果

    本文将介绍一个小技巧,通过混合模式 mix-blend-mode 巧妙的实现文字的镂空波浪效果. 起因 一日,一群友私聊问我.如何使用 CSS 实现下述效果,一个文字的波浪效果: 我当时想都没想,就回 ...

  3. css中的线及vertical-align

    行内元素格式化顺序: 相关概念:  leading(行间距):指填充在两行文字间的铅条,等于line-height 和 font-size之差,其中一半leading加到文字上方,另一半leading ...

  4. amazeui学习笔记--css（基本样式3）--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  5. （转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）

    一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...

  6. CSS制作波浪线

    建议先去了解清楚了径向渐变,线性渐变的用法先 这个作者的css制作波浪线讲解很不错额:https://www.jianshu.com/p/8570433e3669不理解的可以看看这个链接的额 可以去菜 ...

  7. CSS环绕球体的旋转文字-3D效果

    代码地址如下:http://www.demodashi.com/demo/12482.html 项目文件结构截图 只需要一个html文件既可: 项目截图: 代码实现原理: 该示例的实现过程很简单,主要 ...

  8. JS 黑客帝国文字下落效果

    黑客帝国文字下落效果 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. 仿知乎/途家导航栏渐变文字动画效果-b

    demo.gif 效果图如上,简单分析下 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了 ...

随机推荐

  1. appium(6)-parts of appium api

    parts of appium api Lock Lock the screen.//锁屏. // java driver.lockScreen(3); // objective c [driver ...

  2. 挂断电话demo

    <!-- 结束通话和打电话的权限 --> <uses-permission android:name="android.permission.CALL_PHONE" ...

  3. [haoi2014]贴海报

    Bytetown城市要进行市长竞选,所有的选民可以畅所欲言地对竞选市长的候选人发表言论.为了统一管理,城市委员会为选民准备了一个张贴海报的electoral墙.张贴规则如下:1．electoral墙是 ...

  4. atol的实现【转】

    本文转载自:http://blog.csdn.net/cwqbuptcwqbupt/article/details/7518582 看了atol的实现,发现char到int的转换比较奇怪:c = (i ...

  5. LightOJ1259 Goldbach`s Conjecture —— 素数表

    题目链接:https://vjudge.net/problem/LightOJ-1259 1259 - Goldbach`s Conjecture    PDF (English) Statistic ...

  6. Zookeeper实现Master选举（哨兵机制）

    master选举使用场景及结构 现在很多时候我们的服务需要7*24小时工作,假如一台机器挂了,我们希望能有其它机器顶替它继续工作.此类问题现在多采用master-salve模式,也就是常说的主从模式, ...

  7. 浏览器中的BOM和DOM

    BOM 浏览器对象模型 提供了独立于内容而与浏览器窗口进行交互的对象.描述了与浏览器进行交互的方法和接口,可以对浏览器窗口进行访问和操作,譬如可以弹出新的窗口,改变状态栏中的文本,对Cookie的支持 ...

  8. C语言中的排序算法--冒泡排序，选择排序，希尔排序

    冒泡排序(Bubble Sort,台湾译为:泡沫排序或气泡排序)是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没 ...

  9. codeforces 460C. Present 解题报告

    题目链接:http://codeforces.com/submissions/ywindysai 题目意思:有 n 朵花,每朵花都有一定的高度(第 i 朵花对应 ai),m 天之后要把这些花送给别人. ...

  10. 阿里云数据库产品HybridDB简介——OLAP数据库，支持行列混合存储，基于数据库Greenplum的开源版本，并且吸收PostgreSQL精髓

    为什么会有HybridDB的诞生?它经历了怎样的研发历程?它的应用场景和情况是怎样的?带着这些问题,InfoQ对阿里云的数据库专家兼Postgres中国社区/中国用户会主席萧少聪先生进行了采访,以下文 ...