2016-11-14看张大神的微博总结

1、语义化的重要性

扩展：<fieldset><legend></legend></fieldset>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*分割线*/
            fieldset{border: none;border-top: 1px dashed #CCCCCC;}
            legend{color: #CCCCCC; }
        </style>
    </head>
    <body>
        <fieldset>
            <legend align="center">
                窝窝窝
            </legend>
        </fieldset>
    </body>
</html>

效果：

2016-11-14看张大神的微博总结

2、unicode-range:限定字符集字符范围，这些字符、这个范围内的字符是XX字体；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            @font-face{
                font-family: YH;
                src: local('microsoft yahei'),
                     local('pingfang sc');
            }
            @font-face{
                font-family: quote;
                src: local('KaiTi');
                unicode-range: u+201c,u+201d;
            }
            p{ font-family: YH;}
            .quote{ font-family:quote,YH;}/*先写小范围 再写大范围*/
        </style>
        

    </head>
    <body>
        <p>微软雅黑“”</p>
        <p class="quote">微软雅黑“”</p>
        <span>微软雅黑“”</span>
    </body>
</html>

第二个P前面是微软雅黑，引号是楷体。

3、css中的换行 \A ；回车 \D;

使用自定义字体，实现动画效果；每过固定时间，字体上移一行，通过多个字每个一张，快速换行实现动画的效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            span{
                display: inline-block;
                overflow: hidden;
                vertical-align: -0.20em;
                height: 1em;
                line-height: 1;
            }
            span:before{
                display: block;
                white-space: pre-wrap;
                /*content: '...\A..\A.';*/
                content: '/\A-\A\\\A|';
                animation: change 4s infinite step-start ;
            }
            @keyframes change{
                20%{transform: translateY(-4em);}
                40%{transform: translateY(-3em);}
                60%{transform: translateY(-2em);}
                80%{transform: translateY(-1em);}
            }
            /*dot {
            display: inline-block; 
            height: 1em; line-height: 1;
            vertical-align: -.25em;
                overflow: hidden;
            }
            dot::before {
                display: block;
                content: '...\A..\A.';
                white-space: pre-wrap;
                animation: dot 3s infinite step-start both;
            }
            @keyframes dot {
                33% { transform: translateY(-2em); }
                66% { transform: translateY(-1em); }
            }*/
        </style>
    </head>
    <body>
        <p>正在上传<span>...</span></p>
        <a href="javascript:" class="grebtn">订单提交中<dot>...</dot></a>
    </body>
</html>

秒客网

2016-11-14看张大神的微博总结

相关文章