html5+css3实现一款注册表单实例


Posted in HTML / CSS onApril 17, 2013

效果图如下:
html5+css3实现一款注册表单实例
html源码:

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id=wrapper>
<div id=lbl></div>
<form>
<fieldset id=account>
<legend>个人信息</legend>
<label for=username>账号:</label>
<input id=username class=textbox type=text name=username required placeholder="请填写账号" />
<label for=password1>密码:</label>
<input id=password1 class=textbox type=password name=password1 required placeholder="请填写密码"/>
<label for=password2>重复密码:</label>
<input id=password2 class=textbox type=password name=password2 required placeholder="请重复密码"/>
<label for=email>邮箱地址:</label>
<input id=email class=textbox type=email name=email required placeholder="www.csdn.com" />
</fieldset>
<fieldset id=personal>
<legend>其他信息</legend>
<label for=website>个人网址:</label>
<input id=website class=textbox type=url name=website required placeholder="http://www.example.com" />
<label for=age>年龄:</label>
<input id=age class=textbox type=number name=age min=18 step=2 pattern="[0-9]{1,3}" placeholder="填写年龄">
<label for=salary>月薪:</label>
<input id=salary class=textbox type=range name=salary min=0 max=50000 step=500 pattern="[0-9]{2,}" placeholder="月薪几多" value=10000 onchange="showValue(this.value)" />
<span id=rangevalue>10000</span>
<script>
function showValue(value) {
document.getElementById("rangevalue").innerHTML=value;
}
</script>
<label for=description>描述:</label>
<textarea id=description name=description cols=30 rows=5 placeholder="这里是详细描述"></textarea>
</fieldset>
<fieldset id=confirm>
<input type=submit value="提交" />
<div class="clearfix"></div>
</fieldset>
</form>
</div>
</body>
</html>

css源码:
复制代码
代码如下:

body{
background:url(bg.jpg) repeat;
font-family:Arial Narrow, Arial, sans-serif;
margin:0;
padding:0;
}
header, section, footer{
display:block;
}
header{
width:100%;
background-color:rgb(0, 0, 0);
background-color:rgba(0, 0, 0, 0.9);
color:#ccc;
padding:15px 0;
letter-spacing:1px;
margin-bottom:20px;
position:relative;
}
header h1{
margin:0 50px;
text-shadow:2px 2px 2px #888;
float:left;
}
#backlinks{
float:right;
margin:-10px 20px;
line-height:25px;
font-weight:bold;
font-size:12px;
text-align:right;
}
#backlinks a{
color:#ccc;
text-decoration:none;
margin:3px 0 0;
display:block;
}
#backlinks a:hover{
color:#fff;
}
footer{
background-color:rgb(0, 0, 0);
background-color:rgba(0, 0, 0, 0.8);
height:25px;
width:100%;
line-height:25px;
position:relative;
font-family:Arial,Helvetica,sans-serif;
bottom:0;
left:0;
color:#888;
font-size:11px;
}
footer span{
padding-left:20px;
}
footer a{
color:#1FA2E1;
}
#wrapper{
width:770px;
margin:0 auto;
text-align:center;
}
#wrapper hgroup{
margin:20px 0;
text-shadow:1px 1px 1px #ccc;
}
#wrapper h1{
color:#146FA0;
font-size:42px;
margin:0;
}
#wrapper h2{
color:#71C1ED;
font-size:27px;
margin:0;
}
#lbl{
color:#777;
font-size:17px;
font-weight:bold;
text-shadow:1px 1px 0 #fff;
margin:10px 0;
}
*:focus{
outline:none;
}
label, input, textarea, fieldset{
display:block;
}
fieldset#account, fieldset#personal{
width:250px;
padding:0 50px 50px;
margin:10px;
float:left;
background:rgb(244,244,244);
background:rgba(244,244,244,0.7);
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
border:3px double #999;
}
fieldset#confirm{
padding-top:10px;
clear:both;
border:none;
line-height:15px;
margin:10px 0;
}
fieldset#confirm label, fieldset#confirm input{
display:inline;
float:left;
margin:15px 5px 0;
}
legend{
font-size:20px;
font-weight:bold;
letter-spacing:5px;
color:#999;
margin-left:-20px;
text-align:left;
padding:0 10px;
text-shadow:1px 1px 0 #ccc;
}
label{
font-size:17px;
font-weight:bold;
margin:17px 0 7px;
text-align:left;
text-shadow:1px 1px 0 #fff;
}
textarea{
resize:both;
max-width:230px;
}
input.textbox, textarea{
padding:5px 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border:1px solid #fff;
width:200px;
text-shadow:1px 1px 1px #777;
-moz-box-shadow: 0px 2px 0px #999;
-webkit-box-shadow: 0px 2px 0px #999;
box-shadow: 0px 2px 0px #999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
background:url(required.png) no-repeat 200px 5px #F0F0EF;
background:-webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */
background:-webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+, Saf5.1+ */
background:-moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */
background:-ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
background:-o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */
}
input.textbox:focus, textarea:focus{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
-moz-box-shadow: 5px 3px 1px #ccc;
-webkit-box-shadow: 5px 3px 1px #ccc;
box-shadow: 7px 7px 2px #ccc;
text-shadow:1px 1px 3px #777;
}
input.textbox:required{
background:url(required.png) no-repeat 200px 5px #F0F0EF;
background:url(required.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */
background:url(required.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+, Saf5.1+ */
background:url(required.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */
background:url(required.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
background:url(required.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */
}
input.textbox:required:valid{
background:url(valid.png) no-repeat 200px 5px #F0F0EF;
background:url(valid.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */
background:url(valid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+, Saf5.1+ */
background:url(valid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */
background:url(valid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
background:url(valid.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */
}
input.textbox:focus:invalid, input.textbox:not(:required):invalid{
background:url(invalid.png) no-repeat 200px 5px #F0F0EF;
background:url(invalid.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */
background:url(invalid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+, Saf5.1+ */
background:url(invalid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */
background:url(invalid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
background:url(invalid.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */
}
input[type=submit] {
padding:10px;
margin:0 10px !important;
width:300px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type=range] {padding:0;}
}
#rangevalue{
display:block;
text-align:right;
margin-top:-25px;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #aaa;
font-style:italic;
text-shadow:1px 1px 0 #fff;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #aaa;
font-style:italic;
text-shadow:1px 1px 0 #fff;
}
.clearfix{
clear:both;
}
HTML / CSS 相关文章推荐
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 #HTML / CSS
html5与css3小应用
Apr 03 #HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 #HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 #HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 #HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 #HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 #HTML / CSS
You might like
PHP 高手之路(三)
2006/10/09 PHP
PHP之header函数详解
2021/03/02 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
简单使用Python自动生成文章
2014/12/25 Python
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
使用Python pip怎么升级pip
2020/08/11 Python
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
学前班评语大全
2014/05/04 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
财务个人年度总结范文
2015/02/26 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
工厂无线对讲系统解决方案
2022/02/18 无线电