1、账号登入设计
使用网页HTML5设计出账号登入设计，分别使用了布局设计：
（1）<h1></h1>标题标签
（2）<hr>换行标签
（3）<input>输入框标签
1.1html代码：
<a href="/login"><img src="img/logo.png" class="fl" alt="牛耳教育网" /></a>
<body background="img/bg.png">
<div class="zjm" >
<h2>账号登入</h2>
<hr width="406" color="black" ></br>
<form>
<div> 账 号：
<input type="text" id="name" class="head" placeholder="请输入账号">
</div></br>
<div> 密 码：
<input class="keyboard" type="password" id="nm" placeholder="请输入密码" required/>
</div>
<div id="btn" align="center" >
<input type="submit" value="确定" class="submitbtn">
</div>
</form>
</div>
<div class="bigBox">
<p>登入/注册即表示你同意 <a href="#">用户协议 和 隐私条款 忘记密码？</a></p>
</div>1.2css代码
<style>
.zjm{
width: 406px;
height: 300px;
margin: 100px auto;
border: 1px solid wheat;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background: white;
}
h2{
color: #ffb51a;
text-align: center;
}
input#name {
width: 250px;
height: 40px;
border: 1px solid #0a070e;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input#nm {
width: 250px;
height: 40px;
border: 1px solid #0a070e;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.submitbtn {
margin: 40px;
padding: 0px;
display: block;
outline: none;
border: none;
width: 300px;
height: 30px;
color: white;
font-weight: 700;
border-radius: 5px;
text-align: center;
background-color: #f31527;
}
.bigBox p{
position: revert;
top: 0px;
text-align: center;
color: #666666;
}
.bigBox a{
color: blue;
font-weight: bold;
text-decoration: none;
}
</style>2.效果
1737
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
