【响应式Web前端设计】Register Demo

妖狐艹你老母 2022-11-14 00:59 174阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>用户注册</title>
        <link type="text/css" rel="stylesheet" href="css/register.css">
    </head>
    <body>
    <div>
    <img class="tree" src="images/tree.jpg"/>
    <form class="contact_form" action="#" method="post" name="contact_form">
        <ul>
            <li class="usually">
                 <h2>用户注册</h2>
            </li>
            <li class="usually">
                <span>昵称:</span>
                <input type="text" id="name" name="name" required />
            </li>
            <li class="usually">
                <span>注册邮箱:</span>
                <input type="email"  name="email" placeholder="javin@example.com" required />
            </li>
            <li class="usually">
                <span>密码:</span>
                <input type="password"  name="password" required />
            </li>
            <li class="special">
                <span >性别:</span>
                <input type="radio" name="sex" id="male" checked/>
                <label for="male">男</label>
                <input type="radio" name="sex" id="female" />
                <label for="female">女</label>
            </li>
            <li class="usually">
                <span>年龄:</span>
                <input type="number" name="age" required/>
            </li>
            <li class="special">
                <span >兴趣爱好:</span>
                <input type="checkbox" id="football" name="interest" />
                <label for="football">足球</label>
                <input type="checkbox" id="basketball" name="interest" />
                <label for="basketball">蓝球</label>
                <input type="checkbox" id="swim" name="interest" />
                 <label for="swim">游泳</label>
                <input type="checkbox" id="sing" name="interest" />
                <label for="sing">唱歌</label>
                <input type="checkbox" id="run" name="interest" />
                <label for="run">跑步</label>
                <input type="checkbox" id="yoga" name="interest" />
                <label for="yoga">瑜伽</label>
            </li>
            <li class="usually">
                <span>自我介绍:</span>
                <textarea rows="10" cols="200" name="introduction" placeholder="Please enter your message"
            class="message" required></textarea>
            </li>
            <li >
                <button class="submit" type="submit">立即注册</button>
            </li>
        </ul>
    </form>
        </div>
    </body>
    </html>

/*第4单元 项目4-2 用户注册页面*/
    *:focus { outline: none;}/*该元素获得焦点时，不出现虚线框（或高亮框）*/
    .contact_form{ 
        width: 70%;/*设置该元素宽度为整个浏览器的70%*/
        position: absolute;/*绝对定位*/
        top: 20%;
        left: 35%;
    }
    .tree{ 
        position:relative;/*相对定位*/
        top: 420px;
        left: 260px;
    }
    .contact_form h2, .contact_form span { 
        font-family:Georgia, Times, "Times New Roman", serif;
    }
    .form_hint { font-size: 11px;}
    .contact_form ul { 
        width:750px;
        list-style: none;/*清除默认样式*/
        margin:0px;
        padding:0px;
    }
    .contact_form li{ 
        padding:12px;
        border-bottom:1px solid #eee;
        position:relative;
    }
    /*给类名为contact_form的元素的第一个子元素li和最后一个子元素li加底部边框*/
    .contact_form li:first-child, .contact_form li:last-child { 
        border-bottom:1px solid #777;
    }
    .contact_form h2 { 
        margin:0;
    }
    .contact_form span { 
        width:150px;
        margin-top: 3px;
        display:inline-block;/*把块元素强制转换为行内块元素*/
        padding:3px;
    }
    /*给类名为usually的元素下的input标签定义宽高和内边距*/
    .usually input { 
        height:20px;
        width:220px;
        padding:5px 8px;
    }
    .contact_form textarea { padding:8px; width:300px;}
    .contact_form button { margin-left:156px;}
    .special input { 
        height:15px;
        width:40px;
        padding:5px 8px;
    }
    /*给类名为usually的元素下的input和textarea标签设置背景颜色、背景图片、边框、外阴 影、内阴影、边框圆角以及内边距的过渡效果*/
    .usually input, .usually textarea { 
        background: #fff url(../images/attention.png) no-repeat 98% center;
        border:1px solid #aaa;
        box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
        border-radius:2px;
        transition: padding .25s;
    }
    /*当该元素获得焦点时，设置背景颜色和背景图片、边框、外阴影和右内边距*/
    .usually input:focus, .usually textarea:focus { 
        background: #fff;
        border:1px solid #555;
        box-shadow: 0 0 3px #aaa;
        padding-right:70px;
    }
    /* Button Style */
    button.submit { 
        background-color: #68b12f;
        /*背景颜色线性渐变：由上至下从#68b12f色过渡到#50911e*/
        background: linear-gradient(top, #68b12f, #50911e);
        border: 1px solid #509111;
        border-bottom: 1px solid #5b992b;
        border-radius: 3px;
        box-shadow: inset 0 1px 0 0 #9fd574;/*设置向下1px的#9fd574色的内阴影*/
        color: white;
        font-weight: bold;/*字体粗细为粗体*/
        padding: 6px 20px;/*内边距：上下6px、左右20px*/
        text-align: center;/*文本对齐方式：水平居中*/
        text-shadow: 0 -1px 0 #396715;/*文本阴影向上1px的#396715色*/
    }
    /*当鼠标悬停在提交按钮时，该按钮背景颜色透明度为85%，光标变成“小手”*/
    button.submit:hover { 
        opacity:.85;
        cursor: pointer;
    }
    /*当鼠标点击提交按钮时，出现1px的#20911e色的实现边框同时出现内阴影*/
    button.submit:active { 
        border: 1px solid #20911e;
        box-shadow: 0 0 10px 5px #356b0b inset;
    }
    /*当该元素获得焦点填写内容无效时，设置背景颜色、背景图片、盒阴影及边框颜色*/
    .usually input:focus:invalid, .usually textarea:focus:invalid { 
        background: #fff url(../images/warn.png) no-repeat 98% center;
        box-shadow: 0 0 5px #d45252;
        border-color: #b03535
    }
    /*当该元素获取有效的填写内容时，设置背景颜色、背景图片、盒阴影及边框颜色*/
    .usually input:required:valid, .usually textarea:required:valid { 
        background: #fff url(../images/right.png) no-repeat 98% center;
        box-shadow: 0 0 5px #5cd053;
        border-color: #28921f;
    }