表单案例和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>Document</title>
    <style>
        #box {
            width: 500px;
            margin: 0 auto;
            text-align: center;
            background-color: white;
        }
        header {
            width: 500px;
            height: 50px;
            background-color: blueviolet;
            line-height: 15px;
            color: white;
        }
        header>h2 {
            padding-top: 15px;
        }
        #box>main input {
            margin: 10px;
        }
        main {
            background-color: #e74c3c;
            color: white;
            font-weight: bold;
        }
        input {
            outline: none;
        }
        .love{
            margin-left: 30px;
        }
        .xialaik{
            margin-left: -45px;
        }
        .zhuc{
            display: flex;
        }
        .zhuc>input{
            flex: 1;
        }
    </style>
</head>
<body style="background-color: #34495e;">
    <div id="box">
        <header>
            <h2>用户注册</h2>
        </header>
        <main>
            <form action="">
                <fieldset>
                    <legend>必填项</legend>
                    <label for="username">账号：</label> <input type="text" id="username" required name="username"> <br>
                    <label for="password">密码：</label> <input type="password" id="password" required name="password">
                    <br>
                    <label for="ea">邮箱：</label> <input type="email" id="ea" name="email" required> <br>
                </fieldset>
                <div class="xingbie">
                    <label for="">性别：</label>
                    <label for="male">男</label> <input type="radio" name="gander" id="male">
                    <label for="meal">女</label> <input type="radio" name="gander" id="meal">
                    <label for="baoli">男</label> <input type="radio" name="gander" id="baoli">
                </div>
                <div class="love">
                    <label for="">爱好：</label>
                    <label for="game">游戏</label> <input type="checkbox" id="game">
                    <label for="eat">吃</label> <input type="checkbox" id="eat">
                    <label for="摄影">摄影</label> <input type="checkbox" id="摄影">
                </div>
                <div class="xialaik">
                    <label for="dq">地区：</label>
                    <select name="" id="dq">
                        <option value="请选择地区">...请选择地区...</option>
                        <option value="请选择地区">德玛西亚</option>
                        <option value="请选择地区">恕瑞玛</option>
                        <option value="请选择地区">弗雷尔卓德</option>
                    </select>
                </div>
               <div class="zhuc">
                <input type="submit" value="立即注册">
               </div>
            </form>
        </main>
    </div>
</body>
</html>

css模块化

效果

index.html

<!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>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>头部</header>
    <main>主体</main>
    <footer>底部</footer>
</body>
</html>

style.css

@import url(./footer.css);
@import url(./reset.css);
@import url(./heade.css);
@import url(./main.css);

footer.css

    footer{
    display: flex;
    height: 600px;
    background-color: darkorange;
}

reset.css

*{
    margin: 0;
    padding: 0;
}

heade.css

header{
    display: flex;
    background-color:aqua;
    height: 500px;
}

main.css

main{
    display: flex;
    height: 400px;
    background-color: blueviolet;
}

选择器

效果

代码

<!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>Document</title>
    <style>
        /* 标签选择器 */
        p {
            color: aqua;
        }
        /* id选择器 */
        #box {
            width: 600px;
            height: 500px;
            background-color: firebrick;
            margin: 0 auto;
        }
        /* 类选择器 */
        .list {
            list-style-type: none;
            color: white;
        }
        /* 属性选择器 */
        .list>li[id="foo"] {
            background-color: fuchsia;
        }
        /* 后代选择器 */
        .list li {
            background-color: gold;
        }
        /* 子代选择器 */
        .list>li {
            background-color: gray;
        }
        /* 兄弟选择器 */
        .list>#foo+li {
            background-color: tomato;
        }
        /* 同级选择器 */
        .w~p {
            background-color: forestgreen;
        }
    </style>
</head>
<body>
    <div id="box">
        <p>我是段落</p>
        <ul class="list">
            <li id="foo">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <ul>
                <li>6</li>
                <li>7</li>
            </ul>
        </ul>
        <div class="w">
            <p>我是段落啊啊啊</p>
            <p>我是段落啊啊啊</p>
            <p>我是段落啊啊啊</p>
        </div>
    </div>
</body>
</html>