码迷,mamicode.com
首页 > 其他好文 > 详细

带横线圆圈标题

时间:2019-06-13 20:44:27      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:oct   center   radius   border   isp   utf-8   char   div   pad   

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style type="text/css">
			.title-line {position: relative;z-index: 2;font-size: 32px;line-height: 62px;text-align: center;overflow: hidden;width: 1200px;margin: 30px auto 0px auto;}
			.title-line .caption {position: relative;display: inline-block;}
			.title-line .caption .line {position: absolute;top: 31px;width: 600px;height: 1px;background-color: #A1A1A1;}
			.title-line .caption .line-l {right: 100%;}
			.title-line .caption .line-r {left: 100%;}
			.title-line .yuan{width: 10px;height: 10px;border-radius: 50%;border: 3px #626262 solid;display: block;margin-top: 23px;}
			.title-line .text{padding:10px 20px 10px 20px;}
			.fl{float: left;}
			.fr{float: right;}
		</style>
	</head>
	<body>
		<div class="title-line">
			<span class="caption">
				<span class="line line-l"></span>
				<i class="yuan fl"></i>
					<span class="text">Headling</span>
				<i class="yuan fr"></i>	
				<span class="line line-r"></span>
			</span>
		</div>
	</body>
</html>

  

带横线圆圈标题

标签:oct   center   radius   border   isp   utf-8   char   div   pad   

原文地址:https://www.cnblogs.com/qing1304197382/p/11018905.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!