weblab2代码
代码
login.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登陆界面</title>
<style type="text/css">
body{
background:url(images/t.jpg);
background-size:1250px 800px;
}
div{
margin-top:190px;
margin-left:190px;
}
p{
font-size:18px;
color: #844200;
text-shadow: 0 0 2px #000;
margin-left:18px;
}
.submitButton{
font-size:15px;
color: #844200;
text-shadow: 0 0 2px #000;
margin-left:85px;
text-align:center;
background-color:transparent;
border-color:#844200;
border-width:1px;
}
.i{
background-color:transparent;
border-color:#844200;
border-width:1px;
}
</style>
</head>
<script>
function login(){
var name=document.getElementById("name").value;
var pass=document.getElementById("pass").value;
if(name=="labtwo" && pass=="123456"){
alert("登入成功");
window.location.href="labtwo.html";
return false;
}else{
alert("用户名或密码错误");
window.location.href="login.html";
return false;
}
}
</script>
<body>
<div>
<p>用户名<input class="i" type="text" placeholder="请输入用户名" id="name"/></p>
<p>密 码<input class="i" type="password" placeholder="请输密码" id="pass"/></p>
<p><input type="submit" value="登陆" class="submitButton" onclick="return login();"/></p>
</div>
</body>
</html>
labtwo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<style type="text/css">
body{
background:url(images/t.jpg);
background-size:1250px 800px;
}
div{
margin-top:190px;
margin-left:190px;
}
a{
font-size:18px;
color: #844200;
text-shadow: 0 0 2px #000;
margin-left:18px;
}
h1{
color: #844200;
text-shadow: 0 0 2px #000;
}
</style>
</head>
<body>
<div>
<h1>我的老公JC-T</h1>
<a href="http://localhost:8080/weblabone/1.html">檀健次百度百科</a><br/><br/>
<a href="http://localhost:8080/weblabone/2.html">檀健次音乐作品欣赏</a><br/><br/>
<a href="http://localhost:8080/weblabone/3.html">檀健次舞蹈作品欣赏</a><br/><br/>
</div>
</body>
</html>
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>檀健次百度百科</title>
<style type="text/css">
body{
background:url(images/ta.jpg);
background-size:1500px 1000px;
background-repeat:no-repeat;
}
table
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 300px auto;
width: 600px;
text-align: left;
/*border-collapse: collapse;*/
}
.t1
{
padding: 8px;
width:20px;
color: #844200;
text-shadow: 0 0 1px #000;
/*border-bottom: 1px solid ;
border-top: 1px solid transparent;*/
}
.t2
{
padding: 8px;
width:100px;
color: #844200;
text-shadow: 0 0 1px #000;
/*border-bottom: 1px solid ;
border-top: 1px solid transparent;*/
}
img{
width: 280px ;
margin-left:450px;
margin-bottom:20px;
margin-top:50px;
}
</style>
</head>
<script>
//获取屏幕宽高
var windowWidth = window.screen.width;
var windowHeight = window.screen.height;
//创建雪花
function createSnow(){
var left = 0;
var top = 0;
//定义一个初始化随机数,使雪花在屏幕中
var left_random = Math.random() * windowWidth;
var top_random = Math.random()* windowHeight;
var div = document.createElement('div');
div.className = 'snow';
div.style.transform = 'scale('+(Math.random())+')'
document.body.appendChild(div);
//雪花飘落
setInterval(function () {
div.style.left = left_random + left +'px';
div.style.top = top_random + top +'px'
left += 0.2;
top += 0.2;
//如果雪花跑到屏幕外面了,让雪花重新返回屏幕顶部
if(left_random + left >= windowWidth){
left_random = Math.random();
left = 0;
}
if(top_random + top >= windowHeight){
top_random = Math.random();
top = 0;
}
},10)
}
for(var i = 0 ; i < 200 ; i++){
createSnow()
}
</script>
<body>
<div>
<table>
<tr>
<td class="t1">中文名</td>
<td class="t2">檀健次</td>
<td class="t1">职 业</td>
<td class="t2">歌手、演员</td>
</tr>
<tr>
<td class="t1">外文名</td>
<td class="t2">JC-T</td>
<td class="t1">经纪公司</td>
<td class="t2">上海耀客传媒股份有限公司</td>
</tr>
<tr>
<td class="t1">别 名</td>
<td class="t2">多多</td>
<td class="t1">代表作品</td>
<td class="t2">猎罪图鉴、Fly Away、鬓边不是海棠红</td>
</tr>
<tr>
<td class="t1">国 籍</td>
<td class="t2">中国</td>
<td class="t1">主要成就</td>
<td class="t2">2021电视剧品质盛典品质新人奖</td>
</tr>
<tr>
<td class="t1">民 族</td>
<td class="t2">汉</td>
<td class="t1"></td>
<td class="t2">2021国剧盛典青春演绎风格男演员</td>
</tr>
<tr>
<td class="t1">出生地</td>
<td class="t2">广西北海</td>
<td class="t1"></td>
<td class="t2">2021费加罗风尚盛典年度风尚人气先锋演员奖</td>
</tr>
<tr>
<td class="t1">出生日期</td>
<td class="t2">1990年10月5日</td>
<td class="t1"></td>
<td class="t2">桃李杯全国拉丁舞大赛少年组冠军</td>
</tr>
<tr>
<td class="t1">星 座</td>
<td class="t2">天秤座</td>
<td class="t1"></td>
<td class="t2">全国舞蹈锦标赛专业拉丁舞冠军</td>
</tr>
<tr>
<td class="t1">身 高</td>
<td class="t2">174cm</td>
<td class="t1"></td>
<td class="t2">中国音超金钟奖组合金奖</td>
</tr>
<tr>
<td class="t1">毕业院校</td>
<td class="t2">北京体育大学</td>
<td class="t1">粉丝名</td>
<td class="t2">小炭火</td>
</tr>
</table>
</div>
</body>
</html>
2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>檀健次音乐作品欣赏</title>
<style type="text/css">
body{
background:url(images/tf.jpg);
background-color:#000000 ;
background-repeat:no-repeat;
background-size:1250px 1350px;
}
table
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 100px 100px;
width: 500px;
text-align: left;
border-collapse: collapse;
}
td
{
font-size:15px;
padding: 8px;
width:30px;
color: #844200;
text-shadow: 0 0 1px #000;
border-bottom: 1px solid ;
border-top: 1px solid transparent;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td colspan="2" style="font-size:30px;text-align:center">
音乐欣赏
</td>
</tr>
<tr>
<td>myplace</td>
<td>
<audio src="music/MIC男团 - My place.mp3" controls></audio>
</td>
</tr>
<tr>
<td>Senorita</td>
<td><audio src="music/檀健次 _ 张紫宁 - Senorita (Live).mp3" controls></audio></td>
</tr>
<tr>
<td>眉飞色舞</td>
<td><audio src="music/孟佳 _ 檀健次 - 眉飞色舞 (Live).mp3" controls></audio></td>
</tr>
<tr>
<td>猎罪图鉴</td>
<td><audio src="music/檀健次 - 猎罪图鉴.mp3" controls></audio></td>
</tr>
<tr>
<td>所念皆星河</td>
<td><audio src="music/檀健次 - 所念皆星河.mp3" controls></audio></td>
</tr>
<tr>
<td>月半小夜曲</td>
<td><audio src="music/檀健次 - 月半小夜曲 (Live).mp3" controls></audio></td>
</tr>
</table>
</div>
</body>
</html>
3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>檀健次舞蹈作品欣赏</title>
<style type="text/css">
body{
background:url(images/t.jpg);
background-size:1250px 800px;
}
table
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 50px 100px;
width: 500px;
text-align: left;
}
td
{
font-size:25px;
padding: 8px;
width:150px;
color: #844200;
text-shadow: 0 0 1px #000;
}
.ta{
font-size:25px;
padding: 8px;
width:100px;
color: #844200;
text-shadow: 0 0 1px #000;
}
h1{
color: #844200;
text-shadow: 0 0 2px #000;
margin-top:50px;
margin-left:335px;
}
</style>
</head>
<body>
<table>
<h1>舞蹈欣赏</h1>
<tr>
<td class="ta">
剑魂
</td>
<td>
<video width="400" height="300" controls>
<source src="videos/1.mp4" type="video/mp4">
<source src="videos/1.ogg" type="video/ogg">
</video>
</td>
</tr>
<tr>
<td>
国标
</td>
<td>
<video width="400" height="300" controls>
<source src="videos/5.mp4" type="video/mp4">
<source src="videos/5.ogg" type="video/ogg">
</video>
</td>
</tr>
<tr>
<td>
My Boom
</td>
<td>
<video width="400" height="300" controls>
<source src="videos/3.mp4" type="video/mp4">
<source src="videos/3.ogg" type="video/ogg">
</video>
</td>
</tr>
<tr>
<td>
眉飞色舞
</td>
<td>
<video width="400" height="300" controls>
<source src="videos/4.mp4" type="video/mp4">
<source src="videos/4.ogg" type="video/ogg">
</video>
</td>
</tr>
</table>
</body>
</html>
浙公网安备 33010602011771号