小米的登陆页面

css代码：

<style type="text/css">
            body{
                background-color: #EEF3FA;
                font: "微软雅黑"12px;
                margin: auto;
            }
            #conter{
                background: #FFF;
                width: 1130px;
                height: 800px;    
                margin: auto;
            }
                #code{
                width: 67px;
                height: 35px;
                position: absolute;
            }
            .loge{
                height: 100px;
                
            }
            .loge img{
                left: 100px;
                padding-left:100px ;
                
            }
            .login{
                background-color:#444444;
            
                float: right;
                height: 400px;
                width:365px;
                margin-top: 105px;
                padding: 20px;
                margin-right: 5px;
                border-radius: 10px;
            }
            .banner{
                height: 588px;
                width: 1130px;
        
            background-image:url(../img/login_bg.jpg) ;
            background-position-x: 25px;
            }
            #head{
                height: 80px;
                font-size: 18px;
                color: #FFFFFF;
            }
            #vip{
                font-size: 20px;
                margin-left:20px ;
                line-height: 60px;

            }
            #long{
                font-size: 14px;
                float: right;
                line-height: 60px;
                
            }
            a{
                text-decoration: none;
                font-family: "微软雅黑";
                color: red;
            }
            hr{
                width: 320px;
                border-color: #FF6700;
            }
            input{
                height: 30px;
                width: 200px;
                margin: 10px;
            }
            .p1{
                height: 30px;
            }
            .img{
                margin-top: 10px;
                position: absolute;
            }
            .input{
                background-color: #FF6700;
                width: 240px;
                height: 40px;
                border: 0px;
                color: #fff;
                margin-left:60px ;
                position: relative;
                
            }
            .even{
                width: 100px;
            }
            footer{
                margin: auto;
                width: 1130px;
                height: 100px;
                text-align: center;
            }
            p{
                font-size: 18px;
                color: #000000;
            }
            .a1{
                margin: 10px;
                color: #000000;
            }
        </style>

html文档：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/lg.css"/>

        
    </head>
    <body>
        <div id="conter">
            <div class="loge">
            <img src="img/mistore_logo.png"/>
            </div>
            <div class="banner">
            
                <div class="login">
                    <head>
                        <div id="head">
                            <span id="vip">
                                会员登录  
                            </span>
                            
                            <span id="long">
                                你还不是我们的会员？ 
                                <span id="reido">
                                    <a href="#">立即注册</a>    
                                </span>
                            </span>
                            <hr />
                            
                        </div>
                    </head>
                    <form action="/stu" method="post">
                        用户名：
                        <input type="text" name="username" id="username" placeholder="请输入用户名"/><br/>
                        密&nbsp;&nbsp;&nbsp;&nbsp;码：
                        <input type="password" name="password" id="password" placeholder="请输入密码"/>
                        
                        <br/>
                        <p id="p1">
                            验证码：
                        <input class="even" type="text" placeholder="请输入验证码"/>
                    <img class="img" src="img/yanzhengma.jpg" height="35px" />
                        <br/>
                    
                        </p>
                        
                        
                        <input class="input" type="submit" value="立即登录"/>
                    </form>
                </div>
            </div>
            
            <footer>
                <p>
                    <a class="a1" href="#">简体</a>|
                    <a class="a1"  href="#">繁体</a>|
                    <a class="a1"  href="#">English</a>|
                    <a class="a1"  href="#">常见问题</a>
                </p>
                    <a class="a1" href="#">小米公司版权所有—京ICP备10046444-<img src="img/ghs.png" />京公安王备11010802020134号—京ICP证110507号</a>
            </footer>
        </div>
        
    </body>
</html>

猜你喜欢