search

博客列表 >表单+简单后台架构+元素样式来源与优先级

表单+简单后台架构+元素样式来源与优先级

平凡之路
平凡之路原创
2022年03月21日 11:12:05421浏览

一、表单

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>
  11.     <div
  12.       style="
  13.         height: 50px;
  14.         background-color: rgb(8, 139, 226);
  15.         text-align: center;
  16.         color: rgb(233, 233, 233);
  17.       "
  18.     >
  19.       <h1>登录表单</h1>
  20.     </div>
  22.     <div
  23.       style="
  24.         text-align: center;
  25.         margin: auto;
  26.         width: auto;
  27.         height: 850px;
  30.         padding-top:300px
  31.         background-color: rgb(241, 241, 241);
  32.       "
  33.     >
  34.       <div>
  35.         <br /><br /><br /><br /><br /><br />
  36.         <br /><br /><br /><br /><br /><br />
  37.    <form action="">
  38.         <label for="name">登录账号：</label>
  39.         <input
  40.           type="text"
  41.           id="name"
  42.           name="name"
  43.           value=""
  44.           placeholder="请输入账号"
  45.           autofocus
  46.           required
  47.         />
  48.       </div>
  50.       <div>
  51.         <label for="password">登录密码：</label>
  52.         <input
  53.           type="password"
  54.           id="name"
  55.           name="name"
  56.           value=""
  57.           placeholder="至少8位数"
  58.           autofocus
  59.           required
  60.         />
  61.       </div>
  63.       <div>
  64.         <label for="password"
  65.           >邮箱 ：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label
  66.         >
  67.         <input
  68.           type="password"
  69.           id="name"
  70.           name="name"
  71.           value=""
  72.           placeholder="xxxx@xx.com"
  73.           autofocus
  74.           required
  75.         />
  76.         <br /><br />
  77.       </div>
  78.       <div><button style="height: 40px; width: 100px">登录</button></div>
  79.     </div>
  80. </form>
  82.     <div style="background-color: rgb(8, 139, 226); height: 50px"></div>
  83.   </body>
  84. </html>

示例效果展示

2.单选、复选、下拉列表、文本域表单

