1025作业 - - php中文网博客

首页 > 博客列表 > 1025作业

博主信息

博文 26

粉丝 0

访问量 16937

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

1025作业

P粉751989631

原创

520人浏览过

实例演示字体的图标的使用,重点在class方式
常用的字体图标
Unicode:
Class
以阿里矢量图标库: https://www.iconfont.cn 为例。

Class演示：

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>class字体图标</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3736338_wc3n165j5l.css" />
  </head>
  <body>
    <div class="iconfont class">
      <span class="icon-baocun"></span>
      <span class="icon-chazhao"> </span>
    </div>
  </body>
</html>

运行结果

实例演示媒体查询原理,并描述媒体查询的顺序
媒体查询主要用于移动端，响应式。
媒体查询：查询媒体宽度来确定元素展示方式
表达式：
@media 媒体类型 and （媒体特性）{你的样式}

常用属性：
max-width：最大宽度
min-width：最小宽度

媒体查询的宽度顺序:
移动端：从小往大
PC 端：反过来写,从大向下写

例：

/* 宽度范围374及以内时的样式 */
@media (max-width: 374px) {
        html {font-size: 12px;}}

 /* 宽度范围375px - 415px时字体样式 */
      @media (min-width: 375px) and (max-width: 414px) {
        html {font-size: 14px;}}

/* 宽度范围> 415px 时字体样式  */
      @media (min-width: 415px) {
        html {font-size: 16px;}}

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

2. 演示markdown常用语法

2022-10-15 19:35:33