初学html,任务2:写一个简单的登陆/注册界面
先在body中把最基础的标签写出来
现在页面运行出来是这样的
就是一个没有任何样式的基础界面:
接下来我们为这些标签加上样式
首先还是让页面所有元素的padding和margin都设置为0,
清除浏览器本身对界面的影响:
然后加上背景图,并且将字体设置为微软雅黑
接下来给整个登陆框设置样式
并且让登陆框绝对居中,会使用到绝对位置属性
给h1标签加上样式
给两个输入框设置样式,border给输入框设置边框线样式、粗细和颜色;
border-radius属性给边框设置圆角角度,像素越接近10,弧度越大
给登陆和注册按钮设置样式,
样式设置完,界面就是这样的
代码实现如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录</title> <style> *{margin:0; padding:0; box-sizing:border-box; } body { background: url(./img/timg.jpg) no-repeat center 0px fixed; background-size: cover; font-family: "微软雅黑", sans-serif; } .login { position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -150px; width:300px; height:300px; } .login h1 { color:#555555; text-shadow: 0px 10px 10px #CDC673; letter-spacing:2px;text-align:center; margin-bottom:20px; } input{ padding:10px; width:100%; color:white; margin-bottom:10px; background-color:#555555; border: 1px solid black; border-radius:5px; letter-spacing:2px; } form button{ width:100%; padding:10px; margin-bottom:10px; background-color:#CDC673; border:1px solid black; border-radius:5px; cursor:pointer; } </style> </head> <body> <div class="headtop"></div> <div class="login"> <h1>Login</h1> <form action="" method="post"> <input type="text" name="user" placeholder="用户名" required="required"> <input type="password" name="password" placeholder="密 码" required="required"> <button type="submit">登录</button> <button type="submit" onclick="location='zhuce.html'">注册</button> </form> </div> </body> </html>
若要实现页面跳转可以加入a标签,使跳转到注册界面。