表单练习

最新推荐文章于 2024-11-01 13:37:44 发布

原创最新推荐文章于 2024-11-01 13:37:44 发布 · 380 阅读

0 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

22 篇文章

订阅专栏

表单练习

练习尝试做一个B站登录页面，具体代码如下。

CSS

reg.css


.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

.form{
    width: 980px;
    margin: 1em auto;
}

.form h2{
    width: 100%;
    text-align: center;
    font-size: 38px;
    border-bottom: 1px solid #ddd ;
    height: 30px;
    margin-bottom: 45px;
}

.form h2 span{
    background: white;
    padding:0 20px;
}

/* 表单区域 */
.form-area{
    width: 423px;
    margin:0 auto;
}


.form-area .form-item{
    margin:50px 0;
    position: relative;
}

.form-area .select .select-item, .form-area .select .input{
    float: left;
    height:  40px;
}

.form-area .select .select-item{
    width: 130px;
    border:1px solid #dcdfe6;
    border-radius: 4px;
    box-sizing: border-box;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    position: relative;
    cursor: pointer;
}

.form-area .select .select-item ul{
    width:100%;
    /* 最大高度 */
    max-height: 256px;
    background: white;
    position: absolute;
    z-index: 1;
    left :0;
    top:50px;
    box-sizing: border-box;
    border:1px solid #dcdfe6;
    border-radius: 4px;
    color:#606266;
    padding:10px 0;
    font-size: 14px;
    overflow-y: auto;
    display: none;
    
}

.form-area .select .select-item ul li{
    height: 34px;
    padding:0 20px;
    cursor: pointer;
    line-height: 34px;
}

.form-area .select .select-item ul li:hover{
    background-color: #f5f7fa;
}

.form-area .select .select-item ul li.selected{
    color:#00a1d6;
    font-weight: bold;
}

.form-area .select .input input{
    border-radius: 0 4px 4px 0;
}

.form-area .select .input{
    width: 293px;
}

.form-area .select .select-item .title{
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding:0 20px;
    color: #909399;

}

.form-area .form-item .btn-sncode{
    width: 130px;
    height: 36px;
    position: absolute;
    right: 2px;
    top:2px;
}

.form-area .form-item .error{
    position: absolute;
    width: 240px;
    right: -250px;
    top: 10px;
    font-size: 12px;
    color:#f45d90;
    display: none;
}

.form-area .readme{
    margin: -40px 0;
    font-size: 12px;
}

.form-area .readme .checkbox{
    display: inline-block;
    height: 14px;
    width: 14px;
    border:solid 1px #dcdfe6;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-area .readme input:checked+.checkbox::after{
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    background: #00a1d6;
    border-radius: 2px;
    margin-left: 2.5px;
    margin-top: 2.5px;

}

.form-area .readme input:checked+.checkbox{
    border-color: #00a1d6;
}

.form-area .readme input{
    display: none;
}

button.fill{
    width: 100%;
}

.txt-right{
    text-align: right;
}

/* 统一设置a元素样式 */

a{
    color: #00a1d6;
}
/* 统一设置按钮样式 */
button{
    height: 40px;
    background: #00a1d6;
    /* background: #33b4de; */
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}

button:hover{
    background: #33b4de;
}

/* 统一文本框样式 */
input[type="text"],input[type="password"]{
    border:1px solid #dcdfe6;
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
    height: 40px;
    text-indent: 1em;
    font-size: 14px;
    color: #606266;
    font-family: "PingFanSC-Medium";

}

input[type="text"]:hover,input[type="password"]:hover{
    border-color: #c0c4cc;
}

input[type="text"]::placeholder,input[type="password"]::placeholder{
    color: #ccc;
}

input[type="text"]:focus,input[type="password"]:focus{
    border-color: #00a1d6;
}

body{
    line-height: 1.5;
}

button:disabled{
    background: #f5f5f5;
    color:rgba(0, 0, 0, 0.25);
    border:1px solid #d9d9d9;
    box-sizing: border-box;
    cursor: not-allowed;
}

reset.css


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a{
	text-decoration: none;
	color:inherit;
}

input,textarea,button,select{
	border: none;
}

input:focus,textarea:focus,button:focus,select:focus{
	outline: none;
	outline-offset: 0;
}

HTML

index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/reg.css">
</head>

<body>
    <div class="form">
        <h2>
            <span>注册</span>
        </h2>

        <div class="form-area">
            <div class="form-item">
                <input type="text" placeholder="账号">
                <div class="error">
                    该昵称已被他人占用。
                </div>
            </div>

            <div class="form-item">
                <input type="password" placeholder="密码(6-16个字符组成，区分大小写)">
            </div>

            <div class="form-item">
                <div class="select clearfix">
                    <div class="select-item">
                        <div class="title">
                            中国大陆
                        </div>
                        <ul>
                            <li>Lorem.</li>
                            <li>Voluptate!</li>
                            <li class="selected">中国大陆</li>
                            <li>Doloremque.</li>
                            <li>Sit.</li>
                            <li>Iste?</li>
                            <li>Est!</li>
                            <li>Placeat!</li>
                            <li>Amet.</li>
                            <li>Distinctio?</li>
                            <li>Aspernatur.</li>
                            <li>Totam!</li>
                            <li>Qui?</li>
                            <li>Illo.</li>
                            <li>Ullam.</li>
                            <li>Temporibus.</li>
                            <li>Ea!</li>
                            <li>Voluptatibus?</li>
                            <li>Nihil.</li>
                            <li>At?</li>
                            <li>Tempore!</li>
                            <li>Officia.</li>
                            <li>Eligendi?</li>
                            <li>Ipsa.</li>
                            <li>Est!</li>
                            <li>Blanditiis.</li>
                            <li>Aperiam.</li>
                            <li>Alias.</li>
                            <li>Incidunt?</li>
                            <li>Nostrum!</li>
                            <li>Facere?</li>
                            <li>Expedita?</li>
                            <li>Quos?</li>
                            <li>Expedita!</li>
                            <li>Earum.</li>
                            <li>Officiis?</li>
                            <li>Dicta?</li>
                            <li>Cupiditate?</li>
                            <li>Quia?</li>
                            <li>Neque!</li>
                            <li>Id.</li>
                            <li>Dolore.</li>
                            <li>Vero.</li>
                            <li>Non.</li>
                            <li>Quaerat.</li>
                            <li>Ex.</li>
                            <li>Mollitia!</li>
                            <li>Esse?</li>
                            <li>Est.</li>
                            <li>Asperiores?</li>
                        </ul>  
                    </div>
                    <div class="input">
                        <input type="text" placeholder="填写常用手机号">
                    </div>
                </div>
            </div>

            <div class="form-item">
                <input type="text" placeholder="请输入短信验证码">
                <button type="button" class="btn-sncode">点击获取</button>
            </div>

            <div class="readme">
                <label>
                    <input type="checkbox">
                    <span class="checkbox">
                    </span>
                    <span>
                        我已同意
                        <a href="">《bilibili弹幕网用户使用协议》</a>
                        和
                        <a href="">《bilibili弹幕网用户隐私保护政策》</a>
                    </span>
                </label>
            </div>

            <div class="form-item">
                <button disabled class="fill">注册</button>
            </div>

            <div class="readme txt-right">
                <a href="">已有账号直接登录&gt;</a>
            </div>
        </div>

    </div>
</body>

</html>