Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 引入字体图标以及自定义样式、媒体查询PC端优先实例
Blogger Information
Blog 19
fans 0
comment 0
visits 10726
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
引入字体图标以及自定义样式、媒体查询PC端优先实例
期待.
Original
415 people have browsed it

1.引入字体图标实例演示以及自定义样式

  • 这里我所演示的是第二种方法：自定义引入方法.
    引入字体图标
  • 我们通过自建一个CSS文件,且使用import引入字体库,在HTML文档中引入我们自建的CSS文件实现引入字体图标.
    自定义样式
  • 我们通过在自建的CSS文件中选择好Class类,即可进行自定义字体图标样式.

    2.媒体查询实例演示（PC端实例演示）

  • 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="./css/1.css">
    9. </head>
    10. <body>
    11.   <button class="tj">提交</button>
    12. </body>
    13. </html>
  • CSS代码：
    CSS代码
  • 这个媒体查询确实我查了很多资料和看了很多源码自己理解出来的,不知道代码中有没有什么问题,希望各位发现问题给予纠正！
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