Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS样式引入字体图标实例演示和媒体查询实例演示
Blogger Information
Blog 36
fans 1
comment 0
visits 26426
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
511 people have browsed it

引入字体图标

html代码
  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="css/css.css">
  9. </head>
  10. <body>
  11.   <form action="">
  12.         <fieldset>
  13.             <legend class="dl iconfont icon-denglu1">用户登录</legend>
  14.             <div class="main-box">
  15.                 <div class="tel iconfont icon-denglu"><label for="">手机号：<input type="tel" maxlength="11" id="mobile" class="input-tel" ></label></div>
  16.                 <div class="yzm iconfont icon-mimadenglu"><label for="">密  码：<input type="tel" maxlength="6" id="mobile" class="input-text"></label>
  17.                 </div>  
  18.                     <div  class="row">
  19.                         <button type="button" id="login" class="btn">登  录</button>
  20.                     </div>
  21.                     <div class="foot"><input type="checkbox" checked>阅读并同意 <a href="">注册条款</a> </div>
  22.             </div>
  23.         </fieldset>
  24.   </form>
  25. </body>
  26. </html>
css代码
  1. @import url(font_icon/iconfont.css);
  2. fieldset{
  3.     width: 50%;
  4.     padding-top: 20px;
  5. }
  6. .dl{
  7.     font-size: 25px;
  8.     color: red;
  9. }
  10. .main_box{
  11.     width: auto;
  12. }
  13. .tel, .yzm{
  14.     width: auto;
  15.     height: 40px;
  16. }
  17. .input-tel{
  18.     width: 10rem;
  19. }
  20. .input-text{
  21.     width: 10rem;
  22. }
  23. .yzm{
  24.     width: 100%;
  25. }
  26. .btn{
  27.     width: 96%;
  28.     background-color: #007bff;
  29.     text-align: center;
  30.     padding: 1.2rem 0rem;
  31.     margin: 1rem auto;
  32.     color: white;
  33.     border-radius: 0.6rem;
  34.     cursor: pointer;
  35.     display: block;
  36.     box-sizing: border-box;
  37.     border: 0rem;
  38. }
  39. .foot{
  40.     text-align: center;
  41. }

网上下载需要的字体图标，用@import将CSS样式引入自己的CSS样式表中，可以自定义样式，如：颜色、大小等。

运行效果

媒体查询

html代码
  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="css/css.css">
  9. </head>
  10. <body>
  11.   <form action="">
  12.     <div class="main-box">
  13.         <fieldset>
  14.                 <legend class="dl iconfont icon-denglu1">用户登录</legend>
  16.                     <div class="tel iconfont icon-denglu"><label for="">手机号：<input type="tel" maxlength="11" id="mobile" class="input-tel" ></label></div>
  17.                     <div class="yzm iconfont icon-mimadenglu"><label for="">密  码：<input type="tel" maxlength="6" id="mobile" class="input-text"></label>
  18.                     </div>  
  19.                         <div  class="row">
  20.                             <button type="button" id="login" class="btn">登  录</button>
  21.                         </div>
  22.                         <div class="foot"><input type="checkbox" checked>阅读并同意 <a href="">注册条款</a> </div>
  24.             </fieldset>
  25.     </div>
  26.   </form>
  27. </body>
  28. </html>
css代码
  1. @import url(font_icon/iconfont.css);
  2. @media(min-width :650px){
  3.     .main-box{
  4.         background-color: rgb(234, 253, 190);
  5.     }
  6.     }
  7. @media(max-width:999px)and(min-width :700px){
  8.     .main-box{
  9.         background-color: rgb(243, 185, 255);
  10. }
  11. }
  12. @media(max-width:799px)and(min-width :600px){
  13.     .main-box{
  14.         background-color: rgb(116, 116, 116);
  15.     }
  16. }
  17. @media(max-width:599px)and(min-width :400px){
  18.     .main-box{
  19.         background-color: rgb(255, 255, 255);
  20.     }
  21. }
  22. @media(max-width:599px)and(min-width :400px){
  23.     .main-box{
  24.         background-color: rgb(255, 255, 0);
  25.     }
  26. }
  27. @media(max-width:399px)and{
  28.     .main-box{
  29.         background-color: rgb(9, 9, 9);
  30.     }
  31. }
  33. fieldset{
  34.     /* width: 50%; */
  35.     padding-top: 20px;
  36. }
  37. .dl{
  38.     font-size: 25px;
  39.     color: red;
  40. }
  42. .tel, .yzm{
  43.     width: auto;
  44.     height: 40px;
  45. }
  46. .input-tel{
  47.     width: 10rem;
  48. }
  49. .input-text{
  50.     width: 10rem;
  51. }
  52. .yzm{
  53.     width: 100%;
  54. }
  55. .btn{
  56.     width: 96%;
  57.     background-color: #007bff;
  58.     text-align: center;
  59.     padding: 1.2rem 0rem;
  60.     margin: 1rem auto;
  61.     color: white;
  62.     border-radius: 0.6rem;
  63.     cursor: pointer;
  64.     display: block;
  65.     box-sizing: border-box;
  66.     border: 0rem;
  67. }
  68. .foot{
  69.     text-align: center;
  70. }
运行效果

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