2021-10-31

最新推荐文章于 2023-07-30 01:08:05 发布
最新推荐文章于 2023-07-30 01:08:05 发布
阅读量1.6k 收藏 19
点赞数 5
文章标签： web css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyuxinx/article/details/121063970
版权

WEB明星网页（王俊凯）

注册

在这里插入图片描述

<!doctype html>

<html>
<head>
	<meta charset="utf-8">
	<title>注册</title>
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/footer.css">
	<link rel="stylesheet" href="css/reg.css">
	<link rel="stylesheet" href="css/top.css">
</head>

<body>
	<div class="wrapper">
		<div class="frame">
			<div class="title"><a href="denglu.html">登录小螃蟹 ID</a></div>
			<div class="formframe">
				<form id="reg">
					<div class="row">
						<label class="label">用户名</label>
						<input class="input inputbox" name="username" type="text" autocomplete="off" required maxlength="12" placeholder="请设置4-12位用户名">
					</div>
				  	<div class="row">
						<label class="label">密码</label>
						<input class="input inputbox" id="password" name="password" type="password" autocomplete="new-password" required maxlength="18" placeholder="请设置6-18位密码">
					</div>
					<div class="row">
						<label class="label">确认密码</label>
						<input class="input inputbox" id="password2" name="password2" type="password" autocomplete="new-password" required maxlength="18" placeholder="请确认密码" onBlur="javascript:pass()">
						<div id="pwwrong">两次输入的密码不相同！</div>
					</div>
					<div class="row">
						<label class="label">邮箱</label>
						<input class="input inputbox" name="email" type="email" autocomplete="new-password" required checked placeholder="请输入邮箱地址">           
					</div>
					<div style="width: 100px; margin: 10px auto;">
						<a href="denglu.html"><input class="submit" id="submit" value="提交"></a>
					</div>
				</form>
			</div>
		</div>	
	</div>
</body>
</html>

登录

在这里插入图片描述

<!doctype html>

<html>
<head>
	<meta charset="utf-8">
	<title>登录</title>
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/footer.css">
	<link rel="stylesheet" href="css/reg.css">
	<link rel="stylesheet" href="css/top.css">
</head>

<body>
	<div class="wrapper">
		<div class="frame">
			<div class="title"><a href="zhuce.html">注册螃蟹 ID</a></div>
			<div class="formframe">
				<form id="reg">
					<div class="row">
						<label class="label">用户名</label>
						<input class="input inputbox" name="username" type="text" autocomplete="off" required maxlength="12" placeholder="请输入用户名">
					</div>
				  	<div class="row">
						<label class="label">密码</label>
						<input class="input inputbox" id="password" name="password" type="password" autocomplete="new-password" required maxlength="18" placeholder="请输入密码">
					</div>
					<div style="width: 100px; margin: 10px auto;">
						<a href="shouye.html"><input class="submit" id="submit" value="提交"></a>
					</div>
				</form>
			</div>
		</div>	
	</div>
</body>
</html>

首页1

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>首页</title>
	<link rel="stylesheet" type="text/css" href="shouye.css">


</head>
<body>
<div class="bjimg">

    <div class="bb">
    	<a href="shouye1.html"> <span>欢</span><span>迎</span><span>来</span><span>到</span><span>王俊凯</span><span>的</span><span>明</span><span>星</span><span>空</span><span>间</span></a>
    	
    </div>
    <div class="circle">

    	<img src="karryimage/ooo.gif" width="100px" height="100px" >
    	 <audio id="music" src="karryimage\music001.mp3" controls="controls" autoplay="autoplay"  >	</audio>
    	
    </div>
</div>


</body>
</html>

body {
	font-family:华文行楷;
	font-size:12px; 		
	padding:0px; 			
	margin:5px; 			
	/*width: 1000px;*/
	/*background-image: url(karryimage/wjk100.jpg)  ;*/
	/*background-color: gary;*/
	
	
	text-align: center;


}
a{
	text-decoration:none; 		
}
img{
	border:none;
	padding-left:90px;			
}
span{
				position: relative;
				text-align: center;
				color: #AFCDFF;
				font-size: 80px;
				animation: letter 1s cubic-bezier(0.1,0.5,0.2,1) infinite alternate;
                top: 0px;
				
			}
			span:nth-child(1){
				animation-delay: 0s;
			}
			span:nth-child(2){
				animation-delay: 0.1s;
			}
			span:nth-child(3){
				animation-delay: 0.2s;
			}
			span:nth-child(4){
				animation-delay: 0.3s;
			}
			span:nth-child(5){
				animation-delay: 0.4s;
			}
			span:nth-child(6){
				animation-delay: 0.5s;
			}
			span:nth-child(7){
				animation-delay: 0.6s;
			}
			span:nth-child(8){
				animation-delay: 0.7s;
			}
			span:nth-child(9){
				animation-delay: 0.8s;
			}
			span:nth-child(10){
				animation-delay: 0.9s;
			}
			
			@keyframes letter{
				from{
					top: 0px;
					text-shadow: blanchedalmond 0 0 0.05em;
				}
				to{
					top: 30px;
					text-shadow: blanchedalmond 0 1em 0.2em;
				}
			}
	.bjimg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      min-width: 1000px;
      z-index: -10;
      zoom: 1;
      background-color: #fff;
      background-image: url(karryimage/E0B4D1D3B2B359CA4831863C66A6E9E0.jpg) ;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-position: center 0;
    }



.bb{
	width: 100%;
	height:120px;
	text-align: center;
	vertical-align:middle;

	margin-top: 250px;


}
.circle{
			width: 100px;
			height: 0px;
			float: left;
			margin: auto;
			border-radius: 50%;
			position: absolute;
			margin-top: 150px;
			

			animation-name: x;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
			animation-duration: 5s;
			animation-direction: alternate;
		}

		.circle:hover{
			animation-play-state: paused;
		}

		@keyframes x{
			0%{
				left:250px;
			}
			25%{
				left:437.5px;
				background-color: orange;
			}
			50%{
				left:625px;
				background-color: yellow;
			}
			75%{
				left:812.5px;
				background-color: lightgreen;
			}
			100%{
				left:1000px;
				background-color: teal;
			}
			/*85%{
				left:1250x;
				background-color: lightblue;
			}
			100%{
				left:1500px;
				background-color: purple;
			}*/
		}

首页2

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="shouye1.css">

	</head>
	<body>
		
		<!-- 导航栏部分 -->
		<div class="control">
			<div class="left">
				<div class="subNav">
					<div class="part0 part">
						<div class="right">
    	
    		
    	<span class="a2" style="background: url(karryimage/011.png);background-size: 100% 100%; height: 79;"><a href="zhuanji.html"><font size="+2" face="仿宋">专辑</font></a></span>
    		
    	<span class="a3" style="background: url(karryimage/010.png);background-size: 100% 100%; height: 79;"><a href="shipin.html"><font size="+2" face="仿宋">视频</font></a></span>
    	   
    	  <span class="a4" style="background: url(karryimage/011.png);background-size: 100% 100%; height: 79;"><a href="xiangguanrenwu.html"><font size="+2" face="仿宋">相关人物</font></a></span>
          <span class="a4" style="background: url(karryimage/010.png);background-size: 100% 100%; height: 79;"><a href="shouye.html"><font size="+2" face="仿宋">返回</font></a></span>
    	   <br>
    	   
   </div></a></div>
   					<div class="part1 part"><a href="#part1" style="text-decoration:none; color: rgba(50, 128, 102, 0.9);        font-family: '华文行楷'; ">代言视频</a></div>
					<div class="part2 part"><a href="#part2" style="text-decoration:none; color: rgba(50, 128, 102, 0.9);        font-family: '华文行楷'; ">简介</a></div>
					<div class="part3 part"><a href="#part3" style="text-decoration:none; color: rgba(50, 128, 102, 0.9);        font-family: '华文行楷'; ">热门图片</a></div>
					<div class="part4 part"><a href="#part4" style="text-decoration:none; color: rgba(50, 128, 102, 0.9);        font-family: '华文行楷'; "> 反馈信息</a></div>
				</div>
			</div>
			
			<!-- 正文部分 -->
			<div class="content">
				<a name="part1"></a>
				<div class="container1">
					<div class="text1 text">

						<div class="title1 title"><font size="40px" face="仿宋" color="orange">代言视频</font></div>
						<div id="video">
    <div id="mp4par">
        <video id="mp4" src="karryimage/999.mp4" autoplay="autoplay"></video>
        <div id="controls">
            <input type="range" id="btntime" value="0" max="100"><br>
            <span id="current_time" style='font-size: 12px;'>00:00:00</span>
            <button id="btnstart" >播放</button>
            <button id="btngo" >快进</button>
            <button id="btnback" >快退</button>
            <button id="btnmute" >静音</button>
            <input type="range" id="btnsound" value="10" max="100">
            <button id="btnbig">全屏</button>
            <span id="totaltime" style='font-size: 12px;'>00:00:00</span>
            <!-- <button><i class="iconfont">&#xe638;</i></button> -->
        </div>
    </div>
