<!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
今日推荐
周排行