京東商城是中國(guó)最大的電商企業(yè)之一，它的網(wǎng)站設(shè)計(jì)非常精美，對(duì)于用戶(hù)的體驗(yàn)也非常注重。其中，登錄頁(yè)面就是京東商城網(wǎng)站重要的一部分。下面我們來(lái)介紹一下京東商城的登錄頁(yè)面的CSS設(shè)計(jì)。

.login{
width: 400px;
margin: 30px auto;
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
background-color: #f5f5f5;
}
.login h2{
font-size: 20px;
text-align: center;
margin-bottom: 20px;
}
.input-box{
display: flex;
flex-direction: column;
margin-bottom: 15px;
}
.input-box label{
font-size: 16px;
margin-bottom: 10px;
}
.input-box input{
height: 40px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 0 10px;
font-size: 16px;
}
.login-btn{
height: 40px;
border: none;
border-radius: 5px;
background-color: #b82c2c;
color: #fff;
font-size: 16px;
cursor: pointer;
margin-top: 15px;
}
.login-btn:hover{
background-color: #971f1f;
}

在這個(gè)CSS代碼中，我們首先定義了登錄頁(yè)面的容器.login，它有400px的寬度，位于頁(yè)面中間，有1px的灰色邊框，內(nèi)部有20px的內(nèi)邊距、5px的圓角和淺灰色的背景色。

接下來(lái)，我們定義了一個(gè)標(biāo)題h2，設(shè)置了20px的字體大小，居中對(duì)齊，并設(shè)置了20px的下邊距。我們使用了flex布局，來(lái)使登錄框中的輸入框和標(biāo)簽縱向排列。每個(gè)輸入框的標(biāo)簽字體大小16px，下邊距為10px，每個(gè)輸入框高度為40px，有1px的灰色邊框和5px的圓角，同時(shí)有10px的內(nèi)邊距。登錄按鈕高度40px，無(wú)邊框、有5px的圓角，背景色為深紅色，字體顏色為白色，光標(biāo)變?yōu)槭中停髽?biāo)懸停時(shí)背景色變?yōu)榧t色。

總體而言，這個(gè)CSS樣式簡(jiǎn)潔、美觀，兼顧了用戶(hù)體驗(yàn)和品牌風(fēng)格。