<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input标签账号登录案例学习</title>
<style>
.line{
margin-top: 20px;
width: 161px;
}
.line .shuru{
width: 100px;
height: 25px;
border: 1px solid #0075d2;/*输入框的边框样式*/
border-radius: 3px;
padding-left: 3px;/*这是输入指针线与边框的距离 内边距*/
}
.line .chongzhi{
width: 50px;
height: 20px;
border: 1px solid #0075d2;
border-radius: 3px;/*边框的圆角，不是方的是有弧度的更美观*/
color: #0075d2;
background-color: #fff;
float: left;
}
.line .tijiao{
width: 50px;
height: 20px;
border-radius: 3px;
color: #fff;
background-color: #0075d2;
float: right;
border: 0;
}
</style>
</head>
<body>
<!--form标签的作用就是限制标签的区域，比如遇到重置按钮时，让重置的内容限于一定区域这样才会不是所有的都重置-->
<form action="">
<div class="line">
<span>账号:</span>
<input type="text" class="shuru"/>
</div>
<div class="line">
<span>密码:</span><!--span标签意思是不换行-->
<input type="password" class="shuru"/><!--输入密码的框-->
</div>
<div class="line">
<input type="reset" class="chongzhi" /><!--重置按钮-->
<input type="submit" class="tijiao"/><!--提交-->
</div>
</form>
</body>
</html>
input标签案例：账户登录页面
猜你喜欢
转载自blog.csdn.net/qq_33322074/article/details/79696472
今日推荐
周排行