zoukankan html css js c++ java

登陆网页模板

一个用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>

效果图：

点击登陆：

点击注册：

查看全文

相关阅读:
java反射详解（转至 http://www.cnblogs.com/rollenholt/archive/2011/09/02/2163758.html）
DexClassLoader
防止 apk反编译 jocky-- java混淆代码 (转至：http://my.oschina.net/f839903061/blog/72554)
Android APK反编译详解（附图） (转至 http://blog.csdn.net/ithomer/article/details/6727581)
双卡手机怎么指定SIM卡打电话
 android设备休眠
 GSON使用笔记（3） -- 如何反序列化出List
Notepad++ 更换主题
 如何才能成为一个成功的项目经理
 项目经理是干出来的，不是学出来的；是带出来的，不是教出来的

原文地址：https://www.cnblogs.com/ljmzzyk/p/7067648.html