售书网站 CSS 模板设计需要考虑到书籍排版和页面布局,以下是一个基本的 CSS 模板设计,可以根据实际情况进行修改和定制。
```
/* 页面头部 */
.page-header {
margin: 20px auto;
padding: 20px;
background-color: #fff;
color: #333;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
/* 导航栏 */
.nav {
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
/* 菜单栏 */
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
margin-right: 10px;
}
.nav li a {
color: #333;
text-decoration: none;
}
.nav li a:hover {
color: #fff;
background-color: #e8e8e8;
}
/* 页眉页脚 */
.page-header .page-link {
color: #333;
text-decoration: none;
font-size: 16px;
margin-bottom: 20px;
}
/* 页码 */
.page-header .page-number {
font-size: 14px;
margin-bottom: 20px;
}
/* 书籍列表 */
.book-list {
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
/* 书籍详情页 */
.book-list .book {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
.book .title {
font-size: 24px;
margin-bottom: 20px;
}
.book .description {
font-size: 16px;
margin-bottom: 20px;
}
.book .price {
font-size: 16px;
margin-bottom: 20px;
}
.book .author {
font-size: 16px;
margin-bottom: 20px;
}
/* 书籍列表头部 */
.book-list .header {
background-color: #333;
color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
/* 书籍详情页头部 */
.book-list .header .title {
color: #333;
text-decoration: none;
font-size: 24px;
}
/* 书籍详情页头部 */
.book-list .header .description {
font-size: 16px;
margin-bottom: 20px;
}
/* 书籍详情页主体 */
.book-list .header .price {
font-size: 16px;
margin-bottom: 20px;
}
.book-list .header .author {
font-size: 16px;
margin-bottom: 20px;
}
```
这个 CSS 模板设计可以用于创建各种类型的售书网站,包括书籍推荐、书籍分类、书籍价格、书籍作者等等。可以根据需要进行修改和定制。