代码

  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>
  11.     <div
  12.       style="
  13.         height: 50px;
  14.         background-color: rgb(8, 139, 226);
  15.         text-align: center;
  16.         color: rgb(233, 233, 233);
  17.       ">
  18.     <!-- 头部 -->
  19.       <h1>问卷调查</h1>
  21.     </div>
  23.     <!-- 中间 -->
  24.     <div
  25.       style="
  26.         text-align: left;
  27.         margin: auto;
  28.         width: auto;
  29.         height: 850px;
  30.         padding-top:300px
  31.         background-color: rgb(241, 241, 241);
  32.       "
  33.     >
  34.       <div>
  36.         <br /><br />
  39.         <!-- 中间内容 -->
  40.    <form action="">
  41.         <div>
  42.           <label for="women" >1. 你的性别&nbsp;&nbsp;&nbsp;</label><br>
  43.         <!-- name=""属性必须一样  type=radio  这样才为单选 -->
  44.           <input type="radio" name="gender" id="men"/><label for="men">男</label>
  45.           <input type="radio" name="gender" id="women" checked /><label for="women">女</label>
  46.     </div><br>
  47.     <div>
  48.        <label for="rad">2. 你最喜欢的运动（单选）</label><br>
  49.         <input type="radio" name="gender" id=""/><label for="men">爬山</label>
  50.         <input type="radio" name="gender" id="rad" checked/><label for="men">骑自行车</label>
  51.         <input type="radio" name="gender" id=""/><label for="men">游泳</label>
  52.     </div><br>
  54.         <div>
  55.        <label for="rad">3. 你最喜欢吃的水果（多选）</label><br>
  56.         <input type="checkbox" name="gender1" id=""/><label for="men">西瓜</label>
  57.         <input type="checkbox" name="gender2" id="" /><label for="men">菠萝</label>
  58.         <input type="checkbox" name="gender3" id="rad" checked/><label for="men">苹果</label>
  59.         <input type="checkbox" name="gender3" id="rad" checked/><label for="men">梨子</label>
  61.         <div><br>
  63. <label for="user">4. 你的年龄:</label>
  64. <select name="" id="user">
  65.     <option value="1">10-20岁</option>
  66.     <option value="2">20-30岁</option>
  67.     <option value="3" selected >30-40岁</option>
  68.     <option value="4"  >40-50岁</option>
  69. </select>
  70. </div>
  72. <div><br>
  73.     <label for="zzz">5. 投诉与建议</label>
  74.     <br>
  75.     <!-- 多行文本域 -->
  76.     <textarea name="" id="zzz" cols="30" rows="10" required></textarea>
  77.     </div>
  79.     </div><br>
  80.     <div></div>
  81.       </div>
  82.       <div><button style="height: 40px; width: 100px">提交</button></div>
  83.     </div>
  84. </form>
  87. <!-- 底部 -->
  88.     <div style="background-color: rgb(8, 139, 226); height: 50px"></div>
  89.   </body>
  90. </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.   </head>
  9.   <body>
  10.     <div
  11.       style="
  12.         height: 50px;
  13.         background-color: rgb(8, 139, 226);
  14.         text-align: center;
  15.         color: rgb(233, 233, 233);
  16.       "
  17.     >
  18.       <!-- 头部 -->
  19.       <h1>后台架构</h1>
  20.     </div>
  22.     <!-- 中间 -->
  23.     <div style="background-color: rgb(241, 241, 240); height: 840px">
  24.       <!-- <a href="https://www.ifeng.com/" target="content">凤凰网</a>
  25.     <iframe src="" frameborder="1" name="content"></iframe> -->
  27.       <!-- 后台顶部 -->
  28.       <div class="header">
  29.         <br />
  30.         <b>后台管理</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  31.         <span>amin</span><a href="">退出</a>
  33.         <hr />
  35.         <div></div>
  37.         <!-- 左侧导航 -->
  38.         <div>
  39.           <ul class="class">
  40.             <!-- li*5>a[herf='demo$  target="content"]{菜单项$} -->
  41.             <li>
  42.               <a href="/19期/作业/18day-1.html" target="content">菜单项1</a>
  43.             </li>
  44.             <li>
  45.               <a href="/19期/HTML/2-2链接与列表.html" target="content"
  46.                 >菜单项2</a
  47.               >
  48.             </li>
  49.             <li>
  50.               <a href="/19期/HTML/3-1input表单.HTML" target="content"
  51.                 >菜单项3</a
  52.               >
  53.             </li>
  54.             <li>
  55.               <a
  56.                 href="/19期/HTML/3-2iframe内联框架标签与多媒体.HTML"
  57.                 target="content"
  58.                 >菜单项4</a
  59.               >
  60.             </li>
  61.             <li>
  62.               <a href="/19期/作业/18day-2.html" target="content">菜单项5</a>
  63.             </li>
  64.           </ul>
  65.         </div>
  66.       </div>
  68.       <!-- 右侧内容区 -->
  69.       <iframe
  70.         src=""
  71.         frameborder="1"
  72.         name="content"
  73.         width="1200px"
  74.         height="600px"
  75.       ></iframe>
  76.       <br />
  77.       <br />
  78.     </div>
  80.     <!-- 底部 -->
  81.     <div style="background-color: rgb(8, 139, 226); height: 50px"></div>
  82.   </body>
  83. </html>

示例效果展示

三、元素样式来源、优先级

1 元素样式来源

  • 代理样式/浏览器样式/默认样式
  • 自定义样式 ，会覆盖默认样式

注：某些属性具有继承特征，例如颜色、字体、字号、子元素会继承父元素的同名属性
并非所有属性都可以继承，例如盒模型的属性就不能继承
总体来说，样式来源就二类

自定义的：装修

2 优先级

  • 默认样式：继承自 html
  • 自定义样式 1：行内样式 style 属性
  • 自定义样式 2：文档样式/内部样式，style 标签
  • 自定义样式 3：外部样式，css 文档

如下

  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.   </head>
  10.   <body>
  11.     <!-- 所有默认样式清零 -->
  12.     <!-- <style>
  13.         *{
  14.             margin: 0;
  15.             padding: 0;
  16.             }
  17.     /* </style> */ -->
  19.     <!-- 来源1：代理样式/浏览器样式/默认样式 -->
  21.     <h1>hello</h1>
  23.     <!-- 来源2：自定义样式 ，会覆盖默认样式-->
  24.     <h1 style="color: brown;">world</h1>
  26.     <!-- 来源3：书写顺序，写在后面的同名属性会覆盖前面的（优先级相同的情况下） -->
  28.     <div>
  29.       <!-- 某些属性具有继承特征，例如颜色、字体、字号、子元素会继承父元素的同名属性 -->
  30.       <h1 style="color: aquamarine;">php.cn</h1>
  31.     </div>
  33.     <div>
  34.       <a href="">php中文网</a>
  35.     </div>
  37.     <!-- 并非所有属性都可以继承，例如盒模型的属性就不能继承 -->
  39.     <!-- 总体来说，样式来源就二类
  40.     1.默认的：毛坯
  41.     2.自定义的：装修 -->
  42.   </body>
  43. </html>
上一条：简单的后台框架下一条：简单的登录表单
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多