.marquee {
	width: 500px;
	margin: 0 auto;
	background: lightyellow;
	white-space: nowrap;
	overflow: hidden;
	box-sizing: border-box;
	color: blue;
	font-size: 18px;
}

.marquee span {
	display: inline-block;
	padding-left: 100%;
	text-indent: 0;
	animation: marquee 15s linear infinite;
}

.marquee span:hover {
	animation-play-state: paused
}

@keyframes marquee {
	0% {
		transform: translate(-50%, 0);
	}

	100% {
		transform: translate(-50%, 0);
	}
}

.wrapper {
	margin-top: 20px;
	text-align: center;
}

.wrapper ul {
	display: inline-block;
	margin: 0;
	padding: 0;
	/* For IE, the outcast */
	zoom: 1;
	/* *display: inline; */
}

.wrapper li {
	text-align: left;
	/* float: left; */
	padding: 2px 5px;
	/* border: 1px solid black; */
}

h1 {
	text-align: center;
}

body {
	background-color: lightgray;
}

/*  下面的是为手机适配用的   */
/* 媒体查询（Media Queries）:
	媒体查询是在CSS中用来应用不同样式规则到不同屏幕尺寸和分辨率的技术。
	你可以针对不同的屏幕宽度设置不同的样式
	这段代码的意思是，当屏幕宽度小于或等于600像素时，页面的背景色变为浅蓝色。 */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
/* 通过设置图片和其他媒体内容的最大宽度为100%，确保它们不会超过其容器的宽度，
	这样可以避免在小屏幕设备上出现横向滚动条。*/
img, video {
  max-width: 100%;
  height: auto;
}