</div>
<script>
    var video = document.getElementById("mp4");
    var btnstart = document.getElementById("btnstart");
    var current_time=document.getElementById('current_time');
    var btntime = document.getElementById("btntime");
    var btngo = document.getElementById("btngo");
    var btnback = document.getElementById("btnback");
    var btnmute=document.getElementById("btnmute");
    var btnsound=document.getElementById("btnsound");
    var btnbig=document.getElementById("btnbig");
    var totaltime=document.getElementById('totaltime');
    //视频开始播放时执行
    video.onplaying = function () {
        //获取当前video的总时间
        var allTime = video.duration;
        var h=Math.floor(allTime/3600);
        var m=Math.floor(allTime%3600/60);
        var s=Math.floor(allTime%60);
        h=h>=10?h:'0'+h;
        m=m>=10?m:'0'+m;
        s=s>=10?s:'0'+s;
        totaltime.innerHTML=h+':'+m+':'+s;//allTime.toString();
    };
    //视频播放位置发生变化时开始执行
    video.ontimeupdate = function () {
        btntime.value =100*this.currentTime/this.duration;///this.totaltime;
        var time=this.currentTime;
        var h=Math.floor(time/3600);
        var m=Math.floor(time%3600/60);
        var s=Math.floor(time%60);
        h=h>=10?h:'0'+h;
        m=m>=10?m:'0'+m;
        s=s>=10?s:'0'+s;
        current_time.innerHTML=h+':'+m+':'+s;
    };
 
    //播放进度条的事件
    btntime.addEventListener("mousedown",function(){
        this.onmousemove=function(){
            video.currentTime=this.value*video.duration/100;
        }
        this.onmouseup=function(){
            this.onmousemove=null;
            this.onmouseup=null;
        }
    });
 
    //快进的点击事件
    btngo.addEventListener("click", function () {
        btnstart.innerHTML = "播放";
        video.pause();
        time = setInterval(function () {
            video.currentTime += 5;
        }, 1000);
    });
    //快退的点击事件
    btnback.addEventListener("click", function () {
        btnstart.innerHTML = "播放";
        video.pause();
        time = setInterval(function () {
            video.currentTime -= 2;
            if (video.currentTime <= 0) {
                video.play();
                clearInterval(time);
            }
        }, 1000);
    });
    //静音的点击事件
    btnmute.addEventListener("click",function(){
        video.muted=!video.muted;
    });
    //音量进度条的事件
    btnsound.addEventListener("mousedown",function(){
        this.onmousemove=function(){
            video.volume=this.value/100;
        }
        this.onmouseup=function(){
            this.onmousemove=null;
            this.onmouseup=null;
        }
    });
    //全屏的点击事件
    btnbig.addEventListener("click",function(){
        if (video.webkitRequestFullScreen) {
            video.webkitRequestFullScreen();
        }
        else if (video.mozRequestFullScreen) {
            video.mozRequestFullScreen();
        }
        else if (video.msRequestFullScreen) {
            video.msRequestFullScreen();
        }
        else if (video.RequestFullScreen) {
            video.RequestFullScreen();
        }
    });
    //播放的点击事件
    btnstart.addEventListener("click", function () {
        if (this.innerHTML == "播放") {
            video.play();
            this.innerHTML = "暂停";
        }
        else {
            video.pause();
            this.innerHTML = "播放";
        }
        clearInterval(time);
    })
</script>
					</div>
				</div>
				
				<a name="part2"></a>
				<div class="container2">
					<div class="text2 text">
						<div class="title2 title"><h1><size="40px" face="仿宋" color="orange" >王俊凯</font></h1></div>
						
			<p>中国内地男歌手、演员、TFBOYS队长</p><br>
            <form action="" method="post">
<!-- 搜索框 -->   <h1>相关搜索</h1>
<input type="text" id='txt' placeholder='请输入王俊凯相关热搜'>
</form>
<!-- 模糊查询结果显示框 -->
<div id="msg"></div>
 
<!-- 查询数据 -->
<div id="datas">
相关,💙#王俊凯电影断桥#💙,💙#BobbiBrown亚太区品牌代言人王俊凯#💙,💙#王俊凯超话维纳斯的诞生#💙
</div>  
<script type="text/javascript">  
    function handle(){  
        var data = datas.split(",");
        var word = document.getElementById('txt').value;
        var value = "";
        for(var i = 1;i < data.length;i++){
            if(word!="" && data[i].match(word+".*") != null){
                value += "<a οnclick=add('"+ data[i] +"') href='#'>" + data[i] + "</a><br/>";
            }
        }       
        document.getElementById('msg').innerHTML=value;
    } 
    function add(city){
        document.getElementById('txt').value=city;
    }
    //firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。   
    if(/msie/i.test(navigator.userAgent))    //ie浏览器   
        {document.getElementById('txt').onpropertychange=handle   
    } else{//非ie浏览器，比如Firefox   
    alert("💙#欢迎来到王俊凯的个人空间💙")
        document.getElementById('txt').addEventListener("input",handle,false);   
    }
    var datas = document.getElementById('datas').innerHTML;
 
</script>  
 
						<p>1999年9月21日生于中国重庆，中国内地男歌手、演员、TFBOYS队长。 

2010年底，被TF家族挖掘成为练习生。2012年2月，翻唱《囚鸟》被搜狐、优酷等网站首页推荐走进大众视野、9月，翻唱《我的歌声里》积累了人气。2013年8月6日，TF家族官方发布TFBOYS形象宣传片《十年》，由王俊凯、王源、易烊千玺三人组成的中国内地组合TFBOYS正式出道，陆续发行单曲《魔法城堡》、《青春修炼手册》、《幸运符号》、《信仰之名》、《宠爱》、《恋西游》、《剩下的盛夏》等单曲。2015年，王俊凯参拍张艺谋导演的电影《长城》、参演电视剧《小别离》、出演《诛仙青云志》。2016年12月21日，在公开的“2016年中国90后十大富豪榜”中排名第6，身价已达人民币2.48亿元。2017年1月登央视鸡年春晚。2018年2月，王俊凯成为Dolce&Gabbana亚太区品牌大使。2018年4月18日，任命为“联合国环境署亲善大使”。2018年7月6日，参演的电影《爵迹2》全国公映。2019年2月4日，王俊凯登央视猪年春晚。4月10日，APEC未来之声中国区组委会宣布王俊凯成为“2019年APEC未来之声青年大使”。9月7日，王俊凯荣获“第17届中国电影表演艺术学会奖”新人奖。</p>

					</div>
				</div>
				
				<a name="part3"></a>
				<div class="container3">
					<div class="text3 text">
						<div class="title3 title"><h1><font size="+5" face="宋体" >热门图片</font></h1></div>
						<div class="piclist">
         <div class="picbox">
             <div class="box front"><img src="karryimage/nnn.gif" alt=""></div>
             <div class="box back"><img src="karryimage/wjk001.jpg" alt=""></div>
         </div>
         <div class="picbox">
             <div class="box front"><img src="karryimage/vvv.gif" alt=""></div>
             <div class="box back"><img src="karryimage/wjk002.jpg" alt=""></div>
         </div>
         <div class="picbox">
             <div class="box front"><img src="karryimage/ooo.gif" alt=""></div>
             <div class="box back"><img src="karryimage/wjk003.jpg" alt=""></div>
         </div>
         <div class="picbox">
             <div class="box front"><img src="karryimage/iii.gif" alt=""></div>
             <div class="box back"><img src="karryimage/wjk004.jpg" alt=""></div>
         </div>
         <div class="picbox">
             <div class="box front"><img src="karryimage/uuu.gif" alt=""></div>
             <div class="box back"><img src="karryimage/wjk005.jpg" alt=""></div>
         </div>
         <div class="picbox">
             <div class="box front"><img src="karryimage/mmm.gif" alt=""></div>
             <div class="box back"><img src="karryimage/wjk000.jpg" alt=""></div>
         </div>
        
         
     </div>
					</div>
				</div>
				
				<a name="part4"></a>
				<div class="container4">
					<div class="text4 text">
						<div class="footerbottom">
						<div class="footer">
  
    

        <dl>
            <dt>邮编:</dt>
            <dd>541000</dd>
            <dt>反馈电话:</dt>
            <dd>0773-123456</dd>
            <dt>邮箱:</dt>
            <dd><a href="test.html">123456789@qq.com</a></dd>
            
        </dl>
        
    </div>
