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>