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: 14px; 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: 14px; color: #000000; } .a1{ margin: 10px; color: #000000; } </style>

html文档：

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。 
<!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>

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