轮播图
重要性:4
图像带可以用 ul/li
列表表示,其中包含图像 <img>
。
通常,这样的带很宽,但我们围绕它放置一个固定大小的 <div>
来“剪切”它,以便只有一部分带可见。
为了使列表水平显示,我们需要为 <li>
应用正确的 CSS 属性,例如 display: inline-block
。
对于 <img>
,我们也应该调整 display
,因为默认情况下它是 inline
。在 inline
元素下保留了额外的空间用于“字母尾部”,因此我们可以使用 display:block
来删除它。
为了实现滚动效果,我们可以移动<ul>
。有很多方法可以做到,例如改变margin-left
或(性能更好)使用transform: translateX()
外部<div>
具有固定宽度,因此“多余”的图像会被裁剪。
整个轮播图是页面上一个独立的“图形组件”,因此最好将其包裹在一个单独的<div class="carousel">
中,并在其中进行样式设置。