ASCII码 ASCII码

登录表单+iframe后台架构+css优先级

发布于：2022-03-20 09:52:12  栏目：技术文档

1. 登录表单

  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. </head>
  9. <body>
  10.     <!-- method: 提交类型,提交数据以?k=y&k=y查询字符串添加到url中 -->
  11.     <form style="text-align: center;" method="post">
  12.         <div>
  13.             <label for="my-email">邮箱:</label>
  14.             <input type="email" id="my-email" name="email" value="" placeholder="a@email.com" required />
  15.         </div>
  16.         <div>
  17.             <label for="psw">密码:</label>
  18.             <input type="password" id="psw" name="password" value="123" placeholder="数字+字母" required />
  19.         </div>
  20.         &nbsp;
  21.         <div>
  22.             <button>登陆</button>
  23.         </div>
  24.     </form>
  25. </body>
  26. </html>

效果截图

登录表单

2. 后台架构

  1. <!DOCTYPE html>
  2. <html lang="xfqm">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>iframe小后台</title>
  6.     <style>
  7.     body {
  8.         margin: 0;
  9.         display: grid;
  10.         grid-template-columns: 10em 1fr;
  11.     }
  12.     .header {
  13.         text-align: center;
  14.         padding-top: 0.7em;
  15.         grid-column: span 2;
  16.         height: 2em;
  17.         background-color: rgb(173, 158, 15);
  18.     }
  19.     .aside {
  20.         display: grid;
  21.         grid-template-rows: repeat(auto-fit, 2em);
  22.         background-color: rgb(13, 133, 97);
  23.     }
  24.     iframe {
  25.         width: 100%;
  26.         min-height: 42em;
  27.         background-color: #fff;
  28.         border: none;
  29.         padding: 2em;
  30.     }
  31.     a {
  32.         text-decoration: none;
  33.         color: #555;
  34.         background-color: #fff;
  35.         border-bottom: 1px solid #ccc;
  36.         border-right: 1px solid #ccc;
  37.     }       
  38.     </style>
  39. </head>
  40. <body>
  41.     <div class="header" style="font-size: 30px;">网 站 管 理 后 台</div>
  42.     <div class="aside">
  43.     <a href="https://www.bilibili.com/" target="content">BiliBili官网</a>
  44.     <a href="https://image.baidu.com/" target="content">百度图片</a>
  45.     <a href="http://sports.sina.com.cn/" target="content">新浪体育</a>
  46.     <a href="https://weibo.com/" target="content">微博</a>
  47.     <a href="https://www.iqiyi.com/"  target="content">爱奇艺</a>
  48.     </div>
  49.     <div class="main">
  50.     <iframe srcdoc="请右击左侧按钮" name="content"></iframe>
  51.     </div>
  52. </body>
  53. </html>

效果截图

iframe小后台

3. CSS优先级

Important的优先级>内联样式的优先级>ID选择器优先级>Class选择器的优先级>从body元素继承样式

  • 从 body 元素继承样式
    1. <style>
    2. body {
    3.  background-color: black;   /*页面背景颜色*/
    4.  font-family: monospace;    /*页面字体*/
    5.  color: green;              /*字体颜色*/
    6. }
    7. </style>
    8. <h1>Hello World!</h1>

  • Class 选择器的优先级高于继承样式

    1. <style>
    2. body {
    3.   background-color: black;
    4.   font-family: monospace;
    5.   color: green;
    6. }
    8. /*粉红色样式定义*/
    9. .pink-text {
    10.   color: pink;
    11. }
    12. </style>
    13. <h1>Hello World!</h1>                      /*继承body样式*/
    14. <h1 class="pink-text">Hello World2!</h1>   /*使用专属class样式*/

  • ID选择器优先级高于 Class 选择器

    1. <style>
    2. body {
    3.   background-color: black;
    4.   font-family: monospace;
    5.   color: green;
    6. }
    8.  /*添加id样式*/
    9. #orange-text {
    10.   color: orange;
    11. }
    12. .pink-text {
    13.   color: pink;
    14. }
    15. .blue-text {
    16.   color: blue;
    17. }
    18. </style>
    19. /*添加id属性，并保留上述的class属性*/
    20. <h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>

  • 内联样式的优先级高于 ID 选择器

    1. <style>
    2. body {
    3.   background-color: black;
    4.   font-family: monospace;
    5.   color: green;
    6. }
    7. #orange-text {
    8.   color: orange;
    9. }
    10. .pink-text {
    11.   color: pink;
    12. }
    13. .blue-text {
    14.   color: blue;
    15. }
    16. </style>
    17. /*添加内联样式，同时保留 blue-text 和 pink-text 这两个 class样式以及 id 样式*/
    18. <h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

  • Important 的优先级最高

    1. <style>
    2. body {
    3.   background-color: black;
    4.   font-family: monospace;
    5.   color: green;
    6. }
    7. #orange-text {
    8.   color: orange;
    9. }
    10. .pink-text {
    11.   color: pink !important;    /*添加在这一行*/
    12. }
    13. .blue-text {
    14.   color: blue;
    15. }
    16. </style>
    17. /*并且保留之前所有的CSS样式*/
    18. <h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行