登录  /  注册
博主信息
博文 7
粉丝 0
评论 0
访问量 4012
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
CSS入门:字体图标的认识与媒体查询
风残念北的博客
原创
506人浏览过

1.字体图标的认识

代码演示

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <link rel="stylesheet" href="css/font-icon-unicode.css">
  9. <link rel="stylesheet" href="css/font-icon-class.css">
  10. </head>
  11. <body>
  12. <!-- 1.unicode方法引入 -->
  13. <div class="my-icon">
  14. <span>&#xe788;</span>
  15. </div>
  16. <!-- 2.class方法引入 -->
  17. <div class="iconfont ownstyle">
  18. <span class="icon-shezhi"></span>
  19. </div>
  20. </body>
  21. </html>

css/font-icon-unicode.css代码

  1. @font-face {
  2. font-family: 'iconfont'; /* Project id 3892720 */
  3. src: url('//at.alicdn.com/t/c/font_3892720_6hbznbw1ako.woff2?t=1676285822591') format('woff2'),
  4. url('//at.alicdn.com/t/c/font_3892720_6hbznbw1ako.woff?t=1676285822591') format('woff'),
  5. url('//at.alicdn.com/t/c/font_3892720_6hbznbw1ako.ttf?t=1676285822591') format('truetype');
  6. }
  7. .my-icon {
  8. font-family: iconfont;
  9. font-size: 2em;
  10. color: blue;
  11. }
  12. .my-icon :hover {
  13. color: red;
  14. cursor: pointer;
  15. transition: 0.5s;
  16. }

css/font-icon-class.css代码

  1. @import url('//at.alicdn.com/t/c/font_3892720_6hbznbw1ako.css');
  2. .ownstyle {
  3. font-size: 3em;
  4. color: green;
  5. }
  6. .ownstyle :hover {
  7. color: red;
  8. cursor: pointer;
  9. transition: 0.5s;
  10. }

效果演示

2.媒体查询

代码查询

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>媒体查询</title>
  8. <style>
  9. html {
  10. font-size: 0.625rem;
  11. }
  12. .btn {
  13. background-color: green;
  14. color: white;
  15. border: none;
  16. outline: none;
  17. }
  18. .btn:hover {
  19. cursor: pointer;
  20. opacity: 0.7;
  21. transition: 0.5s;
  22. }
  23. .btn.small {
  24. font-size: 1.2rem;
  25. }
  26. .btn.min {
  27. font-size: 1.6rem;
  28. }
  29. .btn.big {
  30. font-size: 1.8rem;
  31. }
  32. @media(max-width: 375px) {
  33. html {
  34. font-size: 12px;
  35. }
  36. }
  37. @media(min-width: 375px) and (max-width: 600px) {
  38. html {
  39. font-size: 14px;
  40. }
  41. }
  42. @media(min-width: 600px) {
  43. html {
  44. font-size: 16px;
  45. }
  46. }
  47. </style>
  48. </head>
  49. <body>
  50. <button class="btn small">button1</button>
  51. <button class="btn min">button2</button>
  52. <button class="btn big">button3</button>
  53. </body>
  54. </html>

效果演示

媒体查询

批改老师:PHPzPHPz

批改状态:合格

老师批语:完成的不错,要是添加一些自己的总结就更好了
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学