CSS 两边是线中间是文字的效果

最新推荐文章于 2021-05-31 01:12:23 发布

weixin_30791095

最新推荐文章于 2021-05-31 01:12:23 发布

阅读量321

点赞数

原文链接：http://www.cnblogs.com/agansj/p/8796831.html

版权

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

<!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>

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

转载于:https://www.cnblogs.com/agansj/p/8796831.html

weixin_30791095

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 两边是线中间是文字的效果

刚开始做的时候想了一下这个是怎么做出来的，后来在网上看到有个类似的效果，研究一下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>两根线中间有文字的实现</title> <link rel="styl...
复制链接

扫一扫