请编写一个外部样式表文件图书介绍网站
时间: 2024-05-01 07:19:31 浏览: 15
好的,以下是一个简单的外部样式表文件,可以用于一个图书介绍网站:
```
/* 通用样式 */
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #f5f5f5;
color: #333;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
h1, h2, h3 {
font-weight: normal;
}
a {
color: #0080ff;
}
a:hover {
text-decoration: underline;
}
/* 样式表格 */
.book-preview {
margin-bottom: 20px;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.book-preview h2 {
margin-top: 0;
margin-bottom: 5px;
font-size: 24px;
}
.book-preview img {
float: left;
margin-right: 20px;
}
.book-preview p {
margin-bottom: 10px;
font-size: 16px;
}
.book-preview .button {
display: inline-block;
padding: 10px 20px;
background-color: #0080ff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 18px;
cursor: pointer;
}
.book-preview .button:hover {
background-color: #0066cc;
}
/* 响应式设计 */
@media only screen and (max-width: 768px) {
.container {
padding: 10px;
}
.book-preview img {
float: none;
margin-right: 0;
margin-bottom: 20px;
}
}
```
这个样式表定义了一些通用样式,例如 whole 页面的背景颜色、字体、链接等等,在这里没有太多的特别之处。
主要样式是针对图书预览的书目书评。每个书目的书评都被包装在一个具有特蓝色背景和阴影的框中,并有一个标题、一张书的图片、一些文本描述和一个按钮“查看详细信息”(Learn More)。此预览将在页面上如此排列,以便在具有最小宽度860像素的屏幕上和大屏幕上呈现良好的响应式设计。
当屏幕宽度小于或等于768像素时,布局将更改,图片将变为下面,以便在小屏幕上查看得更好。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/octet-stream](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)