色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

登陸和注冊css模板

林玟書2年前9瀏覽0評論

現在,很多網站都需要用戶進行登陸或注冊,為了方便用戶操作,我們可以使用CSS模板來美化登陸和注冊的頁面。 以下是一個基本的登陸/注冊頁面的CSS模板:

/* 登陸/注冊頁面CSS */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Microsoft YaHei',sans-serif;
}
body{
background-color: #eee;
}
.container{
max-width: 400px;
margin: 30px auto;
background-color: #fff;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.form-btn{
display: flex;
justify-content: space-between;
padding: 20px 30px;
}
.form-btn button{
padding: 10px;
outline: none;
border: none;
cursor: pointer;
background-color: #fff;
color: #333;
border-radius: 5px;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
.form-btn button:hover{
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.form-btn .active{
background-color: #333;
color: #fff;
}
.form-inner{
padding: 30px;
}
.form-group{
margin-bottom: 20px;
}
.form-group .form-label{
display: block;
margin-bottom: 5px;
font-size: 14px;
font-weight: 700;
color: #333;
}
.form-group input[type=text],.form-group input[type=password]{
width: 100%;
padding: 10px;
outline: none;
font-size: 14px;
color: #333;
border: 1px solid #bbb;
border-radius: 5px;
box-shadow: none;
}
.form-group input[type=text]:focus,.form-group input[type=password]:focus{
border-color: #333;
}
.form-group .error-message{
display: none;
margin-top: 5px;
font-size: 12px;
color: #f00;
}
.form-group.error .error-message{
display: block;
}
.form-group.error input[type=text],.form-group.error input[type=password]{
border-color: #f00;
}
.form-group.success input[type=text],.form-group.success input[type=password]{
border-color: #0f0;
}
.form-submit{
text-align: center;
margin-top: 30px;
}
.form-submit button{
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
outline: none;
cursor: pointer;
font-size: 16px;
font-weight: 700;
border-radius: 5px;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
.form-submit button:hover{
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

上面的代碼樣式包含了登陸/注冊頁面需要的基本樣式,包括頁面布局、主色調、輸入框、按鈕等??梢愿鶕枰M行個性化調整,美化成自己喜歡的樣子。

現在您可以使用這個CSS模板來美化您的登陸/注冊頁面啦!祝您使用愉快!