CSS注册表单

最新推荐文章于 2024-05-10 22:15:29 发布

freedom_zdh

最新推荐文章于 2024-05-10 22:15:29 发布

阅读量687

点赞数

表单

表单中包含了按钮，输入框等内容，所以以表单为主题，统一学习这所有的样式

样式要求：

控制输入框的宽度width: 100%;
控制输入框的内填充到合适的大小padding: 12px 20px;
当有比较多的数据框是，可以为数据框添加上下的外边距margin: 8px 0;
设置数据框的圆角和边框线border: 2px solid red; border-radius: 4px;
可以设置输入框的背景色以及其中的字体颜色background-color: #3CBC8D; color: white;
设置获得焦点时数据框的样式
样式化长文本区域，将他设置为不可以更改大小resize: none;
带图片以及带动画的输入框（略）
样式化多选框
样式化提交按钮
加入响应式效果
设置数据框的默认值
整个表单有一个整体的背景色

不管怎么缩放浏览器，注册表单都水平垂直居中，没有做出来
这里只是固定在一个浏览器窗口大小的中心位置，一旦缩放，就不是中心位置！！！

表单案例

效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }


        input[type=text], select, textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
        }

        select {
            border: 1px solid black;
        }

        .container {
            margin: auto;
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 20px;
            width: 50%;

        }

        .container::after {
            content: "";
            display: table;
            clear: both;
        }


        input[type=text]:focus {

            background-color: lightblue;
        }


        input {
            outline: none;

        }


        label {
            /*padding: 12px 12px 12px 0;*/
            display: inline-block;
            /*background-color: pink;*/
            padding: 12px;
        }

        .col-25 {
            width: 25%;
            float: left;
            text-align: right;
            margin-top: 6px;
            /*background-color: yellow;*/
            /*border: 1px solid black;*/


        }

        .col-75 {
            width: 75%;
            float: left;
            margin-top: 6px;
            /*background-color: blue;*/
            /*border: 1px solid red;*/


        }

        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        textarea {
            width: 100%;
            height: 150px;
            padding: 12px 20px;
            box-sizing: border-box;
            border: 2px solid #ccc;
            border-radius: 4px;
            background-color: #f8f8f8;
            resize: none;
        }

        input[type=submit] {
            background-color: #4CAF50;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: right;
        }

        input[type=submit]:hover {
            background-color: #45a049;
        }
    </style>
    <script>

        window.onload = function () {

            let height = window.innerHeight;

            let elementHeight = document.getElementById("demo").offsetHeight;
            let marginTop = (height - elementHeight) / 2;

            document.getElementById("demo").style.marginTop = marginTop + "px";


        }
    </script>
</head>
<body>
<div id="demo" class="container">


    <form>


        <div class="row">
            <div class="col-25">
                <label for="lname">姓名：</label>
            </div>
            <div class="col-75">
                <input id="lname" type="text" placeholder="Your name.."/>
            </div>

        </div>
        <div class="row">
            <div class="col-25">
                <label>邮箱：</label>
            </div>
            <div class="col-75">
                <input type="text" placeholder="Your email address"/>
            </div>

        </div>
        <div class="row">
            <div class="col-25">
                <label>国家：</label>
            </div>
            <div class="col-75">
                <select id="country" name="country">
                    <option value="australia">Australia</option>
                    <option value="canada">Canada</option>
                    <option value="usa">USA</option>
                </select>
            </div>

        </div>
        <div class="row">
            <div class="col-25">
                <label>专业：</label>
            </div>
            <div class="col-75">
                <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
            </div>

        </div>
        <div>

            <input type="submit" value="注册"/>

        </div>

    </form>

</div>

</body>

</html>