This article mainly introduces how to use css to beautify the website login interface. Friends who need it can refer to it.
The code is as follows:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>美化登录</title> <style type="text/css"> *{margin:0;padding:0;}/*去掉页面样式*/ body{color:white;} .content{ background-color:pink; position:absolute;/*绝对定位*/ top:50%; left:0; width:100%; height:400px; margin-top:-200px; overflow:hidden;/*隐藏滚动条*/ } .main{ text-align:center;/*文本居中*/ max-width:600px; height:400px; padding:100px 0px;/*上下80px,左右为0*/ /*background:yellow;*//*验证div的位置*/ margin:0 auto;/*设置上右下左,居中显示*/ } .main h1{ font-family:"楷体";/*设置字体*/ font-size:70px;/*设置字体大小*/ font-weight:2px;/*调整字体粗细*/ } form{ padding:20px 0; } form input{ border:1px solid white; display:block; margin:0px auto 10px auto;/*上 右 下 左*/ padding:10px; width:220px; border-radius:30px;/*H5设置圆角边框*/ font-size:18px; font-weight:300; text-align:center; } form input:hover{ background-color:pink; } form button{ background-color:yellow; border-radius:10px; border:0; height:30px; width:50px; padding:5px 10px; } form button:hover{ background-color:red; } </style> </head> <body> <div class="content"> <div class="main"> <h1>Welcome</h1> <form> <input type="text" name="useid" placeholder="请输入账号"/> <input type="password" name="pw" placeholder="请输入密码"> <button type="submit">登 录</button> </form> </div> </div> </body> </html>
Related recommendations:
Use css to beautify html Detailed examples of form controls (form beautification)
css beautification, optimization, and merging tool recommendations_html/css_WEB-ITnose
Beautify with pure CSS radio and checkbox_html/css_WEB-ITnose
The above is the detailed content of css login interface beautification. For more information, please follow other related articles on the PHP Chinese website!