</div>
					</div>
				</div>
				
				
			</div>
			
		</div>
		
		
		
	</body>
</html>


*{
	padding: 0;
	margin: 0;
}
body{
	background: #eeeeee;
	text-align:center;
}
 #datas{
        display:none;
    }
    #txt{
        font-size:300%;
        width:80%;
        height:10%;
        margin-top:5%;
    }
    #msg{
        margin:0 auto;
        /*text-align:left;*/
        width:80%;
        border: medium solid #C0C0C0; 
    }
.right span{
				position: relative;
				text-align: center;
				color: #AFCDFF;
				font-size: 60px;
				animation: letter 1s cubic-bezier(0.1,0.5,0.2,1) infinite alternate;
                top: 0px;
				
			}
			span:nth-child(1){
				animation-delay: 0s;
			}
			span:nth-child(2){
				animation-delay: 0.1s;
			}
			span:nth-child(3){
				animation-delay: 0.2s;
			}
			span:nth-child(4){
				animation-delay: 0.3s;
			}
			span:nth-child(5){
				animation-delay: 0.4s;
			}
			span:nth-child(6){
				animation-delay: 0.5s;
			}
			span:nth-child(7){
				animation-delay: 0.6s;
			}
			span:nth-child(8){
				animation-delay: 0.7s;
			}
			span:nth-child(9){
				animation-delay: 0.8s;
			}
			span:nth-child(10){
				animation-delay: 0.9s;
			}
			
			@keyframes letter{
				from{
					top: 0px;
					text-shadow: blanchedalmond 0 0 0.05em;
				}
				to{
					top: 30px;
					text-shadow: blanchedalmond 0 1em 0.2em;
				}
			}

.control{
	width: 1075px;
	height: auto;
	margin: 0 auto;
}
.left,.content{
	height: auto;
	margin: 20px 5px;
}
.left{
	width: 200px;
	display: inline-block;
	vertical-align: top;
	
}
.subNav{
	height: auto;
	/*background-color: white;*/
	padding: 10px;
	width: 180px;
	position: fixed;
}
.content{
	width: 850px;
	/*background-color: white;*/
	display: inline-block;
	
}
.part{
	text-align: center;
	line-height: 60px;
	border-bottom: 1px solid #d9d9d9;
	border-radius: 5px;
	/*color: #000000;*/
}
a{
	text-decoration: none;
	/*color:black;*/
	display: block;
}
.part:hover{
	/*background: #eeeeee;*/
	cursor: pointer;
}
.part4{
	border: none;
}
.text{
	line-height: 30px;
	width: 80%;
	margin: 25px auto;
	height: auto;
	min-height: 500px;
}
/*.container2,.container4{
	background: #e5e5e5;
}*/
.title{
	line-height: 40px;
}
/*.container2,.container4{
	overflow: hidden;
}*/


#video {
            width: 700px;
            height: 450px;
            display: flex;
           
            margin: 0 auto;
            border: 1px solid silver;
        }
 
        #mp4par {
            position: relative;
            width: 700px;
            height: 450px;
            background-color: black;
            float: left;
            overflow: hidden;
        }
        #mp4 {
            position: relative;
            width: 700px;
            height: 450px;
        }
        #controls {
            position: absolute;
            width: 700px;
            height: 75px;
            bottom: -75px;
            z-index: 10;
            background-color: rgba(255, 255, 255, 0.31);
            text-align: center;
            transition: all 0.2s ease-in;
        }
        #mp4par:hover #controls{
            bottom: 0;
        }
        #btntime {
            width: 700px;
            outline: none;
        }
        #btnsound {
            position: relative;
            top: 5px;
        }
        button {
            position: relative;
            width: 40px;
            height: 20px;
             border-radius: 50%; 
            outline: none;
            border-style: none;
             /*background: radial-gradient(#ffae9f, #ff2f39); */
            margin: 18px;
            color: #474747;
        }
        .iconfont {
            font-size: 24px;
            color: #474747;
        }


img{
      width:300px;
     height:200px;
 }
 .piclist{
     width:1000px;
     height:400px;
     margin:auto;
 }
 .picbox{
     float:left;
     width:300px;
     height:200px;
     margin:auto;
     margin:10px;
     position:relative;
     /*父元素里面包含需要变换的内容，所以设置为3D变换*/
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -ms-transform-style: preserve-3d;
     transform-style: preserve-3d;
     transition:0s;
    
 }
 .picbox:hover{
     transform:rotateY(180deg);
 }


 .box{
     width:300px;
     height:200px;
     position:absolute;
     }
 
 .back{

     transform: rotateY(180deg);

     background: #8b4373;
     border:2px solid #ddd;
 }

专辑

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>
    
  </title>
  <style>
    *{
        margin: 0;
        padding: 0;
    }
    a{
        color: yellow ;
    }
    body{
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 14px;
        background-color: #CED8E6;
         background-image: url(karryimage/zzz.jpg) ;
      background-repeat: no-repeat;
      background-size: cover;
        color:pink;
    }
   
    #box{
        width: 1000px;
        margin: 20px auto;
        text-align: center;
        background-image: url(karryimage/ppp.jpg);
    }
    #content{
        /*background-color: #b3dae9;*/
        border-radius: 8px;
        box-shadow: 1px 1px 1px #ccc;
        border:1px solid #EEEEEE;
    }
    h4{
        font-size: 16px;
    }
    h4,p{
        padding: 10px 0;
    }
    #btn{
        width: 80px;
    }
    #spread{
        height: 0px;
         text-align: center;
        overflow: hidden;
    }
</style>

</head>
<div class="bjimg">


