登录  /  注册
首页 > 博客列表 > CSS入门：字体图标的认识与媒体查询
博主信息
博文 7
粉丝 0
评论 0
访问量 4034
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
CSS入门：字体图标的认识与媒体查询
风残念北的博客
原创
508人浏览过

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.   }
  9.   .my-icon {
  10.     font-family: iconfont;
  11.     font-size: 2em;
  12.     color: blue;
  13.   }
  14.   .my-icon :hover {
  15.     color: red;
  16.     cursor: pointer;
  17.     transition: 0.5s;
  18.   }

css/font-icon-class.css代码

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

效果演示

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;
  26.         }
  27.         .btn.min {
  28.             font-size: 1.6rem;
  30.         }
  31.         .btn.big {
  32.             font-size: 1.8rem;
  34.         }
  35.         @media(max-width: 375px) {
  36.             html {
  37.                 font-size: 12px;
  38.             }
  39.         }
  40.         @media(min-width: 375px) and (max-width: 600px) {
  41.             html {
  42.                 font-size: 14px;
  43.             }
  44.         }
  45.         @media(min-width: 600px) {
  46.             html {
  47.                 font-size: 16px;
  48.             }
  50.         }
  51.     </style>
  52. </head>
  53. <body>
  54.     <button class="btn small">button1</button>
  55.     <button class="btn min">button2</button>
  56.     <button class="btn big">button3</button>
  57. </body>
  58. </html>

效果演示

媒体查询

批改老师：PHPzPHPz

批改状态：合格

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

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

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录