一號(hào)店是中國(guó)一家知名的電商平臺(tái)，它的網(wǎng)站布局精美，細(xì)節(jié)處處理得也非常優(yōu)秀。其中，CSS的使用功不可沒(méi)。

下面是一號(hào)店網(wǎng)站部分CSS制作代碼，讓我們來(lái)一起欣賞、學(xué)習(xí)。

/*首頁(yè)頭部廣告圖*/
.header-ad-content{
position:absolute;
top:56px;
left:620px;
z-index:10
}

這段代碼定義了一號(hào)店網(wǎng)站頂部廣告圖的CSS樣式，將這個(gè)廣告圖的位置設(shè)置在絕對(duì)定位，top和left設(shè)置了它距離網(wǎng)頁(yè)頂部和左側(cè)的距離，z-index讓它處于層級(jí)最上層。

/*首頁(yè)大輪播圖*/
.slides .slides-pagination {
position: absolute;
bottom: 20px;
right: 20px;
text-align: right;
z-index: 1;
padding-top: 20px;
width: 320px;
}

這段代碼定義了一號(hào)店網(wǎng)站首頁(yè)大輪播圖的CSS樣式。這個(gè)輪播圖的分頁(yè)控制位于輪播圖底部右側(cè)，利用了absolute定位，bottom和right設(shè)置了它距離底部和右側(cè)的距離，padding-top以及width則是對(duì)分頁(yè)控制的修飾。

/*商品詳情頁(yè)圖片展示*/
#spec-n1{
position:relative;
float:left;
width:430px;
height:430px;
border:1px solid #ccc;
overflow:hidden;
margin-right:30px;
background:#fff;
}

這段代碼定義了一號(hào)店網(wǎng)站商品詳情頁(yè)面的圖片展示區(qū)域的CSS樣式。這個(gè)區(qū)域利用了relative定位，width和height設(shè)置了它的尺寸，border設(shè)置了它的邊框，overflow設(shè)置了溢出內(nèi)容的處理方式，margin-right設(shè)置了它距離左側(cè)商品主要信息的距離，background為白色。

以上就是一號(hào)店網(wǎng)站部分CSS制作代碼的介紹，希望對(duì)大家學(xué)習(xí)CSS有所啟示。