使用HTML5和CSS制作抖音动态首页

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

  1. 可以在谷歌、IE浏览器中显示动态视频播放,在火狐浏览器视频播放不显示
  2. 抖音首页地址: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;举报邮箱:[email protected]
			 </p>
			 <p>
				 <img src="img/gongan.png"/>京公安网安备&nbsp;&nbsp;11010802023605号
			 </p>
		 </div>	
	</body>
</html>

4.效果图截图(截个静态的)

5.素材和代码压缩包我会上传到我的资源
https://download.csdn.net/download/t_999888/12006830

你可能感兴趣的:(前端网站,HTML5,css,网页)