<div id="box"><body><div><a href="shouye1.html" style="dominant-baseline: no-change;"><font size="40" color="blue">返回首页</font></a></div>
    <div id="content">

        <table width="100%">
        <caption><font face="华文行楷" color= rgba(50, 128, 102, 0.9) size="50px">专辑</font></caption>
        <thead>
        <tr>
            <th width="308">专辑名称</th>
            <th width="208">发行时间</th>
            <th colspan="3" rowspan="1" width="100">语言</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td colspan="1" rowspan="1"><a href="test.html"><font color="gray">喜欢你</font> </a><br></td>
            <td colspan="1" rowspan="1">2018-8-17<br></td>
            <td colspan="3" rowspan="1">国语<br></td>
        </tr>
        <tr>
            <td colspan="1" rowspan="1"><a href="test.html"><font color="gray">我们的时光</font> </a><br></td>
            <td colspan="1" rowspan="1">2017<br></td>
            <td colspan="3" rowspan="1">国语<br></td>
        </tr>
        <tr>
            <td colspan="1" rowspan="1" width="308"><a target="_blank" href="https://baike.so.com/doc/7096036-24628646.html">大梦想家</a></td>
            <td colspan="1" rowspan="1" width="208">2015</td><td colspan="3" rowspan="1" width="230">国语</td>
        </tr>
        <tr>
            <td colspan="1" rowspan="1" width="308"><a target="_blank" href="https://baike.so.comhttps://baike.so.com/doc/7485812-7755510.html">青春修炼手册</a><br></td>
            <td colspan="1" rowspan="1" width="208">2014</td>
            <td colspan="3" rowspan="1" width="127">国语<br></td>
        </tr>
        <tr>
            <td colspan="1" rowspan="1" width="308"><a target="_blank" href="https://baike.so.com/doc/6792197-7008819.html">魔法城堡</a></td>
            <td colspan="1" rowspan="1" width="208">2014</td><td colspan="3" rowspan="1" width="127">国语<br></td>
        </tr>
        <tr>
            <td colspan="1" rowspan="1" width="308"><a target="_blank" href="https://baike.so.com/doc/7872219-8146314.html">Heart梦·出发</a><br></td>
            <td colspan="1" rowspan="1" width="208">2013</td>
            <td colspan="3" rowspan="1" width="127">国语<br></td>
        </tr>
        <tr>
            <td colspan="1" rowspan="1" width="308"><a target="_blank" href="https://baike.so.com/doc/2857300-9130210.html">街舞少年</a><br></td>
            <td colspan="1" rowspan="1" width="208">2013</td>
            <td colspan="3" rowspan="1" width="127">国语<br></td>
        </tr>
        <tr>
            <td colspan="1" rowspan="1" width="308"><a target="_blank" href="https://baike.so.com/doc/6788946-7005555.html">青蛙也会变王子</a><br></td>
            <td colspan="1" rowspan="1" width="208">2012</td><td colspan="3" rowspan="1" width="127">国语<br></td>
        </tr>
        <tr><td colspan="1" rowspan="1" width="308"><a target="_blank" href="https://baike.so.com/doc/6176772-6390013.html">我不要改变</a><br></td>
            <td colspan="1" rowspan="1" width="208">2011<br></td><td colspan="3" rowspan="1" width="127">国语</td>
        </tr>
        </tbody>
    </table>
    
        <div id="spread">
            <table width="100%" data-anchor="11">
            <caption><font face="华文行楷" color= rgba(50, 128, 102, 0.9) size="50px">单曲</font></caption>
            <thead>
            <tr><th width="435">歌曲名称（歌曲说明）</th><th width="155">发行时间</th></tr>
            </thead>
            <tbody>
            <tr>
                <td><a target="_blank" href="https://baike.so.com/doc/395918-419161.html">生长</a>（个人单曲）</td>
                <td>2019-07-22</td>
            </tr>
            <tr>
                <td><a target="_blank" href="https://baike.so.com/doc/5347999-5583448.html">我的朋友</a>（组合）</td>
                <td>2019-07-12</td>
            </tr>
            <tr>
                <td><a target="_blank" href="https://baike.so.com/doc/1117352-1182209.html">春天在哪里</a>（艺术行动 儿歌新唱）</td>
                <td>2019-05-31</td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">醒着<br></td>
                <td colspan="1" rowspan="1">2018-09-21<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">我的<br></td>
                <td colspan="1" rowspan="1">2018-09-19<br></td>
            </tr>
            <tr><td colspan="1" rowspan="1">最好的那年<br></td>
                <td colspan="1" rowspan="1">2018-08-09<br></td>
            </tr>
            <tr><td colspan="1" rowspan="1">圆梦一代<br></td>
                <td colspan="1" rowspan="1">2018-05-04<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">我在诛仙逍遥涧 (游戏《诛仙》主题曲)<br></td>
                <td colspan="1" rowspan="1">2018-03-28<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1"><a target="_blank" href="https://baike.so.com/doc/8490969-8811199.html">小棉袄</a>（个人单曲-李荣浩词曲+制作）</td>
                <td colspan="1" rowspan="1">2017-01-18<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1"><a target="_blank" href="https://baike.so.com/doc/6451621-10482844.html">萤火</a>（组合）</td>
                <td colspan="1" rowspan="1">2016-12-30<br></td>
            </tr>
            <tr><td colspan="1" rowspan="1">不息之河（组合）</td>
                <td colspan="1" rowspan="1">2016-10-12<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1"><a target="_blank" href="https://baike.so.com/doc/24056560-24639652.html">树读</a>（个人原创单曲）</td>
                <td colspan="1" rowspan="1">2016-08-12<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="593">未来的进击（组合 《超少年密码》主题曲）<br></td>
                <td colspan="1" rowspan="1" width="174">2016-07-05<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="576"><a target="_blank" href="https://baike.so.com/doc/7096036-11405162.html">大梦想家</a>（团体演唱歌曲）</td>
                <td colspan="1" rowspan="1" width="171">2015-08-17</td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="593"><a target="_blank" href="https://baike.so.com/doc/5340622-5576065.html">童年</a>（个人翻唱 吉他弹唱）<br></td>
                <td colspan="1" rowspan="1" width="174">2016-06-01<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="593"><a target="_blank" href="https://baike.so.com/doc/23982136-24554363.html">守护家</a>（组合）<br></td>
                <td colspan="1" rowspan="1" width="174">2016-05-20<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="593"><a target="_blank" href="https://baike.so.com/doc/23637872-24192244.html">真心话太冒险</a>（组合）<br></td>
                <td colspan="1" rowspan="1" width="174">2016-02-22<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="593"><a target="_blank" href="https://baike.so.com/doc/6626823-10422515.html">好想你</a>（组合翻唱 吉他弹唱）<br></td>
                <td colspan="1" rowspan="1" width="174">2015-12-30<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="593"><a target="_blank" href="https://baike.so.com/doc/7580570-7854664.html">算什么男人</a>（个人翻唱）<br></td>
                <td colspan="1" rowspan="1" width="174">2015-12-24<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="593">梦想天灯2016（团体 康师傅红烧牛肉面广告曲 TFBOYS与羽泉合唱）<br></td>
                <td colspan="1" rowspan="1" width="174">2015-12-14<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="593"><a target="_blank" href="https://baike.so.com/doc/2722577-10473523.html">模特</a>（个人翻唱）<br></td>
                <td colspan="1" rowspan="1" width="174">2015-09-19<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="593"><a target="_blank" href="https://baike.so.com/doc/7926759-8201968.html">我要夏天</a>（个人翻唱）<br></td>
                <td colspan="1" rowspan="1" width="174">2015-09-19<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="593"><a target="_blank" href="https://baike.so.com/doc/6385095-6598748.html">阳光宅男</a>（个人翻唱）<br></td>
                <td colspan="1" rowspan="1" width="174">2015-08-15<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="593"><a target="_blank" href="https://baike.so.com/doc/1011057-1069152.html">不要说话</a>（个人翻唱）<br></td>
                <td colspan="1" rowspan="1" width="174">2015-08-15<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="591">明天你好（翻唱(与王源合唱)）<br></td>
                <td colspan="1" rowspan="1" width="173">2015-06-12<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="593">我们是共产主义接班人（团体 中国少先队队歌TFBOYS和韩庚合唱）<br></td>
                <td colspan="1" rowspan="1" width="174">2015-06-01<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="593"><a target="_blank" href="https://baike.so.com/doc/3333405-10457055.html">样</a>YOUNG（个人翻唱）<br></td>
                <td colspan="1" rowspan="1" width="174">2015-05-08<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="593"><a target="_blank" href="https://baike.so.com/doc/10037144-10514838.html">光荣</a>（个人翻唱）<br></td>
                <td colspan="1" rowspan="1" width="174">2015-04-24<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="593"><a target="_blank" href="https://baike.so.com/doc/8395582-8714716.html">恋西游</a>（组合 《梦幻西游》2动画片主题曲）<br></td>
                <td colspan="1" rowspan="1" width="174">2015-04-14<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="593"><a target="_blank" href="https://baike.so.com/doc/1011057-1069152.html">不要说话</a>（个人翻唱）<br></td>
                <td colspan="1" rowspan="1" width="174">2015-04-03<br></td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1" width="593"><a target="_blank" href="https://baike.so.com/doc/4277475-4481064.html">安静</a>（个人翻唱 吉他弹唱）<br></td>
                <td colspan="1" rowspan="1" width="174">2015-03-13<br></td>
            </tr>
            
            </tbody>
        </table>


        </div>
    </div>
    <button id="btn">展开</button>
</div>
<script>
    /*获得btn*/
    var btn = document.getElementById('btn')
    var spread = document.getElementById('spread')
    var iSpread = false
    /*高度*/
    var height = spread.scrollHeight
    /*总时间*/
    var time = 420;
    /*间隔*/
    var interval = 8.4
    /*速度*/
    var speed = height/(time/interval)
    /*点击事件*/
    btn.onclick = function (e) {
        btn.disabled = 'disabled'
        if(!iSpread){
            var speeds = 0
            var timer = setInterval(function () {
                speeds += speed
                spread.style.height = speeds + 'px'

                if(parseInt(spread.style.height) >=height){
                    clearTimeout(timer)
                    btn.disabled = ''
                }
            },interval)
            this.innerHTML = '收起'
        }else {
            var speeds = height
            this.innerHTML = '展开'
            var timer = setInterval(function () {
                speeds -= speed
                spread.style.height = speeds + 'px'
                if(speeds <= 0){
                    clearTimeout(timer)
                    btn.disabled = ''
                }
            },interval)
        }
        iSpread = !iSpread
    }

