iframe+css+form

链接，图片，及表格

上代码

1. 写一个登录表单,要求有邮箱,密码,登录按钮 2. 写一个简单后台架构: <a> + <iframe> 3. 实例演示元素样式来源与优先级

登陆表单

    <form action="login.php" method="post">
        <div>
            <label for="username">用户名</label>
            <input type="text" name="username" placeholder="请输入用户名" required value="">
        </div>
        <div>
            <label for="username">密码</label>
            <input type="password" name="password" placeholder="不能少于6位" required value="">
        </div>
        <button type="submit">提交</button>
    </form>

iframe 例子

    <ul>
        <li><a href="https://www.taobao.com"  target="iframe">栏目1</a></li>
        <li><a href="https://www.jd.com" target="iframe">栏目2</a></li>
        <li><a href="https://www.163.com" target="iframe">栏目3</a></li>
        <li><a href="https://www.126.com" target="iframe">栏目4</a></li>
    </ul>
    <iframe src="" frameborder="1" name="iframe" width="600" height="400"></iframe>

CSS优先级

优先级

1.行内样式
2.内联样式
3.外部样式

<link rel="stylesheet" href="style.css">
    <div class="css">
        <div style="color:green ;">行内样式</div>
        <div class="css1">CSS 内联样式</div>
        <div class="css2">CSS 外部样式</div>
    </div>
    <style>
        .css{color: blue;}
        .css1 {
            color: red;
        }
    </style>