practice
/
蓝信康-1.html

<!DOCTYPE HTML>
<html>
    <head>
    <meta name="viewport"
     content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
     user-scalable=0;"/>
    <title>蓝信康-用户登录</title>
    </head>
    <style>
  *{
    padding: 0;
    margin: 0;
}

html,body{
    overflow:hidden;
    width:100%;
}

.top{
    width: 100%;
    height: 60px;
}

.image{
    height: 60px;
    margin: 0;

}

.link{
    text-decoration: none;
    color: rgb(163, 163, 212);
    font-size: 20px;
    display: inline;
    position: fixed;
    right: 20px;
    top: 15px;
}

.div1{
    height: 604px;
    background-color:#e4e7ee;
    margin: 0;
    padding: 0;
}

.photo{
height:604px;
position:fixed;
top:60px;
left:21% ;
vertical-align: bottom;
}

.div2{
    display: inline-block;
    background-color: #fff;
    position: fixed;
    margin-top: 95px;
    margin-left: 59%;
    padding: 20px 50px;
    width: 215px;
    height: 235px;
    text-align: center;
    flex-direction: column;
    line-height: 3em;
}

.p1{
   font-size: 16px;
   font-weight: bold;
}

.p1 span{
    padding-bottom: 4px;
    border-bottom: 1px solid #e4e7ee;
}

.p2{
    font-size: 12px;
    color: #868faf;
}

.p2 a{
    color: #1989fa;
}

.form1 input{
height: 30px;
width: 200px;
}

.form1 button{
    height: 30px;
    width: 200px;
    background-color: #1989fa;
    border: none;
    color: ghostwhite;
    font-size: 12px;
}

.div3 p{
    text-align: center;
color: #868faf;
margin-top: 20px;
font-size: 16px;
}
    </style>
    <body>
        <div class="top">
            <img class="image" src="http://m.qpic.cn/psc?/V14BTghy2o0drH/UAKsoihnbkr0XNkArJGSujhttZqhtWRgdl7MDmybSjS2RtG96LBRV8RrQYxKTSXn8*ysAG4E2Z8Ms1hswhmZZw!!/b&bo=pQA9AAAAAAARB6g!&rf=viewer_4">
            <a class="link" href="http://www.carelinker.com/">返回蓝信康首页</a>
        </div>
        <div class="div1">
            <img class="photo" src="https://platform.carelinker.com/sc/web/pharmacy_mis/static/img/login_bg.190ea65.jpg">
            <div class="div2">
                <p class="p1"><span>登陆蓝信康账号</span></p>
                <form class="form1">
                    <input type="text" name="账号" placeholder="账号"/>
                    <input type="password" name="密码" placeholder="密码"/><br/>
                    <button>登&nbsp;&nbsp;录</button>
                    <p class="p2">没有蓝信康账号？<a href="http://www.carelinker.com/apply.html">申请试用</a></p>
                </form>
            </div>
        </div>
        <div class="div3">
            <p >蓝信康&nbsp;版权声明&nbsp;@2014-2020&nbsp;all right reserved.&nbsp;浙ICP备1402219号-2</p>
        </div>
    </body>
</html>