Demo—标题左右两侧的对等横线

2018-01-29 13:05:29来源:cnblogs.com作者:大仲马人点击

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

  

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台