Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表单登陆实例、简单后台模拟及元素样式优先级演示
Blogger Information
Blog 9
fans 0
comment 0
visits 4011
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
表单登陆实例、简单后台模拟及元素样式优先级演示
龠
Original
313 people have browsed it

登陆表单代码及实例

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <form action="">
  13.         <div>
  14.             <label for="username">用户名：</label>
  15.             <input type="text" name="username" id="username">
  16.         </div>
  17.         <div>
  18.             <label for="psw">密码：</label>
  19.             <input type="password" name="psw" id="psw">
  20.         </div>
  21.         <div>
  22.             <label for="mymail">邮箱：</label>
  23.             <input type="email" name="mymail" id="mymail">
  24.         </div>
  25.         <div>
  26.             <button>登陆</button>
  27.         </div>
  28.     </form>
  29. </body>
  31. </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>Document</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.         }
  18.         body .header {
  19.             grid-column-end: span 2;
  20.             border-bottom: 1px solid currentColor;
  21.             background-color: #efe;
  22.             padding: 2em;
  23.             display: flex;
  24.             align-items: center;
  25.         }
  27.         body .header div {
  28.             margin-left: auto;
  29.         }
  31.         body .nav {
  32.             background-color: #efc;
  33.             margin: 0;
  34.             padding-top: 1em;
  35.             list-style: none;
  36.         }
  38.         body iframe {
  39.             width: calc(100vw - 10em);
  40.             height: calc(100vh - 6em);
  41.             border-left: 1px solid currentColor;
  42.         }
  43.     </style>
  45. </head>
  46. <body>
  47.     <div class="header">
  48.         <h1>管理后台</h1>
  49.         <div>
  50.             <span>admin</span>
  51.             <a href="">退出</a>
  52.         </div>
  54.     </div>
  55.         <ul class="nav">
  56.             <li><a href="demo1.html" target="content">菜单选项1</a></li>
  57.             <li><a href="demo2.html" target="content">菜单选项2</a></li>
  58.             <li><a href="demo3.html" target="content">菜单选项3</a></li>
  59.             <li><a href="demo4.html" target="content">菜单选项4</a></li>
  60.             <li><a href="demo5.html" target="content">菜单选项5</a></li>
  61.         </ul>
  63.         <iframe srcdoc="<h3>此处显示菜单选项" frameborder="2" name="content"></iframe>
  65. </body>
  66. </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>Document</title>
  8.     <style>
  9.         body {
  10.             color: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <h1>hello</h1>
  16. </body>
  17. </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>Document</title>
  8.     <style>
  9.         body {
  10.             color: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <h1 style="color: blue;">hello</h1>
  16. </body>
  17. </html>

实例图片

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