search

博客列表 >表单、内联框架以及CSS基础学习小结

表单、内联框架以及CSS基础学习小结

P粉317509817
P粉317509817原创
2022年03月19日 21:13:13507浏览

登录表单的实现

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <form action="" method="post">
  11.         <div>
  12.             <!-- label与input绑定 -->
  13.             <label for="username">用户名：</label>
  14.             <input type="text" name="username" id="username"  placeholder="至少8位" autofocus required>
  15.         </div>
  16.         <div>
  17.             <label for="psw">密&nbsp;&nbsp;&nbsp;码:</label>
  18.             &nbsp;&nbsp;&nbsp;<input type="password" name="psw" id="psw" placeholder="至少8位" required>
  19.         </div>
  20.         <div>
  21.             <label for="mail">邮&nbsp;&nbsp;&nbsp;邮:</label>
  22.             &nbsp;&nbsp;&nbsp;<input type="email" name="mail" id="mail" required placeholder="必须是邮箱格式">
  23.         </div>
  24.         <div>
  25.             <label for="">性&nbsp;&nbsp;&nbsp;别：</label>
  26.             <input type="radio" name="gender" id="male" checked><label for="male">男</label>
  27.             <input type="radio" name="gender" id="female"><label for="female">女</label>
  28.         </div>
  29.         <div>
  30.             <label for="">爱&nbsp;&nbsp;&nbsp;好：</label>
  31.             <input type="checkbox" name="hobbies[]" id="game"><label for="game">游戏</label>
  32.             <input type="checkbox" name="hobbies[]" id="execise"><label for="execise">运动</label>
  33.             <input type="checkbox" name="hobbies[]" id="code"><label for="code">编程</label>
  34.         </div>
  35.         <div>
  36.             <label for="address">住&nbsp;&nbsp;&nbsp;址：</label>
  37.             <select name="address" id="address">
  38.                 <option value="0"></option>
  39.                 <option value="1">北京市</option>
  40.                 <option value="2">上海市</option>
  41.                 <option value="3">天津市</option>
  42.                 <option value="4">重庆市</option>
  43.                 <option value="5">江苏省</option>
  44.                 <option value="6">广东省</option>
  45.                 <option value="7">浙江省</option>
  46.                 <option value="8">安徽省</option>    
  47.             </select>
  48.         </div>
  49.         <div>
  50.             <button>提交</button>
  51.         </div>
  52.     </form>
  53. </body>
  54. </html>

效果展示：

简单的后台架构实现：

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <style>
  9.         body {
  10.             height: 100vh;
  11.             width: 100vw;
  12.             display: grid;
  13.             grid-template-columns: 10em 1fr;
  14.             grid-template-rows: 6em 1fr;
  15.             margin: 0;
  16.         }
  17.         body .header {
  18.             grid-column-end:span 2 ;
  19.             border-bottom: 1px solid currentColor;
  20.             background-color: #efe;
  21.             padding: 2em;
  22.             display: flex;
  23.             align-items: center;
  24.         }
  25.         body .header div{
  26.             margin-left: auto;
  27.         }
  28.         body .nav{
  29.             background-color: #efe;
  30.             margin: 0;
  31.             padding-top: 1em;
  32.             list-style: none;
  33.         }
  34.         body iframe{
  35.             width: calc(100vw - 9em);
  36.             height: calc(100vh - 6em);
  37.             border-left: 1px solid currentColor;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <!-- 顶部栏 -->
  43.     <div class="header">
  44.         <h1>后台管理</h1>
  45.         <div>
  46.             <span>管理员</span>
  47.             <a href="">退出</a>
  48.         </div>
  49.     </div>
  50.     <!-- 左侧边栏 -->
  52.         <ul class="nav">
  53.             <li><a href="http://www.ifeng.com" target="content" >新闻</a></li>
  54.             &nbsp;
  55.             <li><a href="https://map.baidu.com/search/%E5%85%A8%E5%9B%BD/@12959219.599981366,4825334.630056325,5z?querytype=s&wd=%E5%85%A8%E5%9B%BD&c=1&provider=pc-aladin&pn=0&device_ratio=1&da_src=shareurl" target="content">地图</a></li>
  56.             &nbsp;
  57.             <li><a href="https://www.bilibili.com" target="content">视频</a></li>
  58.             &nbsp;
  59.             <li><a href="https://tieba.baidu.com/index.html" target="content">贴吧</a></li>
  60.             &nbsp;
  61.         </ul>
  63.     <!-- 右侧内容 -->
  64.     <iframe src="" frameborder="0" name="content"></iframe>
  65. </body>
  66. </html>

效果展示：

元素样式来源与优先级

  • 来源1: 代理样式/浏览器样式/默认样式

    • 默认样式: 继承自html

      如图:

  • 来源2: 自定义样式, 会覆盖默认样式

    • 自定义样式1: 行内样式, style属性

      代码：
      1. <h1 style="color: cadetblue;">hello world</h1>
      效果如图：

    • 自定义样式2: 文档样式/内部样式, style标签

      代码：
      1. <!DOCTYPE html>
      2. <html lang="en">
      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>CSS基础知识</title>
      8. <style>
      9.    h1{
      10.        color: royalblue; 
      11.        font-size: large;
      12.    }
      13. </style>
      14. </head>
      15. <body>
      16. <h1>hello world</h1>
      17. </body>
      18. </html>
      效果如图：

    • 自定义样式3: 外部样式

      代码：
      1. <!DOCTYPE html>
      2. <html lang="en">
      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>CSS基础知识</title>
      8. <style>
      9.    @import url('/0318/static/style.css');
      10. </style>
      11. </head>
      12. <body>
      13. <h1>hello world</h1>
      14. </body>
      15. </html>
      其中样式文件：
      1. h1 {
      2. color: blue;
      3. }

  • 来源3: 书写顺序,写在后面的同名属性会覆盖前面的(优先级相同的情况下) 某些属性具有继承特征,例如颜色,字号,字体,子元素会继承父元素的同名属性

    代码：
    1. <!DOCTYPE html>
    2. <html lang="en">
    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>CSS基础知识</title>
    8.   <style>
    9.       div {
    10.           color: bisque;
    11.       }
    12.   </style>
    13. </head>
    14. <body>
    15.   <div>
    16.       <h1>hello world</h1>
    17.   </div>
    18. </body>
    19. </html>
效果如图：


上一条：实例演示元素来源与优先级下一条：用iframe实现简单后台架构
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议