采用CSS3设计的登陆界面

最新推荐文章于 2020-11-13 10:53:47 发布

转载最新推荐文章于 2020-11-13 10:53:47 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuyongsky1234/p/4113568.html

本文介绍了一个使用HTML5和CSS3设计的登录页面示例，包括表单元素、样式设置及简单的用户名与密码验证。作者分享了其学习过程中的实践心得。

body部分内容：

<body>
        <form id="form_id" name="form_id" method="get" action="http://baidu.com" onsubmit="return checkUser()">
            <div id="loginForm">
                <div id="loginTitle">LOGIN</div>
                <div id="loginContent">
                    <div id="user_info">
                        <label>Username:</label><img src="./user.png" /><input id="login_username" type="text" name="login_username" maxlength="32" placeholder="Username" />
                        <br />
                        <label>Password:</label><img src="./pwd.png" /><input id="login_password" type="password" name="login_password" maxlength="32" placeholder="Password" />
                    </div>
                    <div id="user_help">
                        <input id="login_save" type="checkbox" /><label>Remember me</label>     |     <a href="#" target="_blank">Forgot password?</a>
                    </div>
                </div>
                <div id="loginButton">
                    <div id="register"><input id="register_button" type="button" name="regButton" value="register" onclick="register()" /></div>
                    <div id="login"><input id="login_button" type="submit" name="login_button" value="login" /></div>
                </div>
            </div>
        </form>
</body>

View Code

style部分内容：

<style>
            html,body,div{
                margin:0;
                padding:0;
                font-size:100%;
            }
            html{
                background:url('./bgeight.jpg') no-repeat;
                background-size:cover;
            }
            #loginForm{
                height:200px;
                width:350px;
                position:absolute;
                top:50%;
                left:50%;
                margin:-100px 0 0 -175px;
                box-shadow:0px 0px 25px 12px #c0c0c0;
                border:6px solid;
                border-color:#c0c0c0;
                border-radius:12px;
            }
            #loginTitle{
                height:50px;
                width:100%;
                font-family:blazed,Kunstler Script"New York",Georgia;
                font-weight:bold;
                font-style:oblique;
                font-size:2em;
                text-align:center;
                line-height:50px;
                //-webkit-text-stroke:10px black;
                color:white;
                text-shadow:1px 1px 0 rgba(107,223,248,0.8),2px 2px 0 rgba(107,223,248,0.8),3px 3px 0 rgba(107,223,248,0.8),4px 4px 0 rgba(107,223,248,0.8),5px 5px 0 rgba(107,223,248,0.8);
            }
            #loginContent{
                height:110px;
                width:100%;
                position:relative;
            }
            #loginButton{
                height:40px;
                width:100%;
            }
            #register{
                height:40px;
                width:175px;
                float:left;
            }
            #login{
                height:40px;
                width:175px;
                float:left;
            }
            #register_button{
                height:40px;
                width:175px;
                background:none;
                border-radius:6px;
                border:1px solid;
                border-color:#808080;
                box-shadow:0px 0px 10px 0px #c0c0c0 inset;
                font-weight:bold;
            }
            #login_button{
                height:40px;
                width:175px;
                background:none;
                border-radius:6px;
                border:1px solid;
                border-color:#808080;
                box-shadow:0px 0px 10px 0px #c0c0c0 inset;
                font-weight:bold;
            }
            #user_info{
                position:absolute;
                height:80px;
                width:250px;
                left:75px;
                top:0px;
            }
            #user_help{
                position:absolute;
                height:30px;
                width:230px;
                left:60px;
                top:80px;
            }
            label{
                font-weight:bold;
                width:20px;
            }
            #user_info input{
                background:none;
                width:175px;
            }
            input[type=checkbox]{
                vertical-align:middle;
                margin-top:0;
            }
            #user_help input,#user_help label,#user_help a{
                line-height:30px;
                font-size:12px;
            }
            img{
                height:20px;
                width:20px;
                display:block;
                float:left;
            }
            #user_info label{
                display:block;
            }
</style>

View Code

简单的登陆名与密码判断：

<script>
            function checkUser(){
                var Username=document.getElementById('login_username').value;
                var Password=document.getElementById('login_password').value;
                
                if(Username==""||Username==null){
                    alert("The Username can't be null");
                    return false;
                }
                if(Password==""||Password==null){
                    alert("The Password can't be null");
                    return false;
                }
                else
                {
                    return true;
                }
            }
</script>

View Code

这个示例采用CSS3的一些特性来制作的，自己学习HTML5+CSS3的一个练习作品，请大家欣赏与指导，谢谢！

更多知识分享：微笑空间站

转载于:https://www.cnblogs.com/xuyongsky1234/p/4113568.html