css登錄界面美化

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