简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 登录表单， + ,元素样式来源与优先级
Blogger Information
Blog 20
fans 0
comment 0
visits 11510
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
433 people have browsed it

1 登录表单

登录表单

  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.     <!-- method: 提交类型,提交数据以?k=y&k=y查询字符串添加到url中 -->
  11.     <!-- 1 get提交 -->
  12.     <form action="" method="post">
  13.         <div>
  14.             <!-- type, name, value -->
  15.             <label for="username">用户名：</label>
  16.                         <!-- label.for = input.id  -->
  17.             <!-- autofocus: 布尔属性 -->
  18.         <input type="text" id="username" name="username" value="" placeholder="至少8位" autofocus required > 
  20.         </div>
  21.         <div>
  22.             <label for="psw">密码：</label>
  23.             <input type="password" id="psw" name="password" value="" placeholder="字母+数字" required > 
  25.         </div>
  26.         <div>
  27.             <label for="my-email">邮箱：</label>
  28.             <input type="email" id="my-email" name="email" value="" placeholder="字母+数字" required > 
  30.         <!-- !单选按钮 -->
  31.         </div>
  32.         <label for="male">性别:</label>
  33.         <!-- 所有input，name必须相同 -->
  34.         <input type="radio" name="gender" id="male" checked> <label for="male">男</label>
  35.         <input type="radio" name="gender" id="female"> <label for="female">女</label>
  36.         <div>
  39.             <!-- !复选框 -->
  40.         </div>
  41.         <label for="">爱好:</label>
  42.         <!-- 所有input，name必须相同 -->
  43.         <input type="checkbox" name="hobbies" id="game"  checked> <label for="game">游戏</label>
  44.         <input type="checkbox" name="hobbies" id="programmer" checked> <label for="placeholder">编程</label>
  45.         <input type="checkbox" name="hobbies" id="shoot"> <label for="shoot">摄影</label>
  46.     </div>
  49.    <div>
  50.         <!--  !下拉列表 -->
  51.         <!-- select.name, option.value , name,value属性不在同一个标签中 -->
  52.         <label for="user">会员:</label>
  53.     <select name="user" id="user">
  54.         <option value="1" >铜牌会员</option>
  55.         <option value="2">银牌会员</option>
  56.         <option value="3" selected>金牌会员</option>
  57.     </select>
  58.    </div>
  60.    <div>
  61.        <!-- !多行文本框 -->
  62.        <textarea name="" id="" cols="30" rows="10"></textarea>
  63.    </div>
  65.         <div>
  66.             <button>提交</button>
  67.         </div>
  68.     </form>
  69. </body>
  70. </html>

2 <a> + <iframe>

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>iframe小后台</title>
  9.     <style>
  10.         body {
  11.             height: 100vh;
  12.             width: 100vw;
  13.             display: grid;
  14.             grid-template-columns: 10em 1fr;
  15.             grid-template-rows: 6em 1fr;
  16.             margin: 0;
  17.         }
  19.         body .header {
  20.             grid-column-end: span 2;
  21.             border-bottom: 1px solid currentColor;
  22.             background-color: #efe;
  23.             padding: 2em;
  24.             display: flex;
  25.             align-items: center;
  26.         }
  28.         body .header div {
  29.             margin-left: auto;
  30.         }
  32.         body .nav {
  33.             background-color: #efc;
  34.             margin: 0;
  35.             padding-top: 1em;
  36.             list-style: none;
  37.         }
  39.         body iframe {
  40.             width: calc(100vw - 10em);
  41.             height: calc(100vh - 6em);
  42.             border-left: 1px solid currentColor;
  43.         }
  44.     </style>
  45. </head>
  47. <body>
  50.     <!-- 后台顶部 -->
  51.     <div class="header">
  52.         <h1>管理后台</h1>
  53.         <div>
  54.             <span>admin</span>
  55.             <a href="">退出</a>
  56.         </div>
  57.     </div>
  59.     <!-- 左侧导航 -->
  60.     <ul class="nav">
  61.         <li><a href="demo1.html" target="content">菜单项1</a></li>
  62.         <li><a href="demo2.html" target="content">菜单项2</a></li>
  63.         <li><a href="demo1.html" target="content">菜单项3</a></li>
  64.         <li><a href="demo2.html" target="content">菜单项4</a></li>
  65.         <li><a href="demo1.html" target="content">菜单项5</a></li>
  66.     </ul>
  68.     <!-- 右侧内容区 -->
  69.     <iframe src="" frameborder="2" name="content"></iframe>
  70. </body>
  72. </html>

3：元素样式来源与优先级

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>自定义样式来源与优先级</title>
  9.     <!-- <link rel="stylesheet" href="static/style.css" /> -->
  11.     <style>
  12.         @import url('static/style.css');
  13.     </style>
  14. </head>
  16. <body>
  17.     <!-- 1. 默认样式: 继承自html -->
  18.     <!-- 2. 自定义样式1: 行内样式, style属性 -->
  19.     <!-- <h1 style="color: blue">晚上好</h1>
  20.     <h1 style="color: blue">吃了吗?</h1> -->
  21.     <!-- 3. 自定义样式2: 文档样式/内部样式, style标签 -->
  22.     <h1>晚上好</h1>
  23.     <h1>吃了吗?</h1>
  24.     <h1>xxx</h1>
  25.     <!-- <style>
  26.         /* 分二步:
  27.         1. 找到它: 选择器
  28.         2. 设置它: 样式声明 */
  30.         h1 {
  31.             color: blue;
  32.         }
  33.     </style> -->
  35.     <!-- 4. 自定义样式3: 外部样式, css文档 -->
  36. </body>
  38. </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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！