</script>
</div>


</body>
</html>

视频

视频首页1

在这里插入图片描述
在这里插入图片描述


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王俊凯相关视频</title>
    <link rel="stylesheet" type="text/css" href="shipin.css">
    <script type="text/javascript">
    	
    </script>
</head>



<body>
     <audio id="music" src="karryimage/我在诛仙逍遥涧.mp3"  autoplay="autoplay"  > </audio>
    <main id="main">
        <!-- 虚化背景 -->
        <div class="bg"></div>
        <!-- 图片框 -->
        <section>
            <!-- 放图片 -->
            <div class="tupian">
                <img src="karryimage/1E697418F96836E0781496290A8E7DE4.gif" class="image">
            </div>
            <!-- 小圆点 -->
            <div class="select">
            </div>
            <!-- 左右切换按钮 -->
            <div class="bt left"><span class="anniu">&lt;</span></div>
            <div class="bt right"><span class="anniu">&gt;</span></div>
        </section>
    
    <div class="txt"><a href="shipin2.html" style="text-decoration:none; color: rgba(50, 128, 102, 0.9);        font-family: '华文行楷'; ">王俊凯的影视资源</a></div>
</main>
   
    <script>

        /* 获取元素 */

        var main = document.getElementById('main');
        var bg = document.querySelector('.bg');
        var image = document.querySelector('.image');
        var select = document.querySelector('.select');
        var dian = document.getElementsByClassName('dian');
        var left = document.querySelector('.left');
        var right = document.querySelector('.right');

        /* 设置数组，里面放图片的地址 */

        var picture = ['karryimage/1E697418F96836E0781496290A8E7DE4.gif', 'karryimage/BAD5C9C1CDBBC07033327DDEAFB7D3AB.gif', 'karryimage/94478292A3CE872E833FE6FF4D8734E6.gif', 'karryimage/95719FEED6E8D8C26EE72CDAA9E51571.gif', 'karryimage/005Mt3jSly1gun8rpabp9g60ky0e3npn02.gif', 'karryimage/005Mt3jSly1gu3u1r1jysg30r70i8nps.gif'];

        /* 设置index为0，这个变量后面就一直用来充当图片数组的下标 */
        var index = 0;

        /* 从图片数组的长度，动态添加小圆点 */

        for (let i = 0; i < picture.length; i++) {
            let dot = document.createElement('div');
            dot.classList.add('dian');
            select.appendChild(dot);
            /* 添加自定义属性index，对应每张图片的下标 */
            dot.bianhao = i;
        }

        /* 排他思想，清除所有小圆点check样式，后面要引用这个封装函数 */

        function qingchu() {
            for (let i = 0; i < dian.length; i++) {
                dian[i].classList.remove('check');

            }
        }


        /* 切下一张图的封装函数，后面也是要引用 */

        function yunxing() {
               /* index加1 */
            index = index + 1;
            if (index == picture.length) {
                index = 0;
            }
             /* 显示图片，显示图片数组下标为目前index那张 */
            image.src = picture[index];
             /* 虚化背景也要换 */
            bg.style.cssText = ` background-image: url(${picture[index]});`

            /* 小圆点的显示 */
            qingchu();
              /* 显示那张图就显示对于的圆点，给他.check的样式 */
            dian[index].classList.add('check');

            /* 若index超过，回到-1 */
            if (index == picture.length - 1) {
                index = -1;
            }

        }



        /* 点击向右按钮时的操作 */

        right.addEventListener('click', function () {
            /* 直接用上面的切图封装函数 */
            yunxing();
        })

        /* 点击向左按钮时的操作，跟上面的切下张图封装函数异曲同工 */

        left.addEventListener('click', function () {

            index = index - 1;
            if (index == -1) {
                index = picture.length - 1;
            }
            image.src = picture[index];
            bg.style.cssText = ` background-image: url(${picture[index]});`

            /* 向左时小圆点的显示 */
            qingchu();
            dian[index].classList.add('check');

        })


        /* 进入main这个底层盒子时，停止自动轮播和.yun类的动画效果，自动轮播的定时器我写在最后面 */

        main.addEventListener('mouseover', function () {

            clearInterval(lunbo);

            image.classList.remove('yun');

        })

        /*  离开main这个底层盒子时，开始自动轮播和.yun类的动画效果，自动轮播的定时器我写在最后面 */

        main.addEventListener('mouseout', function () {

            lunbo = setInterval(yunxing, 2000);

            image.classList.add('yun');
            image.style.animationDelay = '2s';
        })


        /*  点击小圆点时的切图操作 */
        for (let i = 0; i < picture.length; i++) {
            dian[i].addEventListener('click', function () {
                qingchu();
                this.classList.add('check');
                index = i;
                image.src = picture[index];
            bg.style.cssText = ` background-image: url(${picture[index]});`

            })
        }

        /* 自动轮播定时器与初始状态 */

        lunbo = setInterval(yunxing, 5000);
        image.classList.add('yun');
        dian[0].classList.add('check');

    </script>
    <div>

    </div>
</body>

