form表单、iframe框架、css优先级

form表单

<style>
    form{
        width: 500px;
    }
    form .item{
        margin: 20px auto 0;
        width: 300px;
        margin-top: 20px;
    }
    button{
        display: block;
        margin: 50px auto 0;
        color: #fff;
        width: 100px;
        height: 40px;
        background: rgb(88 174 245);
        border: none;
        outline: none;
        border-radius: 5px;
    }
    label{
        display: inline-block;
        width: 90px;
        font-size: 16px;
    }
    input{
        height: 40px;
        border-radius: 5px;
        border: 1px solid #eee;
        outline: none
    }
</style>
    <form action="" method="post">
        <div class="item">
            <label for="username">用户名：</label>
            <input type="text" id="username" required>
        </div>
        <div class="item">
            <label for="password">密码：</label>
            <input type="password" id="password" required>
        </div>
        <div class="item">
            <label for="my-email">邮箱：</label>
            <input type="email" id="my-email" required>
        </div>
        <button type="submit">登陆</button>
    </form>

iframe框架

<style>
        .my-iframe{
            width: 1000px;
        }
        .my-top{
            height: 80px;
            line-height: 80px;
            padding-left: 20px;
            font-size: 18px;
            border: 1px solid black;
        }
        .flex{
            display: flex;
        }
        .left{
            width: 200px;
            height: 500px;
            border: 1px solid black;
            border-top: none;
        }
        .left ul li{
            list-style: none;
        }
        .left a{
            color: rgb(105, 102, 102);
            text-decoration: none;
            display: block;
            margin-bottom: 20px;
        }
        .right iframe{
            width: 800px;
            height: 500px;
            border: 1px solid black;
            border-top: none;
            border-left: none;
        }
    </style>
    <div class="my-iframe">
        <div class="my-top">
            某某网站后台管理系统
        </div>
        <div class="flex">
            <div class="left">
                <ul>
                    <li><a href="https://www.ifeng.com/" target="my-iframe">凤凰网首页</a></li>
                    <li><a href="https://flive.ifeng.com/" target="my-iframe">凤凰网直播</a></li>
                    <li><a href="https://gov.ifeng.com/" target="my-iframe">凤凰网政务</a></li>
                    <li><a href="https://sports.ifeng.com/" target="my-iframe">凤凰网体育</a></li>
                </ul>
            </div>
            <div class="right">
                <iframe src="https://www.ifeng.com/" name="my-iframe" frameborder="1"></iframe>
            </div>
        </div>
    </div>

css优先级演示

<style>
       .item1{
           color: red;
       } 
       .item1 #a2{
           color: black;
       }
       .item1 .a1{
           color: blue;
       }
       .a3{
           color: coral !important;
       }
    </style>
    <!-- ？优先级演示 -->
    <div class="item1">
        <span>子元素会继承父元素的颜色</span>
    </div>
    <div class="item1">
        <span id="a2" class="a1" >子元素设置的颜色优先级高于父元素的颜色继承</span>
    </div>
    <div class="item1">
        <span class="a1" >子元素id设置的颜色高于class和父元素继承的颜色</span>
    </div>
    <div class="item1">
        <span class="a1" style="color:yellow;">子元素设置内联样式的颜色高于class颜色设定</span>
    </div>
    <div class="item1">
        <span class="a3" style="color:yellow;">设置 !important权重的样式级别最高  覆盖所有设置的颜色</span>
    </div>