实训记录

最新推荐文章于 2019-11-17 20:41:54 发布

suxiaobai1229

最新推荐文章于 2019-11-17 20:41:54 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/suxiaobai1229/article/details/102994460

版权

实训记录

- 第一次实训

第一次实训

第一次实训是做一个吃鸡官宣页面的仿制。

代码如下：  <!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<meta name="viewport" content="width=device-width"/> 		<title></title> 		<link rel="stylesheet" type="text/css" href="/cndeom/css/mui.min.css"/> 		<link rel="stylesheet" type="text/css" href="css/base.css"/> 		<style type="text/css"> 			.warp_panel{
				height:100%;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			    background-image: url(11.jpg); 			} 			.longin_panel{
				height: 400px;
				width: 500px;
				background-color: rgba(43,47,51,0.61);
				display: flex;
				flex-flow: column;
				justify-content: center;
				align-items: center; 			} 			.longin_panel>div{
				height: 38px;
				width: 380px;
				background-color: #ffffff;
				margin-bottom: 10px; 			} 			.longin_panel>div:nth-of-type(1){
				border-radius: 19px; 			} 			.longin_panel>div:nth-of-type(2){
				border-radius: 19px; 			} 			.longin_panel>div:nth-of-type(3){
				border-radius: 19px;
				width: 160px; 			} 			.longin_panel>div>input,button{
				height: 100%;
				width: 100%;
				border: none;
				border-radius: 19px;
				outline: none; 			} 			.warp_panel>video{
				display:none; 			} 			@media screen and (max-width:500px) {
				.warp_panel>video{
					display: block;
					position: absolute;
					height: 100%;
					width: 100%;
					object-fit:fill;
					z-index: -1;
				}
				.longin_panel{
					background-color: initial;
				}
				.longin_panel{
					background-color:(rgba(52,23,33,0.68)) ;
				}
				.warp_panel>video{
					object-fit: cover;
				}
				
				
				.warp_panel{
					background-image: initial;
				}	 			}
			 </style> <script type="text/javascript">	 		</script> 	</head> 	<body> 		<div class="warp_panel"> 			<div class="longin_panel">
				<div class="">
					<input type="text" name="" id="" value="" placeholder="请输入用户名" onfocus="voice.playvoice('请输入用户名')"/>
				</div>
				<div class="">
					<input type="password" name="" id="" value="" placeholder="请输入密码"/>
				</div>
				<div class="">
					<button type="button">登录<tton>
				</div> 			</div> 			<video src="media/video_0822.mp4" autoplay="autoplay" loop="loop"><ideo> 		</div> 	</body> <html>

效果图：
在这里插入图片描述

suxiaobai1229

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实训记录

实训记录第一次实训第一次实训第一次实训是做一个吃鸡官宣页面的仿制。代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"/> <title>&...
复制链接

扫一扫