php用户登入实例,css3完毕一款注册表单实例

2019-08-17 16:14 来源:未知

<!-- 这是一款简单实例的ajax php教程用户登录实例代码

效果图如下:

点评:注册表单采用html5 css3布局实现,效果相当不错,感兴趣的前端web设计者可以参考下哈,希望可以帮助到你

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" ";
<html xmlns="" xml:lang="en" lang="en">
<head>
 <title>ajax php用户登录实例 jquey_login by ;
 <meta http-equiv="content-type" content="text/html; charset=gbk" />
 <script type="text/网页特效" src="js/jquery-1.3.1.min.js"></script>
 <script type="text/javascript">
 /*<![cdata[*/
 
 $(document).ready(function () {

  var value = $('#button input').val();
  var name = $('#button input').attr('name');
  
  $('#button input').remove();
  $('#button').html('<a href="#" class="css教程submitbutton" rel=' name '>' value '</a>'); 
  
  $('#button a').live('click', function () {   
 
   
   var link = $(this);
   
   $.ajax({
    url : 'load.php',
    data: '',
    type: 'get',
    cache: 'false',
    beforesend: function () {
     link.addclass('loading');     
    },
    success: function () {
     link.removeclass('loading');  
     alert('submitted');
    }   
   });
   
  });
  
 });
 
 /*]]>*/
 </script>
 
 <style type="text/css"> 
  body {
   font-family: arial;
   font-size:12px;
   margin:10px; 
   text-align:center;
  }
  
  form {
   margin:0 auto;
   text-align:left;
   width:270px;
   border:1px solid #ccc;
   padding:15px;
   background:#fff;
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   box-shadow: 0 0 4px #ccc;
   -webkit-box-shadow: 0 0 4px #ccc;
   -moz-box-shadow: 0 0 4px #ccc;
  }
  
  fieldset {
   overflow:hidden;
   border:0;
   height:30px; 
   margin:3px 0;
  }
  
  fieldset label {
   display:block;
   width:50px;
   float:left;
   font-weight:700;
   color:#666; 
   line-height:2.2em;
  }
  
  fieldset input {
   float:left;
   border:1px solid #ccc; 
   height: 20px;
   padding:3px;
   width:190px;
   font-size:12px;
  }
  
  #button {
   margin-top:10px;
   padding-right:20px;
   text-align:right; 
  }

  #button input {
   margin:0 auto;
  }  

  a.csssubmitbutton {   
   font-size: 12px;
   background: #fff no-repeat 4px 5px;
   display: inline-block;
   padding: 5px 20px 6px;
   color: #333;
   border:1px solid #ccc;
   text-decoration: none;
   font-weight: bold;
   line-height: 1.2em;
   border-radius: 15px;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   -moz-box-shadow: 0 1px 3px #999;
   -webkit-box-shadow: 0 1px 3px #999;
   position: relative;
   cursor: pointer;
   outline:none;
  }
  
  a.csssubmitbutton:visited {}
  
  a.csssubmitbutton:hover {
   border:1px solid #333;
  }
  
  .loading {
   background-image:url('load.gif') !important;
   color:#ccc !important; 
   -moz-box-shadow: 0 0 0 #fff !important;
   -webkit-box-shadow: 0 0 0 #fff !important;
  }

  .effect {
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px; 
  }

 </style>
</head>
<body>

<form method="post" action="" name="subscribeform">
 <fieldset>
  <label>name: </label><input type="text" class="effect" name="name">
 </fieldset>

 <fieldset>
  <label>email: </label><input type="text" class="effect" name="email">
 </fieldset>

 <div id="button">
  <input type="submit" value="subscribe" name="subscribeform"/>
 </div>
</form>


</body>
</html>

 图片 1

效果图如下:
图片 2
html源码:

效果预览地址

实例下载

html源码:

代码如下:

这是一款简单实例的ajax php教程用户登录实例代码 !doctype html public -//w3c//dtd xhtml 1.0 strict//en html x...

[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="; 
 
</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="" /> 
 
            <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> 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" />
<script src=";
</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="" />
<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>

<!DOCTYPE html>
<html>
<head>

css源码:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

代码如下:

<link rel="stylesheet" href="css/style.css" />
<script src=";

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

</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="" />

   <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源码:

[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; 

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源码: [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=...

TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:php用户登入实例,css3完毕一款注册表单实例