视频做背景

<!doctype html><!--声明当前文档为html文档-->
<html lang="en"><!--语言为英语-->
	<head><!--头部-->
		<meta charset="UTF-8"><!--字符编码:utf-8国际编码  gb2312中文编码-->
		<meta name="Keywords" content="关键词">
		<meta name="Description" content="描述">
		<title>Document</title>
		<style>/*css样式表的衣柜*/
			html,body,video,ul,li,div{
				margin:0px;
				padding:0px;
			}
			/*让视频沾满整个屏幕*/
			#bgvid { 
				position:fixed; 
				right:0; 
				bottom:0;
				min-width:100%;
				min-height:100%;
				width:auto; height:auto; 
				z-index:-100;
			}
			li{
				list-style:none;
			}
			#header{
				width:600px;
				height:50px;
			}
			#header ul li{
				background:rgba(100,100,100,0.5);
				width:100px;
				height:30px;
				color:#f60;
				font-weight:bold;
				font-size:20px;
				line-height:30px;
				float:left;
				text-align:center;
				margin-left:5px;
				cursor:pointer;
			}
			#main{
				width:100%;
				height:1500px;
				border:2px solid red;
				box-sizing:border-box;
			}
		</style>
	</head>

	<body><!--身体-->
		<video autoplay loop  id="bgvid">
			  <source src="sp2.webm" type="video/webm">
			  <source src="sp2.mp4" type="video/mp4">
		</video>
		<div id="header"> 
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
		</div>
		<div id="main"></div>
		<script>

		</script>
	</body>
</html>

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chuipaopao163/article/details/52353565
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