</html>



         @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?wr5es');
            src: url('fonts/icomoon.eot?wr5es#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?wr5es') format('truetype'),
                url('fonts/icomoon.woff?wr5es') format('woff'),
                url('fonts/icomoon.svg?wr5es#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        * {
            font-family: 'icomoon';
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
          /*  background-color: rgba(50, 128, 102, 0.9);*/
          background-color: #CED8E6;
        }

        main {
            position: relative;
          /*  top: 20vh;*/
            height: 500px;
            width: 100%;
            overflow: hidden;
        }

        main .bg {
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background-image: url(karryimage/1E697418F96836E0781496290A8E7DE4.gif);
            background-size: 100% 100%;
            filter: blur(30px);
        }

        main section {
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            height: 100%;
            width: 100%;
            max-width: 980px;

        }

        main section .tupian {
            width: 100%;
            height: 100%;
        }

        main section .tupian .image {
            width: 100%;
            height: 100%;
            object-fit: cover;


        }

        .yun {
            animation: bian 5s linear infinite;
        }


        @keyframes bian {

            0%,
            100% {
                opacity: 0.2;
                backdrop-filter: blur(10px);
            }

            30%,
            80% {
                opacity: 1;
                backdrop-filter: blur(0px);
            }

        }


        main .select {
            position: absolute;
            bottom: 10px;
            height: 30px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        main .select .dian {
            margin: 3px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid rgb(255, 254, 254);

        }

        main .select .dian:hover {
            background-color: rgb(255, 254, 254);
            cursor: pointer;
        }

        .check {

            background-color: rgb(255, 254, 254);
        }

        main section .bt {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background-color: #CED8E6;
            border-radius: 20%;
            cursor: pointer;
            transition: all 2s;
        }

        main section .bt:hover {
            box-shadow: inset 0 0 1px rgba(255, 255, 255, .8),
                inset 0 0 5px rgba(255, 255, 255, .8),
                inset 0 0 15px rgba(255, 255, 255, .8);
        }

        main section .left {
            left: -60px;
        }

        main section .right {
            right: -60px;
        }

        /*当屏幕尺寸小于1100px时，应用下面的CSS样式,详细用法网址：https://www.xuewangzhan.net/baike/css3-379.html*/
        @media screen and (max-width: 1100px) {
            main section .left {
                left: 20px;
            }

            main section .right {
                right: 20px;
            }
        }

        main section .anniu {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 25px;
            color: rgb(255, 255, 255);
            user-select: none;
            transition: all 3s;


        }

        .txt {

            position: fixed;
            bottom: 5vh;
            
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 100px;
            font-family: 'fangsong';
            font-size: 50px;
            text-align: center;

            color: rgba(50, 128, 102, 0.9);
            background-color: #CED8E6;
            user-select: none;
        }

视频首页2

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>王俊凯相关视频</title>
  <link rel="stylesheet" type="text/css" href="shipin2.css">
</head>
<body>

  <div class="main"> 
    
<div class="menu">


          <span class="a1" style="background: url(karryimage/010.png);background-size: 100% 100%; height: 79;"><a href="电影.html"><font size="+2" face="仿宋"><br>出演的电影</font></a></span>&nbsp;&nbsp;&nbsp;&nbsp;
            
        <span class="a2" style="background: url(karryimage/011.png);background-size: 100% 100%; height: 79;"><a href="电视剧.html"><font size="+2" face="仿宋">出演电视剧</font></a></span>&nbsp;&nbsp;&nbsp;&nbsp;
            
        <span class="a3" style="background: url(karryimage/012.png);background-size: 100% 100%; height: 79;"><a href="综艺.html"><font size="+2" face="仿宋">出演的综艺</font></a></span>&nbsp;&nbsp;&nbsp;&nbsp;
         <span class="a3" style="background: url(karryimage/012.png);background-size: 100% 100%; height: 79;"><a href="shouye1.html"><font size="+2" face="仿宋">返回首页</font></a></span>&nbsp;&nbsp;&nbsp;&nbsp;
           
         
</div>
<h1><font face="华文行楷" color="#5C36C5" size="50px"; >王俊凯 </font></h1>



<div class="a">
<ul class="list tvList">
  


  <li class="item" key="undefined"><a href="视频播放.html" target="_blank" class="videoCover"><img src="karryimage/理想照耀中国.png" width="250" height="320"> </a><a href="视频播放.html" target="_blank" class="title">理想照耀中国</a><p>第四届社会主义核心价值观动画短片扶持创作活动优秀作品</p></li>
  
  <li class="item" key="undefined"><a href="https://v.qq.com/x/cover/mzc00200rrb5bh5.html" target="_blank" class="videoCover"><img src="karryimage/小别离.png" width="250" height="320"> </a><a href="https://v.qq.com/x/cover/mzc00200rrb5bh5.html" target="_blank" class="title">小别离</a><p>初三新学期第一次月考后的家长会。朵朵考砸，方圆和文洁心中焦急。安妮的女儿Rose因在国外中学受同学欺凌而患上精神疾...</p></li>
  <li class="item" key="undefined"><a href="https://v.qq.com/x/cover/liv9g5jjieiixph.html" target="_blank" class="videoCover"><img src="karryimage/我们的少年时代.png" width="250" height="320"> </a><a href="https://v.qq.com/x/cover/liv9g5jjieiixph.html" target="_blank" class="title">我们的少年时代</a><p>面对由种子选手组成的中加中学棒球队，月亮岛高中惨败。看着毫无斗志的月亮岛队员...</p></li>
  <li class="item" key="undefined"><a href="https://v.qq.com/x/cover/mzc00200hhxbnn1.html" target="_blank" class="videoCover"><img src="karryimage/中餐厅.png" width="250" height="320"> </a><a href="https://v.qq.com/x/cover/mzc00200hhxbnn1.html" target="_blank" class="title">中餐厅</a><p>《中餐厅》是湖南卫视推出的青春合伙人经营体验节目，由几位青春合伙人通过21天时间...</p></li>
  
  <li class="item" key="undefined"><a href="https://v.qq.com/x/cover/mzc0020052bm14c.html" target="_blank" class="videoCover"><img src="karryimage/恰好是少年.png" width="250" height="320"> </a><a href="#" target="_blank" class="title">恰好是少年</a><p>《恰好是少年》聚焦“20代青年原生友情”，通过自驾旅行方式，在游历祖国的大好河山的同时，实现自我的成长与内心的沉淀。还原年轻人与同龄好友... </p></li>
  <li class="item" key="undefined"><a href="" target="_blank" class="videoCover"><img src="karryimage/全员加速中.png" width="250" height="320"> </a><a href="#" target="_blank" class="title">全员加速中</a><p>《全员加速中第二季》是湖南卫视联合东阳欢娱影视文化有限公司、于正工作室引进日本富...</p></li>
  
  <li class="item" key="undefined"><a href="https://v.qq.com/x/cover/mzc002005r11t3t.html" target="_blank" class="videoCover"><img src="karryimage/2021元宵节晚会.png" width="250" height="320"> </a><a href="https://v.qq.com/x/cover/mzc002005r11t3t.html" target="_blank" class="title">2021央视元宵晚会</a></li>

    <li class="item" key="undefined"><a href="https://v.qq.com/x/cover/mzc00200lsvgl46.html" target="_blank" class="videoCover"><img src="karryimage/2021央视春晚.png" width="250" height="320"> </a><a href="https://v.qq.com/x/cover/mzc00200lsvgl46.html" target="_blank" class="title">2021央视春晚</a></li>
     <li class="item" key="undefined"><a href="https://v.qq.com/x/cover/pf4znbcphp41g91.html" target="_blank" class="videoCover"><img src="karryimage/高能少年团.png" width="250" height="320"> </a><a href="https://v.qq.com/x/cover/pf4znbcphp41g91.html" target="_blank" class="title">高能少年团</a></li>
  
  
  <li class="item" key="undefined"><a href="https://v.qq.com/x/cover/tqf1g3x6yl4fnmm.html" target="_blank" class="videoCover"><img src="karryimage/青云志.png" width="250" height="320"> </a><a href="https://v.qq.com/x/cover/tqf1g3x6yl4fnmm.html" target="_blank" class="title">青云志</a></li>

    <li class="item" key="undefined"><a href="https://v.qq.com/x/cover/v3vqiiawbdc5mrv.html" target="_blank" class="videoCover"><img src="karryimage/我是你的TFPHONE.png" width="250" height="320"> </a><a href="https://v.qq.com/x/cover/v3vqiiawbdc5mrv.html" target="_blank" class="title">我是你的TFPHONE</a></li>
  


  <ul>
</div>
</div>
</body>
</html>



 

body {
	font-family:arial;
	font-size:12px; 		
	padding:0px; 			
	margin:5px; 			
	background-color:#CED8E6;		
}
a{
	text-decoration:none; 		
}
img{
	border:none; 			
}

span{
				position: relative;
				text-align: center;
				color: #AFCDFF;
				font-size: 42px;
				animation: letter 1s cubic-bezier(0.1,0.5,0.2,1) infinite alternate;
                top: 0px;
				
			}
			span:nth-child(1){
				animation-delay: 0s;
			}
			span:nth-child(2){
				animation-delay: 0.1s;
			}
			span:nth-child(3){
				animation-delay: 0.2s;
			}
			
			@keyframes letter{
				from{
					top: 0px;
					text-shadow: blanchedalmond 0 0 0.05em;
				}
				to{
					top: 30px;
					text-shadow: blanchedalmond 0 1em 0.2em;
				}
			}
			.main{
					width:1000px; 			
					margin:auto; 			
					background:#CED8E6; 		
					padding:3px; 
			}
       .menu{
            width: 100%;
            height: 120px;
            float: left;
            margin: auto;
            font-size: 50px;
            padding:3px; 
            text-align: center;
        }
        .a{
        	width: 100%;
        	float: left;
        	margin: auto;

            text-align: center;
        	position: relative;
        }
ul li{list-style: none;
 float: left; 
 margin: auto;
 /*text-align: center;*/
 width: 250px; 
 height: 450px;
 padding-top:100px;
 padding-right: 20px;
  padding-left: 20px; }
    ul ,li a{text-decoration: none;}
    ul ,li a.title{
font-size: 20px;
font-family: fangsong;

    }

电影

电视剧

综艺

相关人物

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>与王俊凯相关人物</title>
	<link rel="stylesheet" type="text/css" href="xiangguanrenwu.css">
</head>
<body style="background-image: url(karryimage/tfboys.jpg); ">
	<audio id="music" src="karryimage/请陪我们一起变强大.mp3"  autoplay="autoplay"  > </audio>
	<!-- 导航栏部分 -->
		<div class="control">
			<div class="left">
				<div class="subNav">
					<div class="part1 part"><a href="#part1"><font size="40px" face="仿宋" color="orange">TFBOYS</font></a></div>
					<div class="part2 part"><a href="#part2"><font size="30px" face="仿宋" color="red">易烊<br> 千玺</font></a></div>
					<div class="part3 part"><a href="#part3"><font size="40px" face="仿宋" color="organer">王源</font></a></div>
					<div class="part4 part"><a href="#part4"><font size="40px" face="仿宋" color="orange">留言</font></a></div>
					<div class="part4 part"><a href="shouye1.html"><font size="40px" face="仿宋" color="green">返回首页</font></a></div>
				</div>
			</div>
			
			<!-- 正文部分 -->
			<div class="content" >
				<a name="part1"></a>
				<div class="container1" >
					<div class="text1 text"  >
						<div class="title1 title"><a href="https://baike.so.com/doc/7015646-7238535.html" ><font size="40px" face="仿宋" color="orange">TFBOYS</font></a></div>

						TFBOYS是北京时代峰峻文化艺术发展有限公司推出的少年偶像组合，由王俊凯、王源和易烊千玺3名成员组成，2013年8月6日正式出道，2013年10月18日发行出道EP《Heart梦·出发》。

2014年3月13日，发行单曲《魔法城堡》。4月15日，荣获第二届音悦V榜年度盛典“内地最具人气歌手奖”和“音悦直播人气歌手奖”。12月6日，荣获尖叫2015爱奇艺之夜“最受欢迎组合奖”和“年度金曲奖”。2015年3月30日，荣获东方风云榜音乐盛典“最佳组合”、“年度风云组合“两项大奖。4月11日，荣获音乐V榜年度盛典“内地最具人气歌手”、“内地年度风向艺人”和“音悦直播人气歌手”三项大奖。10月22日，加盟湖南卫视《全员加速中》 。12月29日，发行迷你专辑《大梦想家》。2016年2月7日，登上中央电视台春节联欢晚会，表演儿童节目《幸福成长》。4月9日，荣获第16届音乐风云榜年度最受欢迎组合奖。4月10日，荣获第四届音乐V榜内地最佳组合奖。2017年1月27日，在央视春节晚会上表演开场歌舞《美丽中国年》。2017年9月16日，TFBOYS组合宣布，王俊凯、王源、易烊千玺三人分别成立个人工作室，但组合不解散。2018年1月27日，获得全球流行音乐金榜年度盛典年度最受欢迎组合。8月23日，入围2018全球华人歌曲排行榜年度最受欢迎乐队和组合奖。

					</div>
				</div>
				
				<a name="part2"></a>
				<div class="container2">
					<div class="text2 text">
						<div class="title2 title"><a href="https://baike.so.com/doc/5469870-5707782.html###" ><font size="40px" face="仿宋" color="red">易烊千玺</font></a></div>
						易烊千玺，2000年11月28日生于湖南怀化，中国内地男歌手、舞者、演员，TFBOYS成员，就读于中央戏剧学院。

2005年，首登电视荧屏，开始参演各类综艺节目。2009年，加入“飞炫少年”组合，两年后退出。2013年6月，获邀加入TF家族；8月，以TFBOYS形式出道。2015年10月，为《小王子》男主角配音，该片刷新法国动画电影在华票房纪录。11月，表演自编舞蹈《IF YOU》和《RHYTHM TA》。2016年11月，荣登2016中国泛娱乐指数盛典明星影响力榜首；同月，发行单曲《你说》。2017年4月，发行单曲《离骚》。10月， 确认主演《长安十二时辰》及《艳势番之新青年》两部剧集。11月，发行单曲《Nothing to Lose》和《Unpredictable》。12月，登上《芭莎男士》封面，加盟优酷《这！就是街舞》。2018年10月，发行单曲《精彩才刚刚开始》。11月，发行首张个人精选专辑《我乐意沉默释放内心焰火》。2019年10月25日，主演的电影《少年的你》在中国大陆上映，在剧中饰演小北。11月，发行单曲《念想》。11月10日，参加在上海举行的双十一晚会。11月19日，参演的热血青春励志剧《热血同行》播出。

2020年5月6日，凭借《少年的你》获得第39届香港电影金像奖最佳新演员。9月26日，易烊千玺凭借电影《少年的你》获得第35届大众电影百花奖最佳新人奖。
					</div>
				</div>
				
				<a name="part3"></a>
				<div class="container3">
					<div class="text3 text">
						<div class="title3 title"><a href="https://baike.so.com/doc/5512432-5748212.html###" ><font size="40px" face="仿宋" color="organer">王源</font></a></div>
						王源，2000年11月8日出生于重庆，中国内地男歌手、演员、主持人，中国内地男子演唱组合TFBOYS成员 。

2011年底成为TF家族练习生，2013年8月以组合形式出道。2015年起，开始独立作词作曲；同年，参演电影《爵迹》和电视剧《青云志》。2016年，演唱的歌曲《因为遇见你》获得亚洲新歌榜年度十大金曲，王源凭借该曲获得第9届城市至尊音乐榜年度听众最爱新人；第2次获新浪《微博明星白皮书》年度人气第一。2017年，参与作词的《阳光不锈》获亚洲新歌榜年度十大金曲；作词作曲的歌曲《十七》 获得亚洲新歌榜年度十大金曲和全球中文音乐榜上榜年度最佳中文歌曲，王源凭借该曲获得全球中文音乐榜上榜年度最佳原创歌手；入选美国《时代》周刊30位全球最具影响力青少年 ；获微博电影之夜人气之星 。出任“联合国儿童基金会青年教育使者” ，成立“源公益专项基金” 。

2018年，成为《环球人物》专栏作家，出任“联合国儿童基金会大使”；参演好莱坞电影《极限特工4》；第2次在联合国经济及社会理事会青年论坛上做英文议程演讲。 2019年，第2次登文联春晚，第4次登上央视春晚舞台，进入福布斯中国100名人榜；参演的王小帅执导的文艺片《地久天长》入围柏林国际电影节主竞赛单元；8月，由王源监制策划的演唱会“2019「源」演唱会”在南京举办。2020年7月19日，在东方风云榜晚会中荣获“最受欢迎男歌手”、“最受欢迎专辑”、“最受欢迎演唱会”以及“十大金曲”四个奖项。
					</div>
				</div>
				
				<a name="part4"></a>
				<div class="container4">
					<div class="text4 text">
						<div class="title4 title"><font size="40px" face="仿宋" color="orange"><a href="test.html">留言</a></font></div>
						网名ID：<br/> <input type="number" id="mood"/><br/>
提议：<br/> <textarea id="network"></textarea><br/>
<button id="send">发表</button>
<div class="ban">
            <table width="100%">
                <thead>
            <tr>
                <th >播出时间</th>
                <th >节目名称</th>
                <th >简介</th></tr>
                </thead>
                <tbody>
</div>
<script>
var mood=document.getElementById ("mood");
var network=document.getElementById ("network");
var send=document.getElementById ("send");
var ban=document.querySelector (".ban");
// localStorage.clear ();
readdata();
send.onclick =function(){
  var time=new Date();
  var shuju={
        mymood:mood.value,
        mynetwork:network .value,
        now_time:time.toLocaleString()  
    };
     console.log(JSON.stringify (shuju));
     localStorage.setItem (time.getTime(),JSON.stringify (shuju));
    mood.value="";
    network.value ="";

     alert("发表成功");
     readdata();
}
function readdata(){
    ban.innerHTML ="";
    var length=localStorage.length-1;
    for(var i=length;i>=0;i--){
      var k=localStorage.key(i);  //获取key值
      var data=JSON.parse (localStorage.getItem(k));  //
        console.log(k);
        ban.innerHTML +=data.mymood +" &nbsp;&nbsp;&nbsp;"+data.mynetwork +" &nbsp;&nbsp;&nbsp;"+ data.now_time +"<br/>";
    }
}     
</script>
					</div>
				</div>
				
				
			</div>
			
		</div>
		
		
		
</body>
</html>



*{
	padding: 0;
	margin: 0;
}
body{
	background: #CED8E6;
}

.control{
	width: 1075px;
	height: auto;
	margin: 0 auto;
}
.left,.content{
	height: auto;
	margin: 20px 5px;
}
.left{
	width: 200px;
	display: inline-block;
	vertical-align: top;
	
}
.subNav{
	height: auto;
	background-color: white;
	padding: 10px;
	width: 180px;
	position: fixed;
}
.content{
	width: 850px;
	background-color: white;
	display: inline-block;
	
}
.part{
	text-align: center;
	line-height: 60px;
	border-bottom: 1px solid #d9d9d9;
	border-radius: 5px;
	color: #000000;
}
a{
	text-decoration: none;
	color:black;
	display: block;
}
.part:hover{
	background: #eeeeee;
	cursor: pointer;
}
.part4{
	border: none;
}
.text{
	line-height: 30px;
	width: 80%;
	margin: 25px auto;
	height: auto;
	min-height: 500px;
}
.container2,.container4{
	background: #e5e5e5;
}
.title{
	line-height: 40px;
}
.container2,.container4{
	overflow: hidden;
}
.ban{
           width:500px;
           height:auto;
           border:1px solid black;
       }
        #send {
            width:100px;
            height:50px;
            font-size: 30px;
            text-align: center;
            line-height: 25px;
            background:#DACFF8 ;
        }
        ul a{text-decoration: none;
            font-size: 50px;}
