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

最新推荐文章于 2022-08-04 20:10:01 发布

理想不闪火

最新推荐文章于 2022-08-04 20:10:01 发布

阅读量468

点赞数

分类专栏： # 前端

本文链接：https://blog.csdn.net/weixin_43838785/article/details/115276458

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

<!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;
}

理想不闪火

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【响应式Web前端设计】Register Demo

<!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="
复制链接

扫一扫