WEB前端

简单漂亮的H5登录页面 用户注册页面

位置:首页 > WEB前端 > 网页模板,2017-03-25
这个是简单漂亮的H5登录页面,大家改一下就可以成为H5用户注册页面

这个是简单漂亮的H5登录页面,大家改一下就可以成为H5用户注册页面

简单漂亮的H5登录页面 用户注册页面(图1)

代码如下


<!DOCTYPE HTML>  
<html>  
    <head>  
        <title>会员登录ab蓝学网</title>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        
        <style>  
        *{margin:0px;paddding:0px;}
        body{background-image:url(f612dc891d2969e69ffd479592738979.jpg);background-size:1090px 1920px; }
            .main_bar{  
                height:350px;  
                margin-top:10%;  
            }         
            #login_form{    
                height:100%;  
                margin:0 auto;  
            }  
            .title{  
                width:100%;  
                height:55px;  
                color:#ffffff;  
                                background-color:#df1b25;  
                
                border-bottom:1px solid #ffffff;  
                font-size:20pt;  
                font-family:"微软雅黑";  
                line-height:55px;  
                text-align:center;                
            }  
            #form_widget{  
                width:100%;  
                height:295px;  
            }  
            .txt{  
                display:block;/*设置为独立块(换行)*/  
                width:70%;  
                margin:0 auto;  
                height:35px;  
                font-size:15pt;  
                border-radius:5px;/*设置圆角样式*/  
                border:0;  
                padding-left:8px;  
            }  

    
      
            /*层级选择器*/  
            #search_pass_link a{  
                color:#000000;  
                text-decoration:none;                 
            }  
            /*伪类*/  
            #search_pass_link a:hover{  
                color:#ff0000;  
                text-decoration:underline;  
            }  
            .btn{  
                width:70%;  
                margin-left:15%;  
                height:40px;  
                border:0;  
                font-size:14pt;  
                font-family;"微软雅黑";  
                background-color:#FC5628;  
                color:#ffffff;  
                cursor:pointer;/*设置指针鼠标的样式*/  
                border-radius:20px;/*设置圆角样式*/  
                border:0px;  
            }     
            #copyright{  
                width:100%;  
                text-align:center;  
                padding-top:50px;  
                font-family:"微软雅黑";  
                color:#b5b3b3;  font-size:13px;
            }  
        </style>  
    </head>  
    <body>  
     <div class="title">  
                    用户登录                   
                </div>  
      <div class="main_bar"> 
       
            <div id="login_form">  
                  
                <form action="main.html" onsubmit="return check()">  
                <div id="form_widget">  
                    <br>  
                    <input type="text" placeholder="请输入账号" id="box_name" class="txt" value="用户名" onfocus="this.value=''" onblur="if(this.value=='')this.value='用户名'"/>  
                    <br>  
                    <input type="password" placeholder="请输入密码" id="box_pass" class="txt" value="password" onfocus="this.value=''" onblur="if(this.value=='')this.value='password'"/>  
                    <br>  
                     
                    <input  type="submit" value="登录" class="btn" onmouseover="this.style.backgroundColor='#FF8D00'" onmouseout="this.style.backgroundColor='#FC5628'">  
                    <br>  
                    <div id="copyright">  
                       www.ablanxue.com &copy;CopyRight 2017  
                    </div>  
                </div>  
                </form>  
            </div>  
   </div>
    </body>     
   
</html>  


以上就是简单漂亮的H5登录页面 用户注册页面,大家觉得怎么样。。

TAGS:H5登录页面H5注册页面

猜你喜欢

NewHot