天貓是國(guó)內(nèi)最大的電商平臺(tái)之一，它的界面設(shè)計(jì)和優(yōu)化一直以來(lái)都備受關(guān)注。在網(wǎng)頁(yè)設(shè)計(jì)方面，CSS是不可或缺的一部分。下面我們就來(lái)看看天貓是如何設(shè)置CSS的。

/* 以下是天貓首頁(yè)中頭部導(dǎo)航欄的CSS樣式 */
.nav-bd{
width: 100%;
height: 35px;
background-color: #FFF;
position: fixed;
top: 0;
z-index: 9999;
border-bottom: 1px solid #f0f0f0;
font-family: "Microsoft YaHei", "微軟雅黑", Tahoma, Arial,Helvetica, sans-serif;
font-size: 14px;
}
.nav-bd ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.nav-bd ul li {
float: left;
margin: 0;
}
.nav-bd ul li a {
display: block;
padding: 0 20px;
line-height: 35px;
text-decoration: none;
color: #666;
cursor: pointer;
}
.nav-bd ul li:hover a {
color: #C40000;
}
/* 以下是首頁(yè)中商品分類欄的CSS樣式 */
.cat{
width:100%;
height:43px;
border-bottom: 1px solid #f0f0f0;
}
.cat-1140{
overflow:hidden;
margin:0 auto;
width:1140px;
}
.cat-content{
height:42px;
line-height:42px;
font-size:0;
}
.cat-item{
display:inline-block; 
vertical-align:top;
margin-left:15px;
font-size: 14px;
font-family: "Microsoft YaHei", "微軟雅黑", Tahoma, Arial,Helvetica, sans-serif;
position:relative;
}
.cat-item:hover .cat-item-children{
display:block;
}
.cat-item-children{
display:none;
position:absolute;
top:42px;
left:-1px;
width:100%;
}
.cat-item-children ul{
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.cat-item-children ul li{
float: left;
margin: 0;
}
.cat-item-children ul li a{
display:block;
padding:5px 8px;
text-decoration:none;
color:#666;
font-size: 12px;
font-family: "Microsoft YaHei", "微軟雅黑", Tahoma, Arial,Helvetica, sans-serif;
}

以上是天貓首頁(yè)中主要部分的CSS樣式，包括了頭部導(dǎo)航欄和商品分類欄。通過(guò)CSS提供的樣式控制，天貓的首頁(yè)看起來(lái)更加美觀，用戶體驗(yàn)也更加舒適。