用CSS做書(shū)城可以讓網(wǎng)站更加美觀和易于導(dǎo)航。以下是幾個(gè)可以實(shí)現(xiàn)的功能。

/* 添加header */
header {
background-color: #333333;
color: white;
padding: 20px;
}
/* 添加導(dǎo)航 */
nav {
background-color: #dddddd;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav a {
display: block;
color: #333333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 添加內(nèi)容區(qū)域 */
.container {
margin: 0 auto;
max-width: 1200px;
}
.book {
width: 200px;
height: 300px;
margin: 10px;
float: left;
background-color: #eeeeee;
padding: 10px;
}
.book img {
width: 100%;
}
.book h3 {
margin-top: 0;
}
.book p {
text-align: justify;
}
/* 添加頁(yè)腳 */
footer {
background-color: #333333;
color: white;
padding: 20px;
}

使用以上樣式可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的書(shū)城頁(yè)面。在網(wǎng)站結(jié)構(gòu)和后臺(tái)數(shù)據(jù)移植完畢后，可以進(jìn)一步優(yōu)化樣式，例如添加鼠標(biāo)懸停效果、實(shí)現(xiàn)分頁(yè)等功能。