search

博客列表 >字体图标和媒体查询实例演示

字体图标和媒体查询实例演示

手机用户1580651468
手机用户1580651468原创
2022年10月28日 13:54:01346浏览

字体图标和媒体查询实例演示

一. 实例演示字体的图标的使用,重点在class方式

一）.字体图标是一些网页常见的小图标

二）.字体图标的引入（引入到我们html 页面中

1.第一种unicode的方式

1）.html代码
  1. <div class="iconfont unicode">
  2.       <span>&#xe8b8;</span>
  3.     </div>
2）.css的代码
  1. @font-face {
  2.   font-family: "iconfont"; /* Project id 3734663 */
  3.   src: url("//at.alicdn.com/t/c/font_3734663_ixj9olzrj1o.woff2?t=1666923498703")
  4.       format("woff2"),
  5.     url("//at.alicdn.com/t/c/font_3734663_ixj9olzrj1o.woff?t=1666923498703")
  6.       format("woff"),
  7.     url("//at.alicdn.com/t/c/font_3734663_ixj9olzrj1o.ttf?t=1666923498703")
  8.       format("truetype");
  9. }
  10. /* 安装自定义字体 */
  11. @font-face {
  12.   /* 字体名称 */
  13.   font-family: ‘font-name’;
  14.   src: url(‘url’);
  15. }
  17. /* 2,声明自定义字体图标样式 */
  18. .iconfont.unicode {
  19.   font-family: iconfont;
  20.   font-size: x-large;
  21.   color: green;
  22.   text-shadow: 1px 1px 1px #888;
  23. }

2.第二种class的方式

1）.html代码
  1.  <div class="iconfont class">
  2.       <span class="icon-shezhi"></span>
  3.       <span class="icon-zhuce"></span>
  4.     </div>
2）.css代码
  1. .iconfont.unicode {
  2.   font-family: iconfont;
  3.   font-size: x-large;
  4.   color: green;
  5.   text-shadow: 1px 1px 1px #888;
  6. }
  8. /* 二 class类声明的形式 */
  9. .iconfont.class {
  10.   /* font-family: iconfont; */
  12.   font-size: x-large;
  13.   color: violet;
  14. }
  16. .iconfont.class:hover {
  17.   color: red;
  18.   cursor: pointer;
  19.   transition: color 0.5s linear;
  20. }

3.两种方式运行的效果图：

二. 实例演示媒体查询原理,媒体查询的顺序

一）代码如下：

  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.   </head>
  9.   <body>
  10.     <!-- 媒体：屏幕，手机，打印机 -->
  11.     <!-- 查询：查询媒体宽度宽度来确定元素的展示方式 -->
  12.     <!-- 布局的前提：
  13.         1布局不能再一个无限空间进行，宽，高必须限定一个
  14.         2.默认限定宽度，而高度随内容不断增长 -->
  15.     <button class="btn small">按钮1</button>
  16.     <button class="btn middle">按钮2</button>
  17.     <button class="btn large">按钮3</button>
  19.     <style>
  20.       html {
  21.         font-size: 10px;
  22.       }
  23.       .btn {
  24.         background-color: seagreen;
  25.         color: white;
  26.         border: none;
  27.         outline: none;
  28.       }
  29.       .btn:hover {
  30.         cursor: pointer;
  31.         opacity: 0.8;
  32.         transition: 0.3s;
  33.         padding: 0.4rem 0.8rem;
  34.       }
  35.       .btn.small {
  36.         font-size: 1.2rem;
  37.       }
  38.       .btn.middle {
  39.         font-size: 1.6rem;
  40.       }
  41.       .btn.large {
  42.         font-size: 2rem;
  43.       }
  44.       /* 媒体查询*/
  45.       /* 375px,1rem = 12px  */
  46.       @media (max-width: 374px) {
  47.         html {
  48.           font-size: 12px;
  49.         }
  50.       }
  51.       @media (min-width: 375px) and(max-width:449) {
  52.         html {
  53.           font-size: 14px;
  54.         }
  55.       }
  56.       @media (min-width: 450) {
  57.         html {
  58.           font-size: 16px;
  59.         }
  60.       }
  61.     </style>
  62.   </body>
  63. </html>

二)运行的效果图：

三）媒体查询的顺序是

媒体查询的宽度顺序是：
手机端：从小到大
电脑端：从大到小

上一条：实例演示隐式网格,对齐方式,行列间隙下一条：10.27日作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多