zoukankan      html  css  js  c++  java
  • 使用伪类(::before/::after)设置图标

    使用伪类(::before/::after)设置文本前后图标。减少标签的浪费,使页面更加整洁。

    如图:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                .box{
                    margin: 20px;
                    padding: 10px 0;
                    border: 1px solid #ededed;
                    text-align: center;
                }
                .nonemore,.goodbey{
                    display: block;
                    font-size: 14px;
                }
                /* before设置图标 */
                .nonemore::before{
                    content: ' ';
                    display: inline-block;
                     20px;
                    height: 20px;
                    background: url(img/face.png) no-repeat;
                    background-size: 20px;
                    vertical-align: top;
                    padding-right: 10px;
                }
                /* after设置图标 */
                .goodbey::after{
                    content: ' ';
                    display: inline-block;
                     20px;
                    height: 20px;
                    background: url(img/face.png) no-repeat;
                    background-size: 20px;
                    vertical-align: top;
                    margin-left: 10px;
                }
            </style>
        </head>
        <body>
            <div class="box">
                <span class="nonemore">没有更多了</span>
            </div>
            <div class="box">
                <span class="goodbey">下次再见哦</span>
            </div>
        </body>
    </html>
  • 相关阅读:
    冲刺周期会议三
    冲刺周期会议二
    冲刺周期会议一
    日常会议
    总结会议及站立会议(六)
    站立会议(五)
    站立会议(四)
    【自习任我行】
    软件小创意
    团队项目题目拟定
  • 原文地址:https://www.cnblogs.com/min77/p/13914145.html
Copyright © 2011-2022 走看看