CSS多种方法实现分隔线
2023-09-11 14:20:59 时间
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS实现分隔线的几种方法</title>
<style>
[url=home.php?mod=space&uid=597245]@charset[/url] "utf-8";
body,h1,h2,h3,h4,p,ul,li,ol,dl,dt,dd,input,textarea,figure,form{margin:0;padding:0}
body,input,textarea{font-size:12px;font-family:microsoft yahei}
body{text-align:center;color:#33383D;}
ul,ol{list-style:none}
img{border:0}
button,input {line-height:normal;*overflow:visible}
input,textarea{outline:none}
a{color:#3B8DD1;text-decoration:none}
a:hover{color:#8CAC52}
.demo-header{position:relative;height:22px;background-color:#33363B;line-height:22px;padding:2px 10px;text-align: left;}
.demo-name{color: #ccc;}
.demo-title,.demo-footer{height:0;overflow:hidden}
.demo-container{clear: both;padding:40px 10px 20px;text-align:left;margin:0 auto;line-height: 18px;}
.demo h2{font-size: 15px;padding-bottom: 6px;margin-bottom: 20px;border-bottom: solid 1px #ddd;}
</style>
</head>
<body>
<div class="demo-container demo">
<style type="text/css">
.demo{
width: 600px;
}
.line_01{
padding: 0 20px 0;
margin: 20px 0;
line-height: 1px;
border-left: 200px solid #ddd;
border-right: 200px solid #ddd;
text-align: center;
}
.line_02{
height: 1px;
border-top: 1px solid #ddd;
text-align: center;
}
.line_02 span{
position: relative;
top: -12px;
background: #fff;
padding: 0 20px;
}
.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;
width: 220px;
vertical-align: middle;
text-align: center;
}
.line_04{
width:600px;
}
.line_04{
overflow: hidden;
_zoom: 1;
}
.line_04 b{
background: #ddd;
margin-top: 12px;
float: left;
width: 26%;
height: 1px;
_overflow: hidden;
}
.line_04 span{
padding: 0 10px;
width: 32%;
float: left;
text-align: center;
}
.line_05{
letter-spacing: -1px;
color: #ddd;
}
.line_05 span{
letter-spacing: 0;
color: #222;
margin:0 20px;
}
</style>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<div class="line_01">小小分隔线 单标签实现</div>
<br>
<br>
<div class="line_02"><span>小小分隔线 巧用色实现</span></div>
<br>
<br>
<div class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></div>
<br>
<br>
<div class="line_04"><b></b><span>小小分隔线 浮动来实现</span><b></b></div>
<br>
<br>
<div class="line_05">———————————<span>小小分隔线 字符来实现</span>————————————</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS实现分隔线的几种方法</title>
<style>
[url=home.php?mod=space&uid=597245]@charset[/url] "utf-8";
body,h1,h2,h3,h4,p,ul,li,ol,dl,dt,dd,input,textarea,figure,form{margin:0;padding:0}
body,input,textarea{font-size:12px;font-family:microsoft yahei}
body{text-align:center;color:#33383D;}
ul,ol{list-style:none}
img{border:0}
button,input {line-height:normal;*overflow:visible}
input,textarea{outline:none}
a{color:#3B8DD1;text-decoration:none}
a:hover{color:#8CAC52}
.demo-header{position:relative;height:22px;background-color:#33363B;line-height:22px;padding:2px 10px;text-align: left;}
.demo-name{color: #ccc;}
.demo-title,.demo-footer{height:0;overflow:hidden}
.demo-container{clear: both;padding:40px 10px 20px;text-align:left;margin:0 auto;line-height: 18px;}
.demo h2{font-size: 15px;padding-bottom: 6px;margin-bottom: 20px;border-bottom: solid 1px #ddd;}
</style>
</head>
<body>
<div class="demo-container demo">
<style type="text/css">
.demo{
width: 600px;
}
.line_01{
padding: 0 20px 0;
margin: 20px 0;
line-height: 1px;
border-left: 200px solid #ddd;
border-right: 200px solid #ddd;
text-align: center;
}
.line_02{
height: 1px;
border-top: 1px solid #ddd;
text-align: center;
}
.line_02 span{
position: relative;
top: -12px;
background: #fff;
padding: 0 20px;
}
.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;
width: 220px;
vertical-align: middle;
text-align: center;
}
.line_04{
width:600px;
}
.line_04{
overflow: hidden;
_zoom: 1;
}
.line_04 b{
background: #ddd;
margin-top: 12px;
float: left;
width: 26%;
height: 1px;
_overflow: hidden;
}
.line_04 span{
padding: 0 10px;
width: 32%;
float: left;
text-align: center;
}
.line_05{
letter-spacing: -1px;
color: #ddd;
}
.line_05 span{
letter-spacing: 0;
color: #222;
margin:0 20px;
}
</style>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<div class="line_01">小小分隔线 单标签实现</div>
<br>
<br>
<div class="line_02"><span>小小分隔线 巧用色实现</span></div>
<br>
<br>
<div class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></div>
<br>
<br>
<div class="line_04"><b></b><span>小小分隔线 浮动来实现</span><b></b></div>
<br>
<br>
<div class="line_05">———————————<span>小小分隔线 字符来实现</span>————————————</div>
</div>
</body>
</html>
相关文章
- [Web 前端] CSS篇之2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法
- Html,Css,Javascript及其他的注释方法详解
- OSG-使用VS2019编译整个源代码方法
- CSS - 工具类 tool.css
- Linux中curl命令使用方法
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
- Mac添加环境变量的三种方法
- 【JAVA】Java 异常中e的getMessage()和toString()方法的异同
- [CSS] Use CSS Variables Almost like Boolean Values with Calc (maintainable css)
- CSS 外边距(margin)重叠及防止方法
- Qt通用方法及类库4
- CSS中背景图片定位方法
- 样式不生效?试试css深度作用选择器:>>> 、/deep/ 、::v-deep样式穿透的使用方法和区别
- 递归式之主方法
- 全网最详细的mybatis plus 条件构造器queryWrapper学习,比如and(),eq(),or(),like(),between(),orderByAsc()等方法以及分页操作
- Instrumentation 两种方法 premain Agent
- appium===出错时截图的方法,自动截图
- 【CSS】css弹性布局、CSS hack_08
- 【CSS】css转换、css过渡、css动画_09
- find 命令只查找当前目录,不查找子目录的几种方法总结