表单，框架，选择器，css的三种插入样式（内联，外部样式，元素中） - 前端学习

首页 > 博客列表 > 表单，框架，选择器，css的三种插入样式（内联，外部样式，元素中）

博主信息

博文 4

粉丝 0

访问量 2636

专题推荐

更多>

学习第三天

主要是，表单，选择器，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>作业3</title>
    <style>
        h3{
            background:yellowgreen;
            width: 400px;
            height: 30px;
        }
        input{
            background:thistle;
        }
        label[id="phone1"]{
            background:yellow;
        }
        label[class="nichen"]{
            background:sienna;
        }
        input.nichen_inp{
            background:springgreen;
        }
        input#psw{
            background:slategray;
        }
        /* 上下文选择器  号码区号的位置*/
        select option{
            background:tomato;
        }
    </style>
</head>
<body>
    <h3>欢迎注册,欢乐每一天</h3>
    <div>
        <form action="check.php" method="GET" style="display: grid;gap: 1em";>
            <fieldset>
                <legend>必填项</legend>    
            <div>
                <label for="nichen" class="nichen">昵称:</label>
                <input type="text"  class="nichen_inp" name="nichen" autofocus required placeholder="请输入你想要的名称" value="" id="nichen"/>
            </div>
            <div>
                <label for="psw">密码:</label>
                <input type="password" name="psw" placeholder="密码不可为空" id="psw"/>
            </div>
            <div>
                <label for="phone" id="phone1">手机:</label>
                <input type="tel" name="phone" placeholder="请输入你的11位手机号" id="phone"/>
            </div>
            <div>
                <label for="email1">邮箱:</label>
                <input type="email" name="email" id="email1" placeholder="请输入你的邮箱"/>
<!-- label中的for="email1" 对应的是 input中的 di="eamil1"的值 -->
            </div>
        </fieldset>
        <fieldset>
            <legend>下面为选填项</legend>
            <div>
                <label for="secret">性别:</label>
                <label>男</label>
                <input type="radio" name="gender"  value="male"  id="">
                <label>女</label>
                <input type="radio" name="gender" value="female" id="">
                <label>保密</label>
                <input type="radio" name="gender"  value="secret" checked  id="secret">
            </div>
            <div>
                <select name="" id="">
                    <option value="86" selected>中国+86</option>
                    <option value="20">埃及+20</option>
                    <option value="32">比利时+32</option>
                    <option value="48">波兰+48</option>
                </select>
                <input type="tel" name="phone" placeholder="手机号"/>
            </div>
            <div>
                <label for="">个人兴趣:</label>
                <input type="checkbox" id="chess" name="hobby[]" checked><label for="chess">象棋</label></input>
                <input type="checkbox" id="game"  name="hobby[]" checked><label for="game">游戏</label></input>
                <input type="checkbox" id="run" name="hobby[]" ><label for="run">跑步</label></input>
                <input type="checkbox" id="swim" name="hobby[]" ><label for="swim">游泳</label></input>
            </div>
            <div>
                <label for="">更多的兴趣:</label>
                <input type="search" name="search" id="search" list="keys">
                <datalist id="keys">
                    <option value="美女"></option>
                    <option value="野兽"></option>
                    <option value="美酒"></option>
                    <option value="帅哥"></option>
                </datalist>
            </div>
        </fieldset>
         <button>提交</button>
        </form>
    </div>
    <div style="width: 80%; height: 20px; background:tomato;">上面的颜色太乱了</div>
    <style>
        /* 后代选择器 */
        ul li{
            background:tomato;
        }
        /* 子选择器 */
     div > ul > li{
            background:rgb(7, 116, 206);
        }
        /* 同级相邻,作用于儿子3身上 */
        .son_2+li{
            background:rgb(128, 0, 49);
        }
        .son_6 ~ li{
            background:yellow;
        }
    </style>
    <div>
        <ul id="ul1" >
            <li>儿子1</li>
            <li class="son_2">儿子2</li>
            <li>儿子3</li>
            <li>儿子4
                <ul>
                    <li class="son_4">孙子_1</li>
                    <li>孙子_2</li>
                    <li>孙子_3</li>
                    <li>孙子_4</li>
                    <li>孙子_5</li>
                    <li>孙子_6</li>
                </ul>
            </li>
            <li>儿子5</li>
            <li class="son_6">儿子6</li>
            <li>儿子7</li>
            <li>儿子8</li>
        </ul>
    </div>
</body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

安装编辑器与常用插件

2021-07-10 19:30:22