ASCII码 ASCII码

CSS中引入字体图标以及实例演示媒体查询

发布于：2022-07-11 14:40:52  栏目：技术文档

用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>登录界面</title>
  8.     <link rel="stylesheet" href="demo.css">
  9. </head>
  10. <body>
  11.     <div class="main-box">
  12. <span class="iconfont icon-vip-fill tubiao">欢迎注册</span>
  13. <p class="tip">已有注册？<span class="login-btn">立即注册</span>
  14. </p>
  15. <div class="row"> 
  16.     <label for="">手机号:<input type="tel" maxlength="11" id="mobile" ></label>
  18. </div>
  19. <div class="row"> 
  20.     <label for="">验证码:<input type="tel" maxlength="6" id="mobile" style=" width:120px""></label>
  21.     </div>
  22.     <div class="code" id="codemsg">
  23.         <button>获取验证码</button>
  24.     </div>
  25.     <div  class="zu">注册</div>
  27.     <div class="foot"><input type="checkbox" checked>阅读并同意 <a href="">注册条款</a> </div>
  28.     </div>
  31. </body>
  32. </html>

CSS代码

  1. @import './font-icon/iconfont.css';
  3. body{
  4.     background-color: aqua;
  5.     width: 100vw;
  6.     height: 100vh;
  7. }
  8. *{
  9.     margin: 0;
  10.     padding: 0;
  11. }
  12. .main-box{
  13. width: 50vw;
  14. height: 80VH;
  15. box-sizing: border-box;
  16. padding: 20px;
  17. border-radius:12px;
  18. background: rgb(160, 160, 84);
  19. margin: 30px;
  20. }
  21. h3{
  22.     font-size: 20px ;color: rgb(95, 55, 5);
  23.     line-height: 43px;
  24. }
  25. .tip{
  26. font-size: 12px;
  27. color: rgb(74, 44, 7);
  28. line-height: 30px;
  29. margin-bottom: 30px;
  30. }
  31. .tip span{
  32.     color: blueviolet;
  33. }
  34. .row{
  35.     padding-bottom: 20px;
  36.     height: 25px;
  37.     width: 100%;
  38.     display: flex;
  39.     align-items: center;
  40.     position: relative;
  41. }
  42. .code{
  43.     margin-bottom: 30px;
  45. }
  47. .zu{
  49.     background-color: aqua;
  50.     border-radius: 20px;
  51.     /* 圆角 */
  52.     height: 40px;
  53.     line-height: 40px;
  54.     text-align: center;
  55.     /* 居中 */
  56.     margin-bottom: 25px;
  57.     text-decoration:none
  59.     }
  60.     button:focus{
  61.         background-color: aliceblue;
  62.     }
  64. .foot{
  65.     text-align: center;
  66. }
  67. .tubiao{
  68.     font-size: 25px;
  69.     color: rgb(95,55,5);
  70. }

在网上下载好需要的字体图标之后，用@import将CSS样式引入自己的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>登录界面</title>
  8.     <link rel="stylesheet" href="demo.css">
  9.     <style>
  10.         /* 媒体查询 */
  11. /* 因为是PC端优先  所以先从大尺寸开始适配 */
  12. @media(min-width :1000px){
  13. .main-box{
  14.     background-color: rgb(160, 160,84);
  15. }
  16. /* 当可视页面最小1000PX时 */
  17. }
  18. @media(max-width:999px)and(min-width :800px){
  19.     .main-box{
  20.         background-color: rgb(30, 30, 10);
  21. }
  22. }
  23. /* 当可视页面最小800PX 最大999PX时 */
  24. @media(max-width:799px)and(min-width :600px){
  25.     .main-box{
  26.         background-color: rgb(116, 116, 116);
  27.     }
  28. }
  29. /* 当可视页面最大799PX  最小600PX时 */
  30. @media(max-width:599px)and(min-width :400px){
  31.     .main-box{
  32.         background-color: rgb(255, 255, 255);
  33.     }
  34. }
  35. /* 当可视页面最大599PX最小400PX时 */
  36. @media(max-width:599px)and(min-width :400px){
  37.     .main-box{
  38.         background-color: rgb(255, 255, 0);
  39.     }
  40. }
  41. /* 当可视页面最大599PX最小400PX时 */
  42. @media(max-width:399px)and{
  43.     .main-box{
  44.         background-color: rgb(9, 9, 9);
  45.     }
  46. }
  47. /* 当可视页面最大不超过399PS时 */
  48.     </style>
  49. </head>
  50. <body>
  51.     <div class="main-box">
  52. <span class="iconfont icon-vip-fill tubiao">欢迎注册</span>
  53. <p class="tip">已有注册？<span class="login-btn">立即注册</span>
  54. </p>
  55. <div class="row"> 
  56.     <label for="">手机号:<input type="tel" maxlength="11" id="mobile" ></label>
  57. </div>
  58. <div class="row"> 
  59.     <label for="">验证码:<input type="tel" maxlength="6" id="mobile" style=" width:120px""></label>
  60.     </div>
  61.     <div class="code" id="codemsg">
  62.         <button>获取验证码</button>
  63.     </div>
  64.     <div  class="zu">注册</div>   
  65.     <div class="foot"><input type="checkbox" checked>阅读并同意 <a href="">注册条款</a> </div>
  66.     </div>
  67. </body>
  68. </html>

布局的前提是 用户在一个宽度固定，而高度随着内容增长的空间内 进行布局（不可能在一个无限的空间内进行布局，宽度或者高度 要有一个固定）

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行