Html制作简单而漂亮的登录页面
2021-05-08 21:12:30 先来看看样子。
html源码：
XML/HTML Code复制内容到剪贴板
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Login</title><linkrel="stylesheet"type="text/css"href="Login.css"/></head><body><divid="login"><h1>Login</h1><formmethod="post"><inputtype="text"required="required"placeholder="用户名"name="u"></input><inputtype="password"required="required"placeholder="密码"name="p"></input><buttonclass="but"type="submit">登录</button></form></div></body></html>css代码：
CSS Code复制内容到剪贴板
html{width:100%;height:100%;overflow:hidden;font-style:sans-serif;}body{width:100%;height:100%;font-family:'OpenSans',sans-serif;margin:0;background-color:#4A374A;}#login{position:absolute;top:50%;left:50%;margin:-150px00-150px;width:300px;height:300px;}#loginh1{color:#fff;text-shadow:0010px;letter-spacing:1px;text-align:center;}h1{font-size:2em;margin:0.67em0;}input{width:278px;height:18px;margin-bottom:10px;outline:none;padding:10px;font-size:13px;color:#fff;text-shadow:1px1px1px;border-top:1pxsolid#312E3D;border-left:1pxsolid#312E3D;border-right:1pxsolid#312E3D;border-bottom:1pxsolid#56536A;border-radius:4px;background-color:#2D2D3F;}.but{width:300px;min-height:20px;display:block;background-color:#4a77d4;border:1pxsolid#3762bc;color:#fff;padding:9px14px;font-size:15px;line-height:normal;border-radius:5px;margin:0;}总结：
复制代码代码如下:<input type="text" required="required" **placeholder="用户名"** name="u"></input>
<input type="password" required="required" **placeholder="密码"** name="p"></input>
placeholder="用户名"的作用:占位符
以上就是本文的全部内容，希望对大家的学习有所帮助。
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。 如涉及版权问题，请提交至online#300.cn邮箱联系删除。
最新文章
热门文章
猜你喜欢