小胡萝卜芯～
关注
【源码+演示】高考加油！HTML+CSS特效文字祝福_程序员祝福高考学子旗开得胜！
平平无奇の小透明的博客
06-08 4590
　　又是一年盛夏至，愿高三学子高中毕业日，即是高中名校时！ 　　本篇为大家带来3款HTML+CSS制作出的小项目，为高考学子加油助威，愿他们旗开得胜，金榜题名！
HTML5浪漫生日祝福电子贺卡网页模板（HTML5+CSS3+JS）_520表白/七夕情人节表白/告白网页制作/生日快乐html模板
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-15 1万+
html+css+js实现生日快乐代码????超炫酷效果????(含生日背景音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码 程序员爱情❤520/表白/七夕情人节/求婚❤专用html5+css3+js 生日快乐网站模板 HTML生日快乐祝福网页模板，该模板有多种动态效果图，全局采用蓝色装饰，适用于给女朋友的生日祝福，只需简单修改，即可用网页生成打开。html+css+js实现生日快乐代码????超炫酷效果????(含生日背景音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码
❤️创意网页：高考加油倒计时网页文字加多版 - 增加祝福语句和下雪背景效果
最新发布
VLOKL的博客
07-30 1067
❤️创意网页：高考加油倒计时网页文字加多版 - 增加祝福语句和下雪背景效果
HTML跨年代码，恭贺新春代码，网页版新春快乐代码
Python代码大全
12-31 4784
HTML跨年代码，恭贺新春代码，网页版新春快乐代码。
HTML5生日快乐在线网页祝福 (一场浪漫的烟花秀) HTML+CSS+JavaScript
HTML网页设计 专注大学生网页设计
09-30 2万+
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面：可使用任意HTML编辑软件（如： 等任意html编辑软件进行运行及修改编辑等操作）。 其中： （1）📜html文件包含：其中index.html是首页、其他html为二级页面； （2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等 （3）📄 js文件包含：页面炫酷效果实现14-html5 canvas生日快乐文字烟花背景动画特效 🏠JS代码 五、🎁更多
HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
HTML网页设计 专注大学生网页设计
09-25 7221
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
中证800指数数据集2016-10-31至2021-10-29
11-01
字段介绍：交易日期 开盘点位 最高点位 最低点位 收盘价 涨跌 涨跌幅(%) 开始日累计涨跌 开始日累计涨跌幅 成交量(万股) 成交额(万)
Tekton-Second-Github2021-03-10T23-12-31.430Z:为工具链创建
03-11
这个名为 "Tekton-Second-Github2021-03-10T23-12-31.430Z: 为工具链创建" 的资源包，似乎包含了 Tekton 管道的一个实例，它展示了如何通过 Tekton 来执行一个简单的任务。 Tekton 管道是由一系列可复用的构建块...
ES-2SEM-2021-Grupo-31
04-03
压缩包中的文件名为“ES-2SEM-2021-Grupo-31-main”，暗示这可能是一个包含主要源代码或项目的文件夹。 Java是一种广泛使用的面向对象的编程语言，由Sun Microsystems（现在归Oracle公司所有）于1995年推出。它的...
精品资料（2021-2022年收藏）人教版小学一年级数学下册期末考试题.doc
10-10
1. 数列规律：找出与众不同的序列，如10到14是连续整数，21到25也是，47到55每次加2，而27到31是每次加1。 六、应用问题 1. 价格计算：如录音机比书贵多少，小明买电话机实际支付的金额，以及笑笑如何用70元恰好...
web前端学习（十）——HTML5中网页表单的相关标签设置
贝尔摩德苦艾酒
12-28 8782
web前端学习（十）——HTML5中网页表单的相关标签设置
HTML5+CSS大作业——明星个人主页(15页) 创作主页
12-04 1833
HTML5+CSS大作业——明星个人主页(15页) 创作主页 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关注我们 ????作者主页-更多源码 ???
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
学生HTML个人网页作业作品 基于HTML+CSS+JavaScript明星个人主页(15页)
qq_38515380的博客
04-27 766
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大
python海龟画图代码大全_Python turtle海龟制图 求代码
weixin_39685762的博客
11-21 4184
展开全部# coding:utf-8import turtle as t# 绘制小猪5261佩奇# =======================================t.pensize(4)t.hideturtle()t.colormode(255)t.color((255, 155, 192), "pink")t.setup(840, 500)t.speed(10)# 鼻子t.pu(...
python创意小作品-Python竟能画这么漂亮的花,帅呆了(代码分享)
q6q6q的专栏
10-28 6020
阅读本文大概需要3分钟关于函数和模块讲了这么久，我一直想用一个好玩有趣的小例子来总结一下，同时也作为实战练习一下。趣味编程其实是最好的学习途径，回想十几年前我刚毕业的时候，第一份工作就给手机上写app，当时觉得非常好玩,那个是时候还是用symbian系统，熬了好几个通宵用j2me写了一个坦克大战，到现在还记得当程序运行的时候坦克互战的情景,真的是蛮兴奋的。好吧一下子扯远了，我们还是回到正题：我想来...
用python画肖战_王一博、肖战、吴宣仪、杨紫，2019明星沸点榜，谁的颜值更高，Python告诉你...
weixin_39627665的博客
12-10 1373
比较谁的颜值更高，样本选择是个不小的问题，即使同一个明星，不同的照片也会产生不同的颜值分数，选择不当会造成很大的样本误差。为了尽量减小误差，我们这次的明星图片全部从美桌网来获取(下图)。下面是下载备用的10位明星图片。其实为了使结果更有说服力，可以每位明星都选取很多张图片，然后分别进行颜值打分后取均值，不过我们又不是什么权威认定，本文只讲过程、不重结果，也就不做那么麻烦的操作了。现在样本图片准备就...
web期末作业设计网页 HTML5+CSS大作业——明星个人主页(15页) 创作主页
qq_524614081的博客
04-19 1942
HTML5+CSS大作业——明星个人主页(15页) 创作主页 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 文章目录HTML5+CSS大作业——明星个人主页(15页) 创作主页
竟然如此简单！输入明星名字就可以直接爬取高清图片
公众号：Python研究者
12-04 830
听说你在自己喜欢的明星壁纸？比如李易峰，王一博，易烊千玺、王源、王俊凯，李现等。今天教你批量下载这些明星高清壁纸（文末有福利）最近图慌，闲来无事爬取李易峰的高清图片，当做手机壁纸也是不错...
优化成MYSQL 脚本SELECT 子品牌, 商品数字ID, COUNT(DISTINCT o.用户id) AS new_customer_num, SUM(o.商品实付金额) AS new_customer_商品实付金额 FROM 天猫官旗有效数据 o LEFT JOIN ( -- 找到22年10月30日前有购买行为的客户编号 SELECT 用户id FROM 天猫官旗有效数据 WHERE 支付日期 BETWEEN '2021-10-31' AND '2022-10-30' GROUP BY 用户id ) old_c ON o.用户id = old_c.用户id WHERE o.支付日期 >= '2022-10-31' AND o.支付日期 <= '2022-11-11' AND NOT EXISTS ( SELECT 1 FROM 天猫官旗有效数据 WHERE 用户id = o.用户id AND 支付日期 BETWEEN '2021-10-31' AND '2022-10-30') GROUP BY GROUPING SETS ((子品牌, 商品数字ID))
05-25
WHERE 支付日期 BETWEEN '2021-10-31' AND '2022-10-30' GROUP BY 用户id ) old_c ON o.用户id = old_c.用户id WHERE o.支付日期 >= '2022-10-31' AND o.支付日期 <= '2022-11-11' GROUP BY 子品牌, 商品数字ID...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值