5、网页样式优化与设计指南

网页样式优化与设计指南

1. 选择器的使用

在进行网页样式设计时，建议优先使用类选择器。类选择器具有诸多优点，它可以使用描述性强的类名，使代码更易于开发和维护。同时，还能为一个元素添加多个类名，为样式设计提供了更大的灵活性和强大的功能。在继续后续操作之前，务必保存 index.html 文件。

2. 让图片适应窗口

按照原子样式模式，接下来要对图片进行样式设计。当前图片尺寸过大，除非浏览器窗口足够大，否则图片会被截断。为了让缩略图适应窗口，可以在 styles.css 中为 .thumbnail-image 添加样式规则：

a {
  text-decoration: none;
}
.thumbnail-image {
  width: 100%;
}
.thumbnail-title {
  ...
}

将宽度设置为 100% 后，图片会被限制在其容器的宽度范围内。这意味着当你扩大浏览器窗口时，图片会按比例变大。保存 styles.css 文件，切换到浏览器，调整窗口大小，你会发现图片会随着窗口的大小变化而伸缩，并且始终保持其比例。

仔细观察会发现， .thumbnail-title 周围的间距存在问题，标题看起来像是与下方的图片相关联。为了解决这个问题，可以在 styles.css 中将 .thumbnail-image 的 di