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>
  <form action="" method="post">
    <div>
      <label for="email">邮箱</label>  
      <input type="text" name="email" id="email" value="" placeholder="请输入邮箱" onfocus>
    </div>
    <div>
      <label for="psw">密码</label>  
      <input type="password" name="password" id="psw" value="" placeholder="请输入密码">
    </div>
    <div>
      <button>登陆</button>
    </div>
  </form>
</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>
  <style>
            body {
            height: 100vh;
            width: 100vw;
            display: grid;
            grid-template-columns: 10em 1fr;
            grid-template-rows: 6em 1fr;
            margin: 0;
        }
        body .header {
            grid-column-end: span 2;
            border-bottom: 1px solid currentColor;
            background-color: #efe;
            padding: 2em;
            display: flex;
            align-items: center;
        }
        body .header div {
            margin-left: auto;
        }
        body .nav {
            background-color: #efc;
            margin: 0;
            padding-top: 1em;
            list-style: none;
        }
        body iframe {
            width: calc(100vw - 10em);
            height: calc(100vh - 6em);
            border-left: 1px solid currentColor;
        }
  </style>
</head>
<body>
  <!-- 后台顶部 -->
  <div class="header">
    <span>你好admin</span>，<a href="">退出</a>
  </div>
  <!-- 后台左侧导航 -->
  <ul class="nav" id="left" style="list-style: none;float: left;background-color: blanchedalmond;">
    <li><a href="login.html" target="content">菜单1</a></li>
    <li><a href="login.html" target="content">菜单2</a></li>
    <li><a href="login.html" target="content">菜单3</a></li>
    <li><a href="login.html" target="content">菜单4</a></li>
  </ul>
  <!-- 后台右侧内容主体 -->
  <iframe srcdoc="请点击左侧栏目导航" src="" name="content" frameborder="1" width="400" height="600"></iframe>
</body>
</html>

预览图：

3、实例演示元素样式来源及优先级；

元素样式来源1：于客户代理浏览器/默认样式

<h2>Hello world</h2>
<!-- 虽然没有定义颜色，但是浏览器默认的颜色是黑色 -->

元素样式来源2：自定义属性,自定义样式会覆盖默认样式；

<h2 style="color:red">Hello world</h2>
<!-- 自定义的红色覆盖了默认的黑色 -->

元素样式来源3：书写顺序，写在后边的同名属性会覆盖前边的属性

<h2 style="color:red;color:green">Hello world</h2>
<!-- 实际会显示绿色的 -->

某些属性具有继承属性，比如颜色、字号、字体，子元素会继承父元素的同名属性；

<div style="color:red;"><h2>Hello world</h2></div>
<!-- 继承了父元素的同名属性 -->

并非所有的元素样式都可以继承，例如盒模型的属性就不可以继承；

<div style="color:green"><a>php中文网</a></div>
<!-- a元素的样式并不会继承父元素的绿色样式，而是显示紫色 -->

自定义样式的来源与优先级：

继承自html的默认样式
行内样式/内联样式
文档样式/内部样式使用<style></style>标签

外部样式，引用外部CSS文档

<link rel="stylesheet" href="static/css/style.css" />
<!-- 引用方式一 -->
<style>@import url(static/css/style.css);</style>
<!-- 引用方式二，常用语CSS模块化的时候 -->

调试样式：

<h2 style="color:red;color:green !important;">Hello world</h2>
<!-- !important 覆盖了其他的样式声明 -->

一个简单的登陆表单、后台框架及实例演示元素样式来源和优先级

1、写一个登录表单，要求有邮箱密码登录按钮；

2、写一个简单后台框架

3、实例演示元素样式来源及优先级；

更多相关文章

随机推荐