search

博客列表 >CSS样式引入字体图标实例演示和媒体查询实例演示

CSS样式引入字体图标实例演示和媒体查询实例演示

早晨
早晨原创
2022年07月11日 00:14:16513浏览

引入字体图标

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. }
运行效果

上一条：引入字体图标以及自定义样式、媒体查询PC端优先实例下一条：引入字体图标和自定义样式与媒体查询
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多