ASCII码 ASCII码

class方式引入字体图标,以及自定义样式 ，实例演示媒体查询(PC优先模式)

发布于：2022-07-11 14:49:12  栏目：技术文档

1.实例演示使用class方式引入字体图标,以及自定义样式

  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.     <title>引入图标</title>
  8.     <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11.     <div>
  12.         <span class="iconfont icon-jingdong">京东</span>
  13.     </div>
  14. </body>
  15. </html>

style.css样式

  1. /* 1. 引入官方的字体图标库 */
  2. @import 'font_icon/iconfont.css';
  3. /* 2.自定义图标 */
  4. .icon-jingdong {
  5.     color: aliceblue;
  6.     font-size: 50px;
  7.     box-shadow: 2px 2px 2px #888;
  8.     border-radius: 5%;
  9.     background-color: red;
  10. }

2.实例演示媒体查询(PC优先模式)

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>实例演示媒体查询</title>
  9. </head>
  11. <body>
  12.     <div class="box"></div>
  13.     <style>
  14.         * {
  15.             margin: 0;
  16.             padding: 0;
  17.         }
  18.         .box {
  19.             width: 200px;
  20.             height: 200px;
  21.             background-color: lightgreen;
  22.             border-radius: 5%;
  23.             box-shadow: 2px 2px 2px #888;
  24.         }
  25.         div:hover {
  26.             cursor: pointer;
  27.             opacity: 0.8;
  28.             transition: 0.3s;
  29.         }
  30.         /* PC优先: 先从最大屏的设备进行适配 */
  31.         /* 1000, 800 600 450  350  */
  32.         @media (min-width: 1000px) {
  33.             .box {
  34.                 background-color: red;
  35.             }
  36.         }
  37.         @media (min-width: 800px) and (max-width: 999px) {
  38.             .box {
  39.                 background-color: orange;
  40.             }
  41.         }
  42.         @media (min-width: 600px) and (max-width: 799px) {
  43.             .box {
  44.                 background-color: yellow;
  45.             }
  46.         }
  47.         @media (min-width: 450px) and (max-width: 599px) {
  48.             .box {
  49.                 background-color: green
  50.             }
  51.         }
  52.         @media (min-width: 350px) and (max-width: 449px) {
  53.             .box {
  54.                 background-color: cyan;
  55.             }
  56.         }
  57.         @media (max-width: 349px) {
  58.             .box {
  59.                 background-color: blue;
  60.             }
  61.         }
  62.     </style>
  63. </body>
  64. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行