登陆网页模板 - 1 （HTML+CSS）

时间：2017-06-22 23:53:38 阅读：229 评论：0 收藏：0 [点我收藏+]

标签：pos 建议 alpha hid size code 好的 text href

一个用HTML和CSS写的简单登录页面，主要是用CSS来进行修饰美化的

这个登陆界面有输入账号和密码的表单，还有登陆和注册两个按键，点击按键分别会输出“您已成功登陆，稍后会跳转到您需要的页面~”，“您已成功注册，稍后会跳转到您需要的页面~”

PS：个人搭配略差，如果读者有什么好的搭配方案或者建议请不吝赐教，在此先谢过了~

<!DOCTYP html>
<html>
    <head>
    <meta charset="utf-8">
    
    <title>我的一个道姑朋友</title>
    
    <style type="text/css">

    body {
        background-image:url(1.jpg) ;
        background-size: 100%;
    }
    
    input {
    color:black;
    border:none;
    border-bottom:1px solid;
    width:230px;
    height:30px;
    background-color:pink;
    position:absolute;
    opacity:0.5;
        filter:Alpha(opacity=50);
    }

    h4 {
    position:absolute;
    
    left:20%;
    }
    
    #aa {
        width:400px;
        height:405px;
        background-repeat:no-repeat;
        background-image:url(2.jpg) ;
        position:absolute;
        top:10%;
        left:35%;
        
    }
    
    #bb {
        width:100%;
        height:40%;
        background-color:pink;
        position:relative;
        top:70%;
        opacity:0.5;
        filter:Alpha(opacity=50);
    }
    
    #cc {
        position:absolute;
        background-image:url(3.jpg) ;
        top:10%;
        left:10%;
        width:100px;
        height:100px;
        background-size: 100%;
    }
    
    #dd {
        position:absolute;
        top:90%;
        left:41%;
    }
    
    #yu {
        color:DarkOrchid;
        position:absolute;
        top:20%;
        left:30%;
        font-size:40px;
    }
    
    #jing {
        color:Tomato;
        position:absolute;
        top:50%;
        left:60%;
        font-size:20px;
    }
    
    #denglu {
    position:absolute;
    background-image:url(4.jpg) ;
    background-size: 100%;
    top:65%;
    left:30%;
    width:60px;
        height:50px;
    }
    
    #zhuce {
    position:absolute;
    background-image:url(4.jpg) ;
    background-size: 100%;
    float:left;
    top:65%;
        left:60%;
        width:60px;
        height:50px;
    }
    p.namea {
        position:absolute;
        top:10%;
        left:20%;
        
    }
    p.nameb {
        position:absolute;
        top:30%;
        left:20%;
        
    }
    
    #mima {
    position:absolute;
    top:-5px;
    left:100%;
    }
    
    #zhanghao {
    position:absolute;
    top:-5px;
    left:100%;
    }

    a:hover {
        color :red;
        border-bottom:1px solid;
    }
    </style>
    

    
    </head>
    
    <body>
        <script type="text/javascript">
            function aaaa()
            {
                alert("您已成功登陆，稍后会跳转到您需要的页面~");
            }
            function bbbb()
            {
                alert("您已成功注册，稍后会跳转到您需要的页面~");
            }
        </script>
        <div id="aa">
        
            <h5 id="yu">檐上四月雨</h5>
            <p id="jing">---人间惊鸿客</p>
            <div id="bb">
                <form>
                
                <p class="namea">账号:<input type="text" id="zhanghao" placeholder="请输入账号"/></p>
                <p class="nameb">密码:<input type="text" id="mima" placeholder="请输入密码"/></p>
                
                </form>
                <div id="denglu" onclick="aaaa()"><h4>登陆</h4></div>
                <div id="zhuce" onclick="bbbb()"><h4>注册</h4></div>
            </div>
            
            <div id="cc"></div>
            
        </div>
        
        <h2 id="dd">2017.06.22&nbsp&nbsp<a href="#" class="sd">LJMZ</h2>
    </body>
</html>