本篇文章主要介绍如何用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;

}

Welcome

登录

相关推荐：

用css美化html表单控件(表单美化)详细示例

css美化、优化、合并工具推荐_html/css_WEB-ITnose

用纯CSS美化radio和checkbox_html/css_WEB-ITnose