zoukankan      html  css  js  c++  java
  • css 分割线样式_css实现文章分割线的多种方法总结

    这篇文章整理css如何实现文章分割线的多种方式,分割线在页面中可以起到美化作用,那么就来看看使用css实现分割线样式的多种方法。效果如下:

    方式一:单个标签实现分隔线:

    html:

    <div class="line_01">小小分隔线 单标签实现</div>

    css:

    .demo_line_01{  
        padding: 0 20px 0;  
        margin: 20px 0;  
        line-height: 1px;  
        border-left: 190px solid #ddd;  
        border-right: 190px solid #ddd;  
        text-align: center;  
    }

    优点:代码简洁

    方式二、巧用背景色实现分隔线:

    html:

    <div class="line_02"><span>小小分隔线 巧用色实现</span></div>

    css:

    .demo_line_02{  
        height: 1px;  
        border-top: 1px solid #ddd;  
        text-align: center;  
    }  
    .demo_line_02 span{  
        position: relative;  
        top: -8px;  
        background: #fff;  
        padding: 0 20px;  
    }

    优点:代码简洁,可自适应宽度

    方式三、inline-block实现分隔线:

     html:

    <div class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></div>

    css:

    .demo_line_03{  
        600px;  
    }  
    .demo_line_03 b{  
        background: #ddd;  
        margin-top: 4px;  
        display: inline-block;  
         180px;  
        height: 1px;  
        _overflow: hidden;  
        vertical-align: middle;  
    }  
    .demo_line_03 span{  
        display: inline-block;  
         220px;  
        vertical-align: middle;  
    }

    方式四、浮动实现分隔线:

     html:  

    <div class="line_04"><b></b><span>小小分隔线 浮动来实现</span><b></b></div>

    css:

    .demo_line_04{  
        600px;  
    }  
    .demo_line_04{  
        overflow: hidden;  
        _zoom: 1;  
    }  
    .demo_line_04 b{  
        background: #ddd;  
        margin-top: 8px;  
        float: left;  
         26%;  
        height: 1px;  
        _overflow: hidden;  
    }

    51220网站目录 https://www.51220.cn

    方式五、利用字符实现分隔线:

    html:

    <div class="line_05">———————————<span>小小分隔线 字符来实现</span>————————————</div>

    css: 

    .demo_line_05{  
        letter-spacing: -1px;  
        color: #ddd;  
    }  
    .demo_line_05 span{  
        letter-spacing: 0;  
        color: #222;  
        margin:0 20px;  
    }

    优点:代码简洁 以上简单介绍了分隔线的写法,也许还有其它比较合适的写法,看环境各取所需吧!  

    以上就是CSS实现分隔线的多种方法详细讲解的详细内容 ,希望对大家的学习有所帮助。 

  • 相关阅读:
    Linux:password 与passphrase
    QT设置openCV头文件和链接动态库路径
    matlab对图像加入噪声的方法
    RGB到HSV的彩色空间变化 Matlab
    QImage与IplImage之间的转换
    iframe自适应高度(简单经典)兼容ie6ie9 ,firefox,opera,chrome
    转载:关于生成并发唯一性流水号的解决方案
    EXCEL表格纵横转换
    rdlc打印时多出空白页面(reportviewer)
    一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
  • 原文地址:https://www.cnblogs.com/ypppt/p/13114360.html
Copyright © 2011-2022 走看看