简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > html中字体图标的使用案例及媒体查询的使用
Blogger Information
Blog 25
fans 0
comment 0
visits 13503
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html中字体图标的使用案例及媒体查询的使用
安超
Original
774 people have browsed it

1.html中字体图标的使用

在html中常用的图标是阿里图标,网址为:阿里图标.阿里图标有两种使用方式:
a.unicode
b.class
其中 class方式,是比较常用的方式.
1.注册登记后,进入阿里图标;
2.选中要使用的图标
选中要使用的图标,并加入购物车
2.点击”购物车”,将选中的图标加入项目
将选中的图标加入项目
3.点击”暂无代码,生成代码”,并将生成的.css代码放入html的<link>里
生成.css代码
4.复制选中的某个图标的class,jiangq将其放入html中的某个类中

阿里图标实现方式如下:

阿里图标实现方式

代码如下:

  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>Document</title>
  8.     <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3729350_nisxjth9aa8.css">
  9. </head>
  10. <body>
  11. <!-- <div class="iconfont class">
  12.     <span class="icon-shanchu"></span>
  13.     <span class="icon-quanbu"></span>
  14.     <span class="icon-xiazaidownload"></span>
  15. </div> -->
  16. <p>删除某个元素的图标</p>
  17. <span class="iconfont class icon-shanchu"></span>
  18. <p>选项</p>
  19. <span class="iconfont class icon-quanbu"></span>
  20. <p>下拉箭头</p>
  21. <span class="iconfont class icon-xiazaidownload"></span>
  22. <style>
  23.     .iconfont.class{
  24.         font-size: 30px;
  25.         font-weight: bold;
  26.     }
  27. </style>
  28. </body>
  29. </html>

媒体查询原理如下:

随着窗口的变窄,三个div逐个消失
窗口变窄,div逐个消失
代码如下:

  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.     <div class="media">第1个div</div>
  11.     <div class="media">第2个div</div>
  12.     <div class="media">第3个div</div>
  13.     <style>
  14.         .media:first-of-type{
  15.             width: 200px;
  16.             height: 200px;
  17.             background-color: aqua;
  18.             margin-left: 200px;
  19.         }
  20.         .media:nth-of-type(2){
  21.             width: 200px;
  22.             height: 300px;
  23.             background-color: blue;
  24.             margin-left: 200px;
  25.         }
  26.         .media:last-of-type{
  27.             width: 200px;
  28.             height: 200px;
  29.             margin-left: 200px;
  30.             background-color: blueviolet;
  31.         }
  32.         @media (max-width:600px){
  33.             .media:first-of-type{
  34.                 display: none;
  35.             }
  36.         }
  37.         @media (max-width:800px){
  38.             .media:nth-of-type(2){
  39.                 display:none;
  40.             }
  41.         }
  42.         @media (max-width:1000px){
  43.             .media:last-of-type{
  44.                 display:none;
  45.             }
  46.         }
  47.     </style>
  48. </body>
  49. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：总结的很好
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！