[CSS3] 几种分割线实现方法
2017-08-12 19:33
477 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .demo { width: 600px; } .demo-container { clear: both; padding: 30px 20px; text-align: left; margin: 0 auto; line-height: 18px; } .line-01 { 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 { 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> </head> <body> <div class="demo-container demo"> <div class="line-01">小小分隔线 单标签实现</div><br/> <div class="line-02"> <span>小小分隔线 巧用色实现</span> </div><br/> <div class="line-03"> <b></b> <span>小小分隔线 inline-block实现</span> <b></b> </div><br/> <div class="line-04"> <b></b> <span>小小分隔线 浮动来实现</span> <b></b> </div><br/> <div class="line-05">———————————<span>小小分隔线 字符来实现</span>————————————</div> </div> </body> </html>
相关文章推荐
- IE下实现类似CSS3 text-shadow文字阴影的几种方法
- IE下实现类似CSS3 text-shadow文字阴影的几种方法
- 积跬步,聚小流-------几种方法实现分割线
- IE下实现类似CSS3 text-shadow文字阴影的几种方法
- 软件登录的几种实现方法
- DShow中实现抓图的几种方法
- JavaScript实现网页弹出式窗口的几种方法
- 实现和IE浏览器交互的几种方法的介绍
- 实现事务的几种方法
- 实现和IE浏览器交互的几种方法的介绍
- 用Delphi实现文件下载的几种方法
- 用Delphi实现文件下载的几种方法
- dll--几种基本实现及调用方法
- 几种实现统计表的方法
- VB中实现延时(等待)的几种方法
- 实现浏览器全屏窗口的几种方法
- 实现浏览器全屏窗口的几种方法
- UNIX下实现终端打印的几种方法
- 在ASP中实现页面与数据库连接的几种实用方法
- C#抽象工厂模式的几种实现方法及比较