search

博客列表 >css引入字体图标及媒体查询

css引入字体图标及媒体查询

P粉854918706
P粉854918706原创
2022年09月15日 12:00:37496浏览

css引入字体图标及媒体查询

1.css引入字体

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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="font_icon/iconfont.css">
  9.     <style>
  10.         .myicon{
  11.             font-size: 4em;
  12.             color:red;
  13.         }
  14.         .honeicon{
  15.             font-size:2em;
  16.             color:coral;
  17.             background-color: aqua;
  18.         }
  19.         .honeicon:hover{
  20.             color:deeppink;
  21.             cursor: pointer;
  22.             font-size:3em;
  23.             transition-duration: 0.5ms;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div>
  29.         <a href="https://www.php.cn/" style="text-decoration: none;"><span class="iconfont icon-camera myicon">照相机</span></a>
  30.     </div>
  31.     <div>
  32.         <span class="iconfont icon-home honeicon">房子</span>
  33.     </div>
  34. </body>
  35. </html>

2.媒体查询

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <style>
  9.         div{
  10.             height:50vh;
  11.             width:40vw;
  12.             border:1px solid lightcoral;
  13.             background-color: aqua;
  14.             margin:0 auto 10px auto;
  15.         }
  16.         @media (min-width: 1000px) {
  17.             html{
  18.                 font-size: 16px;
  19.             }
  20.             .btn1{
  21.                 margin-left: 10px;
  22.                 border:none;
  23.                 outline: none;  
  24.                 background-color: chocolate          
  25.             }
  26.             .btn1:hover{
  27.                 cursor: pointer;
  28.                 transition-duration: 3ms;
  29.                 background-color: blue;
  30.                 font-size: 20px;
  31.                 opacity: 0.4;
  32.             }
  33.             .btn2{
  34.                 border:none;
  35.                 outline: none;  
  36.                 background-color: lightgreen;
  37.             }
  38.             .btn2:hover{
  39.                 cursor: pointer;
  40.                 transition-duration: 3ms;
  41.                 background-color: rgb(240, 29, 14);
  42.                 font-size: 16px;
  43.                 opacity: 0.5;
  44.             }
  45.             .btn3{
  46.                 margin-top: 10px;
  47.                 border:none;
  48.                 outline: none;  
  49.                 background-color: rgb(20, 135, 207);
  51.             }
  53.         }
  54.         @media (max-width: 999px) and (min-width: 800px){
  55.             html{
  56.                 font-size:14px;
  57.             }
  58.             .btn1{
  60.             }
  61.             .btn2{
  63.             }
  64.             .btn3{
  66.             }           
  68.         }
  69.         @media (max-width: 799px) and (min-width: 600px){
  70.             html{
  71.                 font-size: 12px;
  72.             }
  73.             .btn1{
  75.             }
  76.             .btn2{
  78.             }
  79.             .btn3{
  81.             }           
  83.         }
  84.         @media (max-width: 599px) and (min-width: 400px){
  85.             html{
  86.                 font-size: 10px;
  87.             }
  88.             .btn1{
  90.             }
  91.             .btn2{
  93.             }
  94.             .btn3{
  96.             }           
  98.         }
  99.         .small{
  100.             font-size: 1.2rem;
  101.         }
  102.         .middle{
  103.             font-size: 1.6rem;
  104.         }
  105.         .large{
  106.             font-size: 2.0rem;
  107.         }
  108.         .biaodan{
  109.             margin-left:100px;
  110.             font-size: 1.2rem;
  111.         }
  112.         .wenben{
  113.             background-color: coral;
  114.             color:white;
  115.         }
  116.         input:focus{
  117.             background-color: brown;
  118.             border:none;
  119.             font-size:16px;
  120.             outline: none;
  121.         }
  122.         input::placeholder{
  123.             color:white;
  124.         }
  125.         button{
  126.             color:white;
  127.         }
  128.     </style>
  129. </head>
  130. <body>
  131.     <div>
  132.         <button class="btn1 small">按钮1</button>
  133.         <button class="btn2 middle">按钮2</button>
  134.         <button class="btn3 large">按钮3</button>
  135.     </div>
  136.     <div>
  137.         <form action="">
  138.             <label for="username" class="biaodan">帐户：</label>
  139.             <input type="text" id="username" name="帐户" placeholder="4-8个字符" class="wenben" >
  140.             <br>
  141.             <label for="psd" class="biaodan">密码：</label>
  142.             <input type="password" id="psd" name="密码" placeholder="8-16个字符" class="wenben">
  143.         </form>
  144.     </div>
  145. </body>
  146. </html>

上一条：你知道如何用 PHP 实现多进程吗？下一条：uniapp开发APP，生成Android签名证书并云打包发布
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多