search

博客列表 >我的CSS笔记之叁

我的CSS笔记之叁

小白客
小白客原创
2023年02月08日 10:48:01342浏览

CSS入门基础之第三篇

目录

  • 实例演示字体图标的引入与显示
  • 实例演示媒体查询(移动优先)

1. 实例演示字体图标的引入与显示

一共有两种引用方式，这里采取了第二种

示例截图：

示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3884883_gs6pyco4is7.css">
  8.     <title>Document</title>
  9. </head>
  10. <body>
  11.   <span class="iconfont icon-yidongduan_bianjiziliao"></span> 
  12.   <span class="iconfont icon-yidongduan_fenxiang"></span> 
  13.   <span class="iconfont icon-yidongduan_shouye-fenxiaohaoyou"></span> 
  14. </body>
  15. <style>
  16.     .iconfont.icon-yidongduan_bianjiziliao{
  17.         font-size: 40px;
  18.     }
  20.     .iconfont.icon-yidongduan_fenxiang{
  21.         font-size: 60px;
  22.     }
  24.     .iconfont.icon-yidongduan_shouye-fenxiaohaoyou{
  25.         font-size: 90px;
  26.     }
  27. </style>
  28. </html>

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.   </head>
  9.   <body>
  10.     <button class="btn small">按钮一</button>
  11.     <button class="btn middle">按钮二</button>
  12.     <button class="btn large">按钮</button>
  14.     <!-- <h3>Hello</h3> -->
  16.     <style>
  17.       /* rem  */
  18.       html {
  19.         font-size: 0.625rem;
  20.       }
  22.       h3 {
  23.         font-size: 5rem;
  24.       }
  26.       .btn {
  27.         background-color: seagreen;
  28.         color: white;
  29.         border: none;
  30.         outline: none;
  31.       }
  32.       .btn:hover {
  33.         cursor: pointer;
  34.         opacity: 0.8;
  35.         transition: 0.3s;
  36.       }
  38.       /* 小按钮 */
  39.       .btn.small {
  40.         font-size: 1.2rem;
  41.       }
  43.       /* 中按钮 */
  44.       .btn.middle {
  45.         font-size: 1.6rem;
  46.       }
  48.       /* 大按钮 */
  49.       .btn.large {
  50.         font-size: 1.8rem;
  51.       }
  53.       /* 设置几个断点 */
  54.       /* 1. 当宽度 < 375px时, 字号 12px */
  55.       @media (max-width: 375px) {
  56.         html {
  57.           font-size: 12px;
  58.         }
  59.       }
  61.       /* 375px - 600px  */
  62.       @media (min-width: 375px) and (max-width: 600px) {
  63.         html {
  64.           font-size: 14px;
  65.         }
  66.       }
  68.       @media (min-width: 600px) {
  69.         html {
  70.           font-size: 16px;
  71.         }
  72.       }
  73.     </style>
  74.   </body>
  75. </html>
上一条：递归创建文件夹下一条：1. 实例演示: 基本,上下文,伪类(结构,状态)选择器 2. 选做: 状态伪类实现一个下拉菜单功能
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多