使用HTML5和CSS制作抖音动态首页_仿抖音全屏视频背景html-CSDN博客

本文链接：https://blog.csdn.net/t_999888/article/details/103322616

使用HTML5和css3制作一个抖音动态首页

可以在谷歌、IE浏览器中显示动态视频播放，在火狐浏览器视频播放不显示
抖音首页地址：https://www.douyin.com/
3.代码如下：

<!DOCTYPE html><!--声明-->
<html>
	<head>
		<meta charset="utf-8">
		<title>抖音首页</title>
		<style>
			*{
			   margin: 0px;
			   padding: 0px;
			   list-style: none;
			   color: white;
			   text-decoration: none;
			}
			.hearder{
				width: 100%;
				height: 120px;
				/* background-color: red; */
				position: relative;
			}
			.hearder img{
				position: absolute;
				left: 100px;
				top: 30px;
			}
			.hearder ul{
				position: absolute;
				right: 200px;
				top: 50px;
			}
			.hearder ul li{
				float: left;
				margin-left:20px;
			}
			.hearder ul li:last-child{ /*li的最后一个*/
				background-image: url(img/yinliang.png);
				width: 18px;
				height: 18px;
				background-size: cover;/*背景图像的大小适应li的大小*/
			}
			.middle{
				width: 100%;
				height: 500px;
				/* background-color: yellow; */
				position: relative;
			}
			.middle .img_1{
				position: absolute;/*绝对定位 子绝父相*/
				right: 160px;
				top: 100px;
			}
			.middle .img_2{
				background-image:url(img/appstore.png);
				width: 130px;
				height: 50px;
				position: absolute;
				top: 230px;
				right: 340px;
				border-radius: 5px;/*圆角*/
			}
			.middle .img_3{
				background-image:url(img/android.png);
				width: 150px;
				height: 50px;
				position: absolute;
				top: 230px;
				right: 170px;
				border-radius: 5px;/*圆角*/
			}
			.middle .img_4{
				background-image:url(img/erweima.png);
				width: 50px;
				height: 50px;
				position: absolute;
				top: 230px;
				right: 100px;
				border-radius: 5px;/*圆角*/
				background-size: cover;
			}
			.footer{
				width: 100%;
				height: 120px;
			/* 	background-color: blue; */
				text-align: center;/*文字居中对齐*/
			}
			.footer p{
				font-size: 14px;
				margin:8px 0px;
			}
			video{
				position: absolute;
				z-index: -99;/*层级*/
			}
		</style>
	</head>
	<body>
          <!--
		  1.分析网页布局
		  2.添加元素
		  3.为元素添加样式
		    3.1显示样式
			3.2位置样式
           -->
		 <video width="100%"src="img/douyin.mp4" autoplay="autoplay" loop="loop">
			 当前浏览器不支持 video直接播放，点击这里下载视频：<a href="myvideo">下载视频</a>
		 </video>
		 <div class="hearder">
			 <img src="img/logo.png" />
			 <ul>
				 <li><a href="#">抖音音乐人</a></li>
				 <li><a href="#">抖音音乐人</a></li>
				 <li><a href="#">抖音音乐人</a></li>
				 <li><a href="#"></a></li>
			 </ul>
		 </div>
		 <div class="middle">
			 <img src="img/wenben.png"  class="img_1"/>
			 <a href="#" class="img_2"></a>
			 <a href="#" class="img_3"></a> 
			 <a href="#" class="img_4"></a>
		 </div>
		 <div class="footer">
			 <p>|&nbsp;&nbsp;音乐&nbsp;&nbsp;|&nbsp;&nbsp;用户服务协议&nbsp;&nbsp;|&nbsp;&nbsp;隐私政策&nbsp;&nbsp;|&nbsp;&nbsp;帐号找回&nbsp;&nbsp;|&nbsp;&nbsp;联系我们&nbsp;&nbsp;|
			 </p>
			 <p>
				 2018©抖音&nbsp;&nbsp;|&nbsp;&nbsp;京ICP16016397号-3&nbsp;&nbsp;|&nbsp;&nbsp;北京微播视界科技有限公司&nbsp;&nbsp;|&nbsp;&nbsp;地址：北京市海淀区知春路51号4层408
			 </p>
			 <p>
				 中国互联网举报中心&nbsp;&nbsp;|&nbsp;&nbsp;网络文化许可证-京网文-（2016）2282-264号&nbsp;&nbsp;|&nbsp;&nbsp;违法和不良信息举报：010-83434212&nbsp;&nbsp;|&nbsp;&nbsp;举报邮箱：jubao@douyin.com
			 </p>
			 <p>
				 <img src="img/gongan.png"/>京公安网安备&nbsp;&nbsp;11010802023605号
			 </p>
		 </div>	
	</body>
</html>