form表单、内联框架标签iframe、css样式学习

一、登录表单

主要学习form表单

    <form action="" method="post">
        <div>
            <label for="username">用户名:</label>
            <input type="text" name="username" id="username" value="" placeholder="至少8位" required autofocus />
        </div>
        <div>
            <label for="email">邮箱：</label>
            <input id="email" type="email" name="email" value="" placeholder="输入用邮箱" autofocus required/>
        </div>
        <div>
            <label for="pas">密码：</label>
            <input id="pas" type="password" name="password" value="" placeholder="输入密码" autofocus required/>
        </div>
        <div>
            <label for="secret">性别:</label>
            <input type="radio" name="gender" id="male" value="male" /><label for="male">男</label>
            <input type="radio" name="gender" id="female" value="female" /><label for="female">女</label>
        </div>
        <div>
            <label>爱好:</label>
            <input type="checkbox" name="hobby[]" id="game" value="game" /><label for="game">游戏</label>
            <input type="checkbox" name="hobby[]" id="trave" value="trave" /><label for="trave">旅游</label>
            <input type="checkbox" name="hobby[]" id="shoot" value="shoot"  /><label for="shoot">摄影</label>
        </div>
        <div>
            <select name="level">
                <option value="1">铜牌会员</option>
                <option value="2">银牌会员</option>
                <option value="3">金牌会员</option>
                <option value="4">永久会员</option>
            </select>
        </div>
        <div>
            <label for="">搜索关键字:</label>
            <input type="search" name="search" list="keywords" />
            <datalist id="keywords">
                <option value="html">html</option>
                <option value="css">css</option>
                <option value="js">js</option>
                <option value="javascript">javascript</option>
            </datalist>
        </div>
        <div>
            <button>提交</button>
            <button type="reset">重置</button>
        </div>
    </form>

二、简单后台页面

主要运用a标签和iframe知识点

<!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>iframe小后台</title>
    <style>
        body{
            background:lightblue;
        }
        .header{
            text-align: center;
        }
        .main{display: flex;}
        .main iframe {
            width: calc(100vw - 10em);
            height: calc(100vh - 6em);
            border-left: 1px solid currentColor;
        }
        .foot{
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <h3>小后台</h3>
    </div>
    <!-- 主要内容 -->
    <div class="main">
        <!-- 左侧导航 -->
        <ul>
            <li><a href="demo5.html" target="content">菜单1</a></li>
            <li><a href="demo5.html" target="content">菜单2</a></li>
            <li><a href="demo5.html" target="content">菜单3</a></li>
            <li><a href="demo5.html" target="content">菜单4</a></li>
        </ul>
        <!-- 右侧内容区 -->
        <iframe src="https://www.php.cn/" frameborder="2" name="content"></iframe>
    </div>
    <!-- 底部 -->
    <div class="foot">
        <a href="https://www.php.cn/">Copyright ICP备2020058653号-1</a>
    </div>
</body>
</html>

三、css样式学习

（1）样式来源

代理样式/浏览器样式/默认样式

    <!-- 1.代理样式/浏览器样式/默认样式 -->
    <h3>nihao</h3>
    <!-- 2: 自定义样式, 会覆盖默认样式 -->
    <h3 style="color: red;">nihao</h3>
    <!-- 3.书写顺序,写在后面的同名属性会覆盖前面的 -->
    <div>
        <a href="">nihao</a>
    </div>

（2）样式优先级

    <!-- 样式优先级 -->
    <div>普通没设样式：<span>hello</span></div>
    <div>class样式：<span class="test">hello</span></div>
    <div>id样式：<span class="test" id="test">hello</span></div>
    <div>行内样式：<span style="color: chartreuse;" class="test" id="test">hello</span></div>
    <div>!important样式：<span style="color: chartreuse;" class="test test2" id="test">hello</span></div>

优先级：普通样式 < class样式 < id样式 < 行内样式 < !important样式

一、登录表单

二、简单后台页面

三、css样式学习

相关文章