css分割线 文字居中的7种实现方式
2024-10-11 04:05:43
最近开始研究前端，会不定期更新一些小块代码，写下自己的学习笔记，也希望能和大家一起进步！
1.单个标签实现分隔线：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.line_01{
width: 180px;
padding: 0 20px 0;
margin: 20px 0;
line-height: 1px;
border-left: 200px solid #ddd;
border-right: 200px solid #ddd;
text-align: center;
}
</style>
</head>
<body>
<div class="line_01">小小分隔线 单标签实现</div>
</body>
</html>
优点：代码简洁
2.巧用背景色实现分隔线：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.line_02{
height: 1px;
border-top: 1px solid #ddd;
text-align: center;
}
.line_02 span{
position: relative;
top: -8px;
background: #fff;
padding: 0 20px;
}
</style>
</head>
<body>
<div class="line_02"><span>小小分隔线 巧用色实现</span></div>
</body>
</html>
优点：代码简洁，可自适应宽度
3.inline-block实现分隔线：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.line_03{
width:600px;
}
.line_03 b{
background: #ddd;
margin-top: 4px;
display: inline-block;
width: 180px;
height: 1px;
_overflow: hidden;
vertical-align: middle;
}
.line_03 span{
display: inline-block;
vertical-align: middle;
padding: 0px 20px;
}
</style>
</head>
<body>
<div class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></div>
</body>
</html>
优点：文字可多行
4.浮动实现分隔线：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.line_04{
width:600px;
}
.line_04{
overflow: hidden;
_zoom: 1;
}
.line_04 b{
background: #ddd;
margin-top: 8px;
float: left;
width: 26%;
height: 1px;
_overflow: hidden;
}
.line_04 span{
float: left;
padding: 0px 20px;
}
</style>
</head>
<body>
<div class="line_04"><b></b><span>小小分隔线 浮动来实现</span><b></b></div>
</body>
</html>
5.hr实现分割线
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.hr-more {
height: 20px;
width: 70px;
position: relative;
left: 46%;
top: -18px;
font: normal 1.2em/20px 微软雅黑;
vertical-align: middle;
text-align: center;
border-radius: 4px;
background-color: #ffffff;
}
.div-box{
width: 600px;
}
</style>
</head>
<body>
<div class="div-box">
<hr/>
<div class="hr-more">更多</div>
</div>
</body>
</html>
6.fieldset 实现分割线
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
fieldset {
border:none;border-top:1px solid blue;
} legend {
width: 120px;
text-align: center;
}
</style>
</head>
<body>
<fieldset>
<legend>fieldset分割线</legend>
</fieldset>
</body>
</html>
7.after伪类实现分割线
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.hot {
width: 100%;
height: 20px;
text-align: center;
color: #000;
font-size: 12px;
line-height: 20px;
position: relative;
} .hot:after {
content: "";
width: 100%;
height: 1px;
background-color: #c5c0c0;
position: absolute;
bottom: 50%;
z-index: 1;
left: 0;
} .hot span {
z-index: 2;
position: relative;
background-color: #ffffff;
padding: 0 10px;
}
</style>
</head>
<body>
<div class="hot">
<span>伪类实现分割线</span>
</div>
</body>
</html>
最新文章
- 【NLP】蓦然回首：谈谈学习模型的评估系列文章（一）
- isEmpty和isNull()区别
- [LeetCode] Binary Tree Maximum Path Sum 求二叉树的最大路径和
- Javascript 特效（一）返回顶部
- Swift 函数做参数和闭包做参数的一个细节差别
- 原生js实现的效果
- ThinkPHP函数详解：N方法
- PHP5.5安装php-redis扩展
- 丰富的else语句及简洁的with语句 - 零基础入门学习Python034
- hprose rpc使用实例（同时有Java和Delphi客户端的例子）
- Kyoto Cabinet--nosql型单机数据库
- 软工实践第二次作业-sudoku
- 【docker】资料
- centos/redhat 删除虚拟网桥virbr0
- 前端小菜鸡使用Vue+Element笔记（二）
- spark rdd 宽窄依赖理解
- android--获取屏幕高宽度工具类
- C# 数据上传(自用笔记)
- 手机数据抓包的N种方法
- Cause: com.microsoft.sqlserver.jdbc.SQLServerException: 不支持“variant”数据类型。