用CSS做書城可以讓網(wǎng)站更加美觀和易于導(dǎo)航。以下是幾個可以實現(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; } /* 添加頁腳 */ footer { background-color: #333333; color: white; padding: 20px; }
使用以上樣式可以實現(xiàn)一個簡單的書城頁面。在網(wǎng)站結(jié)構(gòu)和后臺數(shù)據(jù)移植完畢后,可以進(jìn)一步優(yōu)化樣式,例如添加鼠標(biāo)懸停效果、實現(xiàn)分頁等功能。