11.22表单练习

最新推荐文章于 2024-07-24 13:45:34 发布

阮小航

最新推荐文章于 2024-07-24 13:45:34 发布

阅读量364

点赞数 9

文章标签： css css3 前端

本文链接：https://blog.csdn.net/2301_80293400/article/details/134613887

版权

表单练习

话不多说，直接上代码

<!DOCTYPE html>
<html lang="cmn-hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单练习</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/表单练习.css">
</head>
<body>
    <div class="biaodan">
        <h2 class="zhuce">
            <span>注册</span>
        </h2>
        <div class="items">
            <div class="item">
                <input type="text" name="" id="" placeholder="昵称">
            </div>
            <div class="item">
                <input type="password" name="" id="" placeholder="密码">
            </div>
            <div class="item">
                <div class="shouji clearfix"><!--这里将这一行分为两个部分，select & input，其中select又分为title & choices，预取效果是点击title边上的按钮会将choices显示出来，但是缺少js相关知识，并且按钮还不会做，于是粗浅的搞了一个hover效果，有瑕疵（中间的margin会导致难以让choices出现）。这里主要是让select跟input并列，所以将它们都设为左浮动，然后记得clearfix，then，将choices设为绝对定位（记得将父元素设为相对定位），这样就可以让choices覆盖后面的元素了。-->
                    <div class="select">
                        <div class="title">
                            中国大陆
                        </div>
                        <div class="choices">
                            <ul>
                                <li>Lorem.</li>
                                <li>Voluptas.</li>
                                <li>Sed.</li>
                                <li>Modi!</li>
                                <li>Porro.</li>
                                <li>Lorem.</li>
                                <li>Atque!</li>
                                <li>Accusantium.</li>
                                <li>Aspernatur!</li>
                                <li>Ullam.</li>
                                <li>Quibusdam!</li>
                                <li>Est?</li>
                                <li>Asperiores.</li>
                                <li>Voluptas!</li>
                                <li>Quos.</li>
                                <li>Repudiandae?</li>
                                <li>Dolorem.</li>
                                <li>Animi.</li>
                                <li>Conntur!</li>
                                <li>Odit?</li>
                                <li>Qui.</li>
                                <li>Facere?</li>
                                <li>Autem!</li>
                                <li>Ea.</li>
                                <li>Contur!</li>
                            </ul>
                        </div>
                    </div>
                    <div class="input">
                        <input type="text" name="" id="" placeholder="填写常用手机号">                    
                    </div>
                </div>
            </div>
            <div class="you">
                <a href="" class="youxiang">用邮箱注册&gt;</a>
            </div>
            <div class="item yan">
                <input type="text" name="" id="" placeholder="请输入短信验证码">
                <button type="button">点击获取</button><!--这个按钮直接用绝对定位给他放到上面那个输入框里面去-->
            </div>
            <div class="readme">
                <label>
                    <input type="checkbox" name="" id="">
                    我已同意
                </label>                
                <a href="" class="xieyi">《bilibili用户使用协议就你也想看b站》</a>
                &
                <a href="" class="guifan">《bilibili账号中心规范呃(⊙﹏⊙)》</a>
            </div>
            
            <button type="button" class="zhucebutton">注册账号</button>
            
            <div class="deng">
                <a href="" class="denglu">已有帐号，直接登录&gt;</a>
            </div>
        </div>
        
    </div>
</body>
</html>

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.biaodan{
    width: 1000px;
    height:  1200px;
    margin: 1em auto;
}
.biaodan .zhuce{
    font-size: 38px;
    text-align: center;
    border-bottom: 2px solid #ddd;
    height: 18px;
    margin-bottom: 20px;
}
.biaodan .zhuce span{
    background: #fff;
    padding: 25px;
}
.biaodan .items{
    width: 400px;
    height: 800px;
    margin: 0 auto;
    position: relative;
}
.biaodan .items .item{
    margin: 30px 0;
}
input[type="text"],input[type="password"]{
    border: 2px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    width: 100%;
    height: 40px;

    font-size: 14px;
    text-indent: 1em;
}
input[type="text"]:hover,input[type="password"]:hover{
    border-color: #ccc;
}
input[type="text"]:focus,input[type="password"]:focus{
    border-color: #6cf;
}
input[type="text"]::placeholder,input[type="password"]::placeholder{
    color: #ccc;
}
.biaodan .items .item .shouji .select{
    float: left;
    width: 130px;
    box-sizing: border-box;
    font-size: 14px;
    position: relative;
}
.biaodan .items .item .shouji .input{
    float: left;
    width: 270px;
}
.biaodan .items .item .shouji .input input{
    width: 100%;
    border-radius: 0 5px 5px 0;
}
.biaodan .items .item .shouji .select .title{
    border: 2px solid #ccc;
    height: 40px;
    line-height: 40px;
    border-radius: 5px 0 0 5px;
    border-right: none;
    box-sizing: border-box;
    color: #ccc;
    padding: 0 1em;
    cursor: pointer;
}
.biaodan .items .item .shouji .select .choices{
    background: #fff;
    padding: 10px 0;
    cursor: pointer;
    border: 2px solid #ccc;
    margin-top: 10px;
    text-align: center;
    position: absolute;
    width: 120px;
    display: none;
    max-height: 300px;
    overflow: auto;
}
.biaodan .items .item .shouji .select:hover .choices{
    display: block;
}
.biaodan .items .item .shouji .select .choices li:hover{
    font-weight: bold;
    background: #6cf;
}
.biaodan .items .item .shouji .select .choices li{
    height: 25px;
    line-height: 25px;
}
.biaodan .items .you{
    position: absolute;
    top: 185px;
    right: 0;
    color: #008c8c;
}
.biaodan .items .item.yan button{
    position: absolute;
    box-sizing: border-box;
    right: 3px;
    top: 214px;
    width: 100px;
    height: 32px;
    border: lightblue 1px solid;
    border-radius: 5px;
    background: lightblue;
    cursor: pointer;
    color: #fff;
}
.biaodan .items .item.yan button:hover{
    background: #33b4de;
}
.biaodan .zhucebutton{
    width: 100%;
    background: lightblue;
    height: 40px;
    font-size: 20px;
    margin: 20px 0;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
}
.biaodan .zhucebutton:hover{
    background: #33b4de;
}
.biaodan .readme,.biaodan .deng{
    color: #008c8c;
}
.biaodan .deng{
    position: absolute;
    right: 0;
}