怎么用html写这个的代码？
1、效果如图，差不多就这样吧，也没金币何必那么认真。
2、代码如下，（注，用到了bootstrap，自己在HTML引入）
<div>
<p>demo_0323</p>
<style>
.bg {
background-color: rgb(23, 83, 108);
height: 600px;
}
.login {
background-color: rgb(63, 182, 220);
width: 350px;
height: 550px;
margin: auto;
margin-top: 20px;
box-shadow: 2px;
border-radius: 5px;
}
.input_a {
position: relative;
margin: auto;
margin-top: 50px;
width: 250px;
}
</style>
<div class="row bg">
<div class="login">
<div>
<image src="QQ2012.png"
style="width: 300px;margin-left:20px ;margin-top: 20px;"></image>
</div>
<div class="input_a">
<div class="input-group">
<div class="input-group-addon">学号</div>
<input type="text"
class="form-control"
id="exampleInputAmount"
placeholder="请输入你的QQ号" />
</div>
</br>
<div class="input-group">
<div class="input-group-addon">密码</div>
<input type="text"
class="form-control"
id="exampleInputAmount"
placeholder="请输入你的密码" />
</div>
</div>
<div style="margin-left:80px;margin-top: 20px; color:white;">
<!---->
<label class="checkbox-inline">
<input type="checkbox"
id="inlineCheckbox1"
value="option1"> 记住密码
</label>
<label class="checkbox-inline">
<input type="checkbox"
id="inlineCheckbox2"
value="option2"> 自动登录
</label>
</div>
<div style="margin-left:50px ;">
<button type="button"
style="width:150px;">登 录</button>
<button>更 多</button>
</div>
<div style="margin-left: 80px;">
<!---->
<label class="checkbox-inline">
<input type="checkbox"
id="inlineCheckbox1"
value="option1">隐身登录
</label>
<label class="checkbox-inline">
<input type="checkbox"
id="inlineCheckbox2"
value="option2"> 开启震动
</label>
</br>
<label class="checkbox-inline">
<input type="checkbox"
id="inlineCheckbox3"
value="option3"> 接收群消息
</label>
<label class="checkbox-inline">
<input type="checkbox"
id="inlineCheckbox4"
value="option3"> 设置静音
</label>
</div>
