本帖最后由 ivy_ma 于 2019-3-18 20:10 编辑
—————————————————— 标题 ————————————————————中间文字居中，两边横线的标题写法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>横线</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/*设置2px边框来充当横线*/
height: 2px;
margin-top: 40px;
/*此处是为了让盒子里的文字也能水平居中*/
text-align: center;
border-top: 2px solid red;
}
span {
/*因为有了相对定位，元素转为类似行内块元素*/
position: relative;
/*让文字向上偏移*/
top: -10px;
/*文字背景与整体背景需一致*/
background: #fff;
/*用padding撑开盒子*/
padding: 0 20px;
color: red;
}
</style>
</head>
<body>
<div class="box">
<span>技术贴-我是中间文字</span>
</div>
</body>
</html>
|
|
收藏
淘帖
踩
