• 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>

    效果:

    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>
  • 相关阅读:
    shell脚本批量启动jar
    springboot最简单的AOP
    springboot 将null字段输出为空串
    随便记录
    MySQL case when 用法
    JavaDate数据返回到前端变数字的问题
    多级菜单无限递归
    linux tomacat 之部署 war包
    linux tomcat部署 之 jre
    leetcode Best Time to Buy and Sell Stock
  • 原文地址:https://www.cnblogs.com/gaidalou/p/6061875.html
Copyright © 2020-2023  润新知