CSS3可以為我們的網(wǎng)站提供豐富的樣式效果，為用戶帶來良好的視覺體驗。今天我們來介紹一款基于CSS3的淘寶模板。

首先，我們需要在HTML文件的頭部引入CSS文件：

<link rel="stylesheet" type="text/css" href="taobao.css">

接下來，我們來看看CSS文件里都包含哪些樣式：

/* 清除默認樣式 */
* {
margin: 0;
padding: 0;
list-style: none;
}
/* 設(shè)定整體布局 */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
/* 設(shè)定頂部導(dǎo)航欄樣式 */
#nav {
width: 100%;
height: 50px;
background-color: #ff5400;
}
#nav li {
display: inline-block;
margin: 0 20px;
}
#nav a {
display: block;
text-align: center;
height: 50px;
line-height: 50px;
color: #fff;
text-decoration: none;
}
/* 設(shè)定商品展示區(qū)域樣式 */
.item {
width: 200px;
margin: 30px 20px;
background-color: #fff;
box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
}
.item img {
width: 100%;
}
.item h3 {
padding: 10px;
font-size: 16px;
color: #333;
}
.item .price {
padding: 10px;
color: #ff5400;
font-size: 18px;
}
.item .btn {
display: block;
margin: 10px;
padding: 10px 20px;
background-color: #ff5400;
color: #fff;
text-align: center;
text-decoration: none;
}

以上樣式包含了整個淘寶模板所需的清除默認樣式、導(dǎo)航欄、商品展示區(qū)域等樣式。我們只需要在HTML中按照CSS所設(shè)定的ID和ClassName來設(shè)置相應(yīng)的內(nèi)容，就能得到一個完整的淘寶網(wǎng)站。