html 水平线中间添加文字

最新推荐文章于 2024-07-13 18:07:38 发布

沈荣荣

最新推荐文章于 2024-07-13 18:07:38 发布

阅读量2.5w

点赞数 7

本文链接：https://blog.csdn.net/u010251897/article/details/50818251

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">
.personal-mybuluo-head {
    height: 14px;
    position: relative;
}
.personal-mybuluo-wording {
    position: absolute;
    top: 0;
    z-index: 2;
    left: 50%;
    background-color: #fff;
    color: #777;
    text-align: center;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    padding: 0 10px;
}
.personal-border {
    position: absolute;
    top: -7px;
    left: 0;
    width: 100%;
    height: 14px;
    z-index: 1;
}
.jmu-border-1px {
    position: relative;
}
.jmu-border-1px.border-bottom:after {
    border-bottom: 1px solid #dedfe0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2)
.jmu-border-1px:after {
    right: -100%;
    bottom: -100%;
    -webkit-transform: scale(0.5);
}
.jmu-border-1px:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(1);
    pointer-events: none;
}
			
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

	<body>
		<div class="personal-mybuluo-head">
			<div class="personal-mybuluo-wording">她的部落</div>
			<div class="personal-border jmu-border-1px border-bottom"></div>
		</div>
	</body>

</html>

沈荣荣

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
6
评论
html 水平线中间添加文字

.personal-mybuluo-head { height: 14px; position: relative;}.personal-mybuluo-wording { position: absolute; top: 0; z-index: 2; left: 50%; background-color: #fff; colo
复制链接

扫一扫