网站介绍
这是一个响应式设计的应用，主要功能是展示一个图片轮播的效果。它包含一个全屏的横幅(.banner),以及一个包含图片列表的盒子(.box)。每个图片都位于其自身的容器中，并且在屏幕底部有一个小圆点区域(.disc)用于显示当前图片的信息。
以下是代码的主要组成部分：
.banner是整个网站的主体部分，宽度为100%,并且会自动水平居中显示在页面上。当屏幕宽度小于640px时，它的宽度将变为100%。.box是包含图片列表的框，宽度为500%。这意味着当屏幕宽度大于500px时，每个图片将占据20%的宽度；当屏幕宽度小于或等于500px时，每个图片将占据100%的宽度。.box li标签定义了图片列表中的每一项。float: left;使得每张图片都能并排显示。.box li img标签则定义了每张图片的大小和显示方式。它的宽度被设定为100%,表示图片将完全覆盖其父元素(.box)。.disc是一个位于每张图片正下方的小圆点区域。它的位置通过绝对定位(position: absolute;)实现。当屏幕宽度小于640px时，它的左外边距会被设置为负值，从而将其向左移动。.disc li是圆点区域中的每一项，它们的大小、颜色和位置都进行了详细的设定。当屏幕宽度小于或等于640px时，它们的总宽度将减少，以适应更窄的屏幕。@media(max-width:640px){...}是媒体查询语句，它的作用是在屏幕宽度小于或等于640px时应用特定的样式。在这个例子中，我们将.banner的宽度设为100%,.disc的左外边距设为负值，使其向左移动。
