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

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

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

引入字体图标

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>
  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. </fieldset>
  23. </div>
  24. </form>
  25. </body>
  26. </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. }
  32. fieldset{
  33. /* width: 50%; */
  34. padding-top: 20px;
  35. }
  36. .dl{
  37. font-size: 25px;
  38. color: red;
  39. }
  40. .tel, .yzm{
  41. width: auto;
  42. height: 40px;
  43. }
  44. .input-tel{
  45. width: 10rem;
  46. }
  47. .input-text{
  48. width: 10rem;
  49. }
  50. .yzm{
  51. width: 100%;
  52. }
  53. .btn{
  54. width: 96%;
  55. background-color: #007bff;
  56. text-align: center;
  57. padding: 1.2rem 0rem;
  58. margin: 1rem auto;
  59. color: white;
  60. border-radius: 0.6rem;
  61. cursor: pointer;
  62. display: block;
  63. box-sizing: border-box;
  64. border: 0rem;
  65. }
  66. .foot{
  67. text-align: center;
  68. }
运行效果

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议