Home > List of blog posts > 表单+简单后台架构+元素样式来源与优先级

Blogger Information

Blog 8

fans 0

comment 0

visits 3694

Special Recommendation

More>

Related recommendations

一、表单

1.登录表单

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录表单</title>
  </head>
  <body>
    <div
      style="
        height: 50px;
        background-color: rgb(8, 139, 226);
        text-align: center;
        color: rgb(233, 233, 233);
      "
    >
      <h1>登录表单</h1>
    </div>
    <div
      style="
        text-align: center;
        margin: auto;
        width: auto;
        height: 850px;
        padding-top:300px
        background-color: rgb(241, 241, 241);
      "
    >
      <div>
        <br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br />
   <form action="">
        <label for="name">登录账号：</label>
        <input
          type="text"
          id="name"
          name="name"
          value=""
          placeholder="请输入账号"
          autofocus
          required
        />
      </div>
      <div>
        <label for="password">登录密码：</label>
        <input
          type="password"
          id="name"
          name="name"
          value=""
          placeholder="至少8位数"
          autofocus
          required
        />
      </div>
      <div>
        <label for="password"
          >邮箱 ：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label
        >
        <input
          type="password"
          id="name"
          name="name"
          value=""
          placeholder="xxxx@xx.com"
          autofocus
          required
        />
        <br /><br />
      </div>
      <div><button style="height: 40px; width: 100px">登录</button></div>
    </div>
</form>
    <div style="background-color: rgb(8, 139, 226); height: 50px"></div>
  </body>
</html>

示例效果展示

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

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>问卷调查</title>
  </head>
  <body>
    <div
      style="
        height: 50px;
        background-color: rgb(8, 139, 226);
        text-align: center;
        color: rgb(233, 233, 233);
      ">
    <!-- 头部 -->
      <h1>问卷调查</h1>
    </div>
    <!-- 中间 -->
    <div
      style="
        text-align: left;
        margin: auto;
        width: auto;
        height: 850px;
        padding-top:300px
        background-color: rgb(241, 241, 241);
      "
    >
      <div>
        <br /><br />
        <!-- 中间内容 -->
   <form action="">
        <div>
          <label for="women" >1. 你的性别&nbsp;&nbsp;&nbsp;</label><br>
        <!-- name=""属性必须一样  type=radio  这样才为单选 -->
          <input type="radio" name="gender" id="men"/><label for="men">男</label>
          <input type="radio" name="gender" id="women" checked /><label for="women">女</label>
    </div><br>
    <div>
       <label for="rad">2. 你最喜欢的运动（单选）</label><br>
        <input type="radio" name="gender" id=""/><label for="men">爬山</label>
        <input type="radio" name="gender" id="rad" checked/><label for="men">骑自行车</label>
        <input type="radio" name="gender" id=""/><label for="men">游泳</label>
    </div><br>
        <div>
       <label for="rad">3. 你最喜欢吃的水果（多选）</label><br>
        <input type="checkbox" name="gender1" id=""/><label for="men">西瓜</label>
        <input type="checkbox" name="gender2" id="" /><label for="men">菠萝</label>
        <input type="checkbox" name="gender3" id="rad" checked/><label for="men">苹果</label>
        <input type="checkbox" name="gender3" id="rad" checked/><label for="men">梨子</label>
        <div><br>
<label for="user">4. 你的年龄:</label>
<select name="" id="user">
    <option value="1">10-20岁</option>
    <option value="2">20-30岁</option>
    <option value="3" selected >30-40岁</option>
    <option value="4"  >40-50岁</option>
</select>
</div>
<div><br>
    <label for="zzz">5. 投诉与建议</label>
    <br>
    <!-- 多行文本域 -->
    <textarea name="" id="zzz" cols="30" rows="10" required></textarea>
    </div>
    </div><br>
    <div></div>
      </div>
      <div><button style="height: 40px; width: 100px">提交</button></div>
    </div>
</form>
<!-- 底部 -->
    <div style="background-color: rgb(8, 139, 226); height: 50px"></div>
  </body>
</html>

示例效果展示

二、后台简单架构

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>后台架构</title>
  </head>
  <body>
    <div
      style="
        height: 50px;
        background-color: rgb(8, 139, 226);
        text-align: center;
        color: rgb(233, 233, 233);
      "
    >
      <!-- 头部 -->
      <h1>后台架构</h1>
    </div>
    <!-- 中间 -->
    <div style="background-color: rgb(241, 241, 240); height: 840px">
      <!-- <a href="https://www.ifeng.com/" target="content">凤凰网</a>
    <iframe src="" frameborder="1" name="content"></iframe> -->
      <!-- 后台顶部 -->
      <div class="header">
        <br />
        <b>后台管理</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span>amin</span><a href="">退出</a>
        <hr />
        <div></div>
        <!-- 左侧导航 -->
        <div>
          <ul class="class">
            <!-- li*5>a[herf='demo$  target="content"]{菜单项$} -->
            <li>
              <a href="/19期/作业/18day-1.html" target="content">菜单项1</a>
            </li>
            <li>
              <a href="/19期/HTML/2-2链接与列表.html" target="content"
                >菜单项2</a
              >
            </li>
            <li>
              <a href="/19期/HTML/3-1input表单.HTML" target="content"
                >菜单项3</a
              >
            </li>
            <li>
              <a
                href="/19期/HTML/3-2iframe内联框架标签与多媒体.HTML"
                target="content"
                >菜单项4</a
              >
            </li>
            <li>
              <a href="/19期/作业/18day-2.html" target="content">菜单项5</a>
            </li>
          </ul>
        </div>
      </div>
      <!-- 右侧内容区 -->
      <iframe
        src=""
        frameborder="1"
        name="content"
        width="1200px"
        height="600px"
      ></iframe>
      <br />
      <br />
    </div>
    <!-- 底部 -->
    <div style="background-color: rgb(8, 139, 226); height: 50px"></div>
  </body>
</html>

示例效果展示

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

1 元素样式来源

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

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

自定义的：装修

2 优先级

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

如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 所有默认样式清零 -->
    <!-- <style>
        *{
            margin: 0;
            padding: 0;
            }
    /* </style> */ -->
    <!-- 来源1：代理样式/浏览器样式/默认样式 -->
    <h1>hello</h1>
    <!-- 来源2：自定义样式 ，会覆盖默认样式-->
    <h1 style="color: brown;">world</h1>
    <!-- 来源3：书写顺序，写在后面的同名属性会覆盖前面的（优先级相同的情况下） -->
    <div>
      <!-- 某些属性具有继承特征，例如颜色、字体、字号、子元素会继承父元素的同名属性 -->
      <h1 style="color: aquamarine;">php.cn</h1>
    </div>
    <div>
      <a href="">php中文网</a>
    </div>
    <!-- 并非所有属性都可以继承，例如盒模型的属性就不能继承 -->
    <!-- 总体来说，样式来源就二类
    1.默认的：毛坯
    2.自定义的：装修 -->
  </body>
</html>

Correcting teacher：

PHPz

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

js入门笔记

2022-04-24 18:40:31