【响应式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="data: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;
}

【响应式Web前端设计】Register Demo相关推荐

【响应式Web前端设计】一文学会使用Bootstrap！
文章目录 1 概念 2 Bootstrap简介 3 布局容器 4 导航栏(navbar) 4.1 基本 4.2 响应式 5 垂直表单-基本表单 6 栅格系统 7 标签页 8 响应式工具请先学习该文 ...
【响应式Web前端设计】Login Demo
body{background: url('../img/1.png')no-repeat center center fixed;background-size: cover;padding: 20 ...
【响应式Web前端设计】Bootstrap入门Demo(导航栏)
文章目录 1 导入bootstrap.min.css 2 效果 3 代码 1 导入bootstrap.min.css 2 效果 3 代码 <!--作者:88304454@qq.com时间:202 ...
【响应式Web前端设计】CSS3 :nth-of-type() 选择器
<!DOCTYPE html> <html> <head> <style> p:nth-of-type(2) {background:#ff0000; ...
【响应式Web前端设计】css如何设置边框的圆角样式？border-radius属性设置圆角样式（图文）
border-radius包含5种设置圆角样式方式: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :设置左上角边框的圆角样式. borde ...
【响应式Web前端设计】css中：overflow：hidden解决塌陷
overflow:hidden是当元素内的内容溢出的时候使它隐藏溢出的部分,即超出部分隐藏. 1.我们给一个父元素,里面有两个子元素 2.样式如下:给父元素设置背景颜色,子元素设置边框,两个字元素向左 ...
【响应式Web前端设计】CSS浮动(float,clear)讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
【响应式Web前端设计】!important的用法及作用
div { color: #f00 !important; } div { color: #000; } //上述代码中,ie6及其以下浏览器div的文本颜色为#fff,后面的重写的div样式没有起作 ...
【响应式Web前端设计】new Option()函数的作用（三区联动）
在做三级联动的时候遇见了这个函数,对函数的用法进行一下小总结,不太详细,敬请谅解. 作用:用于创建一个新的选项 Option()构造函数接受两个参数:文本(text)和值(value);第二个参数可选 ...

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

【响应式Web前端设计】Register Demo相关推荐

最新文章

热门文章