QQ飞车官方首页（部分）制作

涉及到的知识点

text-indent

注意：只能用于block，table cells和inline-block

text-indent: -9999px;
//首行缩进到-9999px，隐藏文字

background：url()与 img标签的选择

img标签是引用外部资源，会占用一个http会话
url的体积比图片大，如果图片太大，对体积也有限制就不时候使用Data URL
img src="Data URL" 不会缓存图片
img标签先加载，css 后加载，所以重要的用 html img ,比如 logo

background-position

设置背景图像的起始位置
为什么是负值？
- 加载前，图片的坐标和div的坐标都在矩形框的左上角，加载后，两者重叠在一起。
- position的值是以div坐标为原点，图片的坐标。可以理解为图片往左上方移动了该数值，而正方向为右、下方向，所以为负值。
- https://blog.csdn.net/ClerverCC/article/details/53997435
  可以参考链接的图片，不过他是说移动div，我觉得移动图片的理解更合适。

P标签动画

#banner .banner_download p {
	width: 90px;
	height: 24px;
	display: block;
	background: url(./img/down_user_spr.png) no-repeat;
	margin: 0 auto;
	text-indent: -9999px;
	overflow: hidden;
}
#banner .banner_download p:first-child { 
	background-position: -254px 0;
	margin-top: 44px;
}
#banner .banner_download p:last-child { background-position: -254px -24px;}

/* CSS3简单动画 */
#banner .banner_download:hover p:first-child { animation: 1s upMove;}
@keyframes upMove {
	0% { transform: translateY(-10px); opacity: 0;}
	100% { transform: translateY(0); opacity: 1;}
}
#banner .banner_download:hover p:last-child { animation: 1s downMove;}
@keyframes downMove {
	0% { transform: translateY(10px); opacity: 0;}
	100% { transform: translateY(0); opacity: 1;}
}
/* CSS3简单动画 */

ul做图片及小圈的轮转

<ul class="banner_list_ul">
	<li>
		<a href="#">
			<img src="https://ossweb-img.qq.com/upload/adw/image/20200909/86ddfd597bb72eba528cbda02a91b8fa.jpeg" alt="">
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://ossweb-img.qq.com/upload/adw/image/20200918/ccd7a82c3d1bd6250a33647205913ac5.png" alt="">
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://ossweb-img.qq.com/upload/adw/image/20200918/086c411750f9962325b116579b5a2db0.jpeg" alt="">
		</a>
	</li>
</ul>


<ul class="banner_bottomline_ul">
	<li class="active"></li>
	<li></li>
	<li></li>
</ul>