前端：登录界面 -尊龙游戏旗舰厅官网
今天是暑期实习第二天，闲着没事做了个登录界面，就写在这里记录一下吧😄
<!doctype html> <html lang="en"> <head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录</title><!-- 添加内部样式begin --><style>form {border: 1px #ccc solid;border-radius: 8px;box-shadow: 2px 3px 20px #ccc;width: 260px;margin: auto;/* 当宽度固定可居中 */padding: 0 20px;}.row{border: 0px red solid;margin-bottom: 15px;}.btn,h3{margin: 30px 0;}/* 属性选择器 */input[type='submit']{width: 100%;background-color: blue;color: white;border: 0;padding: 5px 0;border-radius: 20px;}label{width: 66px;display: inline-block;/* 内连块元素，宽度一定 */text-align: right;}.txt{padding: 5px;border: solid 1px #ccc;border-radius: 5px;}</style><!-- 添加内部样式end --><!-- 添加外部样式end --><!-- <link rel="stylesheet" href="css/style.css">--><!-- 添加外部样式end --> </head><body><form action=""><h3>用户登录：</h3><!-- 表单控件 --><!-- 布局元素div --><div class="row"><!-- label内联元素，宽度自动 --><label for="name">用户名：</label><input class="txt" type="text" id="name" name="name" placeholder="请输入用户名"></div><div class="row"><label for="pass">密码：</label> <input class="txt" type="password" id="pass" name="pass" placeholder="请输入密码"></div><div class="row btn" ><input type="submit" value="登录"></div></form> </body> </html>最终效果：
注：本文原创，转载请注明出处
总结
- 上一篇：
- 下一篇：