Rumah >hujung hadapan web >tutorial css >css怎么设置分割线
css怎么设置分割线
- 藏色散人asal
- 2021-05-13 14:23:2715020semak imbas
css设置分割线的方法：首先创建一个HTML实例文件；然后在body中创建三个div；最后给第二个div设置样式为“padding-top:3px;width:40%;border-top:1px solid #666666;”即可。
本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。
使用原生HTML+CSS制作一个分割线
代码如下：
<html>
<title>分割线</title>
<body>
<div>
<span>设备：</span>
<span>1</span>
</div>
<div class="order">
<span style="white-space:pre"> </span><span class="line"></span>
<span style="white-space:pre"> </span><span class="txt">这里是一个分割线</span>
<span style="white-space:pre"> </span><span class="line"></span>
</div>
<div>
<span>设备：</span>
<span>2</span>
</div>
<style type="text/css">
.order {
height: 20px;
line-height: 20px;
text-align: center;
}
.order .line {
display: inline-block;
padding-top : 3px;
width: 40%;
border-top: 1px solid #666666;
}
.order .txt {
color: #333333;
font-size: 12px;
vertical-align: middle;
}
</style>
</body>
</html>效果如下图所示：
学习视频分享：css视频教程
Atas ialah kandungan terperinci css怎么设置分割线. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css怎么设置字母大写Artikel seterusnya：css怎么隐藏元素但保留位置