Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS中引入字体图标以及实例演示媒体查询
Blogger Information
Blog 29
fans 1
comment 0
visits 14799
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
CSS中引入字体图标以及实例演示媒体查询
风车
Original
360 people have browsed it

用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>

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

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