开启辅助访问
切换到宽版

天天ASP家园官方Q群

天天ASP家园网友互动群

群1: 697497501(新手学习互助群)

群2: 47598123(进阶应用群)

天天ASP家园»论坛 › 技术交流 › 前端技术 › css分隔线的五种方法
返回列表 发新帖
查看: 4488|回复: 0

[文章教程] css分隔线的五种方法

[复制链接]
ttasp 发表于 2015-3-25 15:37:32 | 显示全部楼层 |阅读模式
啥也不说，先上图片效果。好了同行们就收藏吧！





  2. <!DOCTYPE HTML>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8" />
  6. <title>CSS巧妙实现分隔线的几种方法</title>
  7. <style>
  8. [url=home.php?mod=space&uid=597245]@charset[/url] "utf-8";
  9. body,h1,h2,h3,h4,p,ul,li,ol,dl,dt,dd,input,textarea,figure,form{margin:0;padding:0}
  10. body,input,textarea{font-size:12px;font-family:microsoft yahei}
  11. body{text-align:center;color:#33383D;}
  12. ul,ol{list-style:none}
  13. img{border:0}
  14. button,input {line-height:normal;*overflow:visible}
  15. input,textarea{outline:none}
  16. a{color:#3B8DD1;text-decoration:none}
  17. a:hover{color:#8CAC52}
  18. .demo-header{position:relative;height:22px;background-color:#33363B;line-height:22px;padding:2px 10px;text-align: left;}
  19. .demo-name{color: #ccc;}
  20. .demo-title,.demo-footer{height:0;overflow:hidden}
  21. .demo-container{clear: both;padding:40px 10px 20px;text-align:left;margin:0 auto;line-height: 18px;}
  22. .demo h2{font-size: 15px;padding-bottom: 6px;margin-bottom: 20px;border-bottom: solid 1px #ddd;}
  23. </style>
  24. </head>
  25. <body>

  27. <div class="demo-container demo">
  28. <style type="text/css">
  29. .demo{
  30. width: 600px;
  31. }
  32. .line_01{
  33.     padding: 0 20px 0;
  34.     margin: 20px 0;
  35.     line-height: 1px;
  36.     border-left: 200px solid #ddd;
  37.     border-right: 200px solid #ddd;
  38.     text-align: center;
  39. }
  40. .line_02{
  41.     height: 1px;
  42.     border-top: 1px solid #ddd;
  43.     text-align: center;
  44. }
  45. .line_02 span{
  46.     position: relative;
  47.     top: -12px;
  48.     background: #fff;
  49.     padding: 0 20px;
  50. }
  51. .line_03{
  52.     width:600px;
  53. }
  54. .line_03 b{
  55.     background: #ddd;
  56.     margin-top: 4px;
  57.     display: inline-block;
  58.     width: 180px;
  59.     height: 1px;
  60.     _overflow: hidden;
  61.     vertical-align: middle;
  62. }
  63. .line_03 span{
  64.     display: inline-block;
  65.     width: 220px;
  66.     vertical-align: middle;
  67. text-align: center;
  68. }
  69. .line_04{
  70.     width:600px;
  71. }
  72. .line_04{
  73.     overflow: hidden;
  74.     _zoom: 1;
  75. }
  76. .line_04 b{
  77.     background: #ddd;
  78.     margin-top: 12px;
  79.     float: left;
  80.     width: 26%;
  81.     height: 1px;
  82.     _overflow: hidden;
  83. }
  84. .line_04 span{
  85.     padding: 0 10px;
  86.     width: 32%;
  87.     float: left;
  88.     text-align: center;
  89. }
  90. .line_05{
  91.     letter-spacing: -1px;
  92.     color: #ddd;
  93. }
  94. .line_05 span{
  95.     letter-spacing: 0;
  96.     color: #222;
  97.     margin:0 20px;
  98. }
  99. </style>

  101. <div class="line_01">小小分隔线 单标签实现</div>
  102. <br>
  103. <br>
  104. <div class="line_02"><span>小小分隔线 巧用色实现</span></div>
  105. <br>
  106. <br>
  107. <div class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></div>
  108. <br>
  109. <br>
  110. <div class="line_04"><b></b><span>小小分隔线 浮动来实现</span><b></b></div>
  111. <br>
  112. <br>
  113. <div class="line_05">———————————<span>小小分隔线 字符来实现</span>————————————</div>
  114. <br>
  115. <br>
  116. </div>
  117. <div class="demo-footer">
  118. </div>
  119. </body>
  120. </html>
复制代码
ASP币如何冲？请看这里
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表

在线客服

售前咨询
售后咨询
服务热线
023-58418553
微信公众号