c#实验b/s界面
做了一个观影网站的静态页面
页面一代码
<!doctype html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网站作业</title>
<link href="myshiyan.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript" src="zhuyelunbo.js"></script>
<style type="text/css">
div{
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
</style>
</head>
<body>
<div style="width:100%; height:65px; background-color:#000; opacity:0.87;">
<div class="ONE">
</div>
<div class="TWO">
<input name="text1" type="text" class="text1" id="text1" value="极限挑战">
</div>
<div class="three">
<div style="width:100px; margin-top:18px; margin-left:18px">
<font style="color:#FFF; font-family:黑体; font-size:18px;">搜全网</font>
</div>
</div>
<div class="four">
<a href="01我的实验登录.html" class="white"><span class="C7">登录</span></a> <span style="color:#FFF">/</span> <a href="01我的实验注册页面.html" class="white"><span class="C7">注册</span></a>
</div>
</div>
<div style="width:100%; background-color:#000;">
<div style="width: 1600px;height: 490px;border:0.5px solid;margin-left:auto; margin-right:auto;" id="divbeijing"><a href="01我的实验观影.html"><img src="yingpian/01.jpg" id="focusimg"></a>
<div style="position: absolute; width: 300px; height: 490px; margin-left: 1200px; border: 1px solid; background: #333; opacity: 0.8; left: 84px; top: 74px;">
<a href="#" class="white2">
<div class="text2" name="div1" onClick="CHange(1)">
相信未来：为未来歌唱
</div>
</a><a href="#" class="white2">
<div class="text2" name="div1" onClick="CHange(2)">
《加勒比海盗5：死无对证》
</div>
</a><a href="#" class="white2">
<div class="text2" name="div1" onClick="CHange(3)">
《云南虫谷》 惊奇的冒险之旅
</div>
</a><a href="#" class="white2">
<div class="text2" name="div1" onClick="CHange(4)">
《锦衣卫》 铁血搏杀，撼天动地
</div>
</a><a href="#" class="white2">
<div class="text2" name="div1" onClick="CHange(5)">
《钟馗伏魔》雪妖魔灵，万应贺岁
</div>
</a><a href="#" class="white2">
<div class="text2" name="div1" onClick="CHange(6)">
《流浪地球》携手地球逃亡之旅
</div>
</a><a href="#" class="white2">
<div class="text2" name="div1" onClick="CHange(7)">
《雪山摇》文革时期的世事百态
</div>
</a><a href="#" class="white2">
<div class="text2" name="div1" onClick="CHange(8)">
《密室逃生》“解谜版”电锯惊魂
</div>
</a><a href="#" class="white2">
<div class="text2" name="div1" onClick="CHange(9)">
金牌经纪人 闪光少女第10期
</div>
</a><a href="#" class="white2">
<div class="text2" name="div1" onClick="CHange(10)">
《功夫》 回味经典电影
</div>
</a><a href="#" class="white2">
<div class="text2" name="div1" onClick="CHange(11)">
《消失的子弹》 弹雨骤起
</div>
</a>
</div>
</div>
<div style="height:81px;width:100%; background-color:#333; opacity:0.87">
<table width="1643" height="73" border="0" cellpadding="0" cellspacing="0" style=" margin-top:5px;color:#FFF; font-family:黑体;"; id="table1">
<tr>
<td width="84"> </td>
<td width="55"><a href="#" class="white">娱乐</a></td>
<td width="85"><a href="#" class="white">电影</a></td>
<td width="78"><a href="#" class="white">电视剧</a></td>
<td width="63"><a href="#" class="white">综艺</a></td>
<td width="44" rowspan="2"> </td>
<td width="44" rowspan="2"> </td>
<td width="57"><a href="#" class="white">动漫</a></td>
<td width="59"><a href="#" class="white">搞笑</a></td>
<td width="57"><a href="#" class="white">音乐</a></td>
<td width="60"><a href="#" class="white">原创</a></td>
<td width="37" rowspan="2"> </td>
<td width="38" rowspan="2"> </td>
<td width="48"><a href="#" class="white">知识</a></td>
<td width="49"><a href="#" class="white">儿童</a></td>
<td width="52"><a href="#" class="white">生活</a></td>
<td width="50"><a href="#" class="white">军事</a></td>
<td width="65"><a href="#" class="white">财经</a></td>
<td width="39" rowspan="2"> </td>
<td width="39" rowspan="2"> </td>
<td width="60"><a href="#" class="white">热点</a></td>
<td width="96"><a href="#" class="white">全球影视</a></td>
<td width="91"><a href="#" class="white">奇秀直播</a></td>
<td width="98"><a href="#" class="white">泡泡广场</a></td>
<td width="58"><a href="#" class="white">商城</a></td>
<td width="137" rowspan="2" style="background-image:url(554.jpg)"> </td>
</tr>
<tr>
<td> </td>
<td><a href="#" class="white">电影</a></td>
<td><a href="#" class="white">网络电影</a></td>
<td><a href="#" class="white">片花</a></td>
<td><a href="#" class="white">脱口秀</a></td>
<td><a href="#" class="white">游戏</a></td>
<td><a href="#" class="white">旅游</a></td>
<td><a href="#" class="white">时尚</a></td>
<td><a href="#" class="white">体育</a></td>
<td><a href="#" class="white">教育</a></td>
<td><a href="#" class="white">母婴</a></td>
<td><a href="#" class="white">健康</a></td>
<td><a href="#" class="white">汽车</a></td>
<td><a href="#" class="white">科技</a></td>
<td><a href="#" class="white">榜单</a></td>
<td><a href="#" class="white">应用商店</a></td>
<td><a href="#" class="white">直播中心</a></td>
<td><a href="#" class="white">游戏中心</a></td>
<td><a href="#" class="white">VIP</a></td>
</tr>
</table>
</div>
</div>
<div style="width:100%; height:300px;border:hidden;">
<div style=" position:absolute; margin-left:140px; margin-top:70px;width:50px; height:50px; border:hidden; background-image:url(jiaodian.jpg)">
</div>
<div style="position:absolute; margin-top:70px; margin-left:190px; border:hidden; width:1400px; height:50px;">
<div style="margin-top:20px;">
<span class="C1 C3">今日焦点</span><a href="#" style="text-decoration:none">
<span class="C1 C4 C2">求是微理论：人类政治制度史上的伟大创造</span></a> / <a href="#" style="text-decoration:none"><span class="C1 C4">更多热点></span></a>
</div>
</div>
<div style="position:absolute; margin-top:120px; margin-left:140px; border:hidden; width:1450px; height:180px;">
<a href="#" style="text-decoration:none">
<div class="style2">
<div class="neibustyle1 neibustyle1-1">
</div>
<div class="neibustyle2"><span class="C1">全国政协十三界三次会议在人民大会堂开幕</span>
</div>
</div>
</a>
<a href="#" style="text-decoration:none">
<div class="style2 style21 style3">
<div class="neibustyle1 neibustyle1-2">
</div>
<div class="neibustyle2"><span class="C1">病毒无国界,加强团结合作至为重要</span>
</div>
</div>
</a>
<a href="#" style="text-decoration:none">
<div class="style2 style22 style3">
<div class="neibustyle1 neibustyle1-3">
</div>
<div class="neibustyle2"><span class="C1">奋进强军路,我国病理学科发展任重道远</span>
</div>
</div>
</a>
<a href="#" style="text-decoration:none">
<div class="style2 style23 style3">
<div class="neibustyle1 neibustyle1-4">
</div>
<div class="neibustyle2"><span class="C1">企业平均开工率和职工复岗率达到正常水平</span>
</div>
</div>
</a>
<a href="#" style="text-decoration:none">
<div class="style2 style24 style3">
<div class="neibustyle1 neibustyle1-5">
</div>
<div class="neibustyle2"><span class="C1">联播+| 两会一年间 主席的扶贫足迹</span>
</div>
</div>
</a>
<a href="#" style="text-decoration:none">
<div class="style2 style25 style3">
<div class="neibustyle1 neibustyle1-6">
</div>
<div class="neibustyle2"><span class="C1">全国人大代表关牧村：歌唱家的艺术生命存活于人民中</span>
</div>
</div>
</a>
</div>
</div>
<div style="width:100%; height:480px;border:hidden;" id="wkuangjia2">
<div style=" position:absolute; margin-left:140px; margin-top:70px;width:50px; height:50px; border:hidden; background-image:url(dianying.jpg)">
</div>
<div style="position:absolute; margin-top:70px; margin-left:190px; border:hidden; width:1400px; height:50px;">
<div style="margin-top:20px;">
<span class="C1 C3">电影</span><a href="#" style="text-decoration:none">
<span class="C1 C4 C5">更多></span><span class="C1 C4 C5">文艺院线</span></a> / <a href="#" style="text-decoration:none"><span class="C1 C4">独播专区</span></a> / <a href="#" style="text-decoration:none"><span class="C1 C4">网络电影</span></a> / <a href="#" style="text-decoration:none"><span class="C1 C4">不可不看的环球精彩电影</span></a>
</div>
</div>
<div style="position:absolute; margin-top:120px; margin-left:140px; border:hidden; width:1450px; height:360px;">
<a href="#" style="text-decoration:none">
<div class="style2-2">
<div class="neibustyle3 neibustyle3-1">
</div>
<div class="neibustyle4"><span class="C1 C6">惊奇队长</span><br><span class="C1 C4">主演：布丽•拉尔森，赛缪尔•杰克逊</span>
</div>
</div>
</a>
<a href="#" style="text-decoration:none">
<div class="style2-2 style21 style3-3">
<div class="neibustyle3 neibustyle3-2">
</div>
<div class="neibustyle4"><span class="C1 C6">黑寡妇</span><br><span class="C1 C4">主演：斯嘉丽•约翰逊</span>
</div>
</div>
</a>
<a href="#" style="text-decoration:none">
<div class="style2-2 style22 style3-3">
<div class="neibustyle3 neibustyle3-3">
</div>
<div class="neibustyle4"><span class="C1 C6">21克拉</span><br><span class="C1 C4">主演：郭京飞，迪丽热巴，大鹏</span>
</div>
</div>
</a>
<a href="#" style="text-decoration:none">
<div class="style2-2 style23 style3-3">
<div class="neibustyle3 neibustyle3-4">
</div>
<div class="neibustyle4"><span class="C1 C6">婚姻故事</span><br><span class="C1 C4">主演：斯嘉丽•约翰逊，亚当•德莱弗</span>
</div>
</div>
</a>
<a href="#" style="text-decoration:none">
<div class="style2-2 style24 style3-3">
<div class="neibustyle3 neibustyle3-5">
</div>
<div class="neibustyle4"><span class="C1 C6">复仇者联盟4</span><br><span class="C1 C4">主演：小罗伯特•唐尼,马克•鲁法洛</span>
</div>
</div>
</a>
<a href="#" style="text-decoration:none">
<div class="style2-2 style25 style3-3">
<div class="neibustyle3 neibustyle3-6">
</div>
<div class="neibustyle4"><span class="C1 C6">惊涛迷局</span><br><span class="C1 C4">主演：马修•麦康纳，安妮•海瑟薇</span>
</div>
</div>
</a>
</div>
</div>
<table style="width:100%; margin-top:200px" border="0" cellspacing="0" cellpadding="0">
<tr style="height:20px; background-color:#CCC;">
<td></td>
</tr>
<tr>
<td bgcolor="#efefef" align="center">Copyright 2015-2020 Q-Walking Fashing E&S 漫步时尚广场（QST教育）版权所有<Br/>
中国青岛 高新区河东路 8888 号 青软教育集团 咨询热线：400-658-0166 400-658-1022<br/>
<img src="images/foot_pic.jpg">
</td>
</tr>
</table>
<script type="text/jscript">
var w=new Array();
var w =document.getElementsByClassName("white");
//alert(w.length);
for(var i=0;i<w.length;i++){
w[i].addEventListener('mouseover',function(){
//alert(this.innerHTML)
this.style.color='#0C0';
},false)
}
for(var i=0;i<w.length;i++){
w[i].addEventListener('mouseout',function(){
//alert(this.innerHTML)
this.style.color='#FFF';
},false)
}
var C=new Array();
var C=document.getElementsByClassName("C1");
for(var i=0;i<C.length;i++){
C[i].addEventListener('mouseover',function(){
//alert(this.innerHTML)
this.style.color='#0C0';
},false)
}
for(var i=0;i<C.length;i++){
C[i].addEventListener('mouseout',function(){
//alert(this.innerHTML)
this.style.color='#000';
},false)
}
</script>
</body>
</html>
页面二代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="myshiyan.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript" src="zhuyelunbo.js"></script>
<style type="text/css">
div{
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
</style>
</head>
<body>
<div style="width:100%; height:65px; background-color:#000; opacity:0.87;">
<div class="ONE">
</div>
<div class="TWO">
<input name="text1" type="text" class="text1" id="text1" value="极限挑战">
</div>
<div class="three">
<div style="width:100px; margin-top:18px; margin-left:18px">
<font style="color:#FFF; font-family:黑体; font-size:18px;">搜全网</font>
</div>
</div>
<div class="four">
<a href="denglu01.html" class="white"><span class="C7">登录</span></a> <span style="color:#FFF">/</span> <a href="01我的实验注册页面.html" class="white"><span class="C7">注册</span></a>
</div>
</div>
<div style="width:100%; background-color:#000;">
<div style="width: 900px;height: 495px; background-color:#333; border:hidden;margin-left:auto; margin-right:auto; margin-top:0px; margin-bottom:0px" id="videodiv">
<video poster="1.jpg" controls width="800" height="490" style="margin-left:50px; margin-right:50px;">
</video>
</div>
<div style="height:81px;width:100%; background-color:#333; opacity:0.87">
<table width="1643" height="73" border="0" cellpadding="0" cellspacing="0" style=" margin-top:5px;color:#FFF; font-family:黑体;"; id="table1">
<tr>
<td width="84"> </td>
<td width="55"><a href="#" class="white">娱乐</a></td>
<td width="85"><a href="#" class="white">电影</a></td>
<td width="78"><a href="#" class="white">电视剧</a></td>
<td width="63"><a href="#" class="white">综艺</a></td>
<td width="44" rowspan="2"> </td>
<td width="44" rowspan="2"> </td>
<td width="57"><a href="#" class="white">动漫</a></td>
<td width="59"><a href="#" class="white">搞笑</a></td>
<td width="57"><a href="#" class="white">音乐</a></td>
<td width="60"><a href="#" class="white">原创</a></td>
<td width="37" rowspan="2"> </td>
<td width="38" rowspan="2"> </td>
<td width="48"><a href="#" class="white">知识</a></td>
<td width="49"><a href="#" class="white">儿童</a></td>
<td width="52"><a href="#" class="white">生活</a></td>
<td width="50"><a href="#" class="white">军事</a></td>
<td width="65"><a href="#" class="white">财经</a></td>
<td width="39" rowspan="2"> </td>
<td width="39" rowspan="2"> </td>
<td width="60"><a href="#" class="white">热点</a></td>
<td width="96"><a href="#" class="white">全球影视</a></td>
<td width="91"><a href="#" class="white">奇秀直播</a></td>
<td width="98"><a href="#" class="white">泡泡广场</a></td>
<td width="58"><a href="#" class="white">商城</a></td>
<td width="137" rowspan="2" style="background-image:url(554.jpg)"> </td>
</tr>
<tr>
<td> </td>
<td><a href="#" class="white">电影</a></td>
<td><a href="#" class="white">网络电影</a></td>
<td><a href="#" class="white">片花</a></td>
<td><a href="#" class="white">脱口秀</a></td>
<td><a href="#" class="white">游戏</a></td>
<td><a href="#" class="white">旅游</a></td>
<td><a href="#" class="white">时尚</a></td>
<td><a href="#" class="white">体育</a></td>
<td><a href="#" class="white">教育</a></td>
<td><a href="#" class="white">母婴</a></td>
<td><a href="#" class="white">健康</a></td>
<td><a href="#" class="white">汽车</a></td>
<td><a href="#" class="white">科技</a></td>
<td><a href="#" class="white">榜单</a></td>
<td><a href="#" class="white">应用商店</a></td>
<td><a href="#" class="white">直播中心</a></td>
<td><a href="#" class="white">游戏中心</a></td>
<td><a href="#" class="white">VIP</a></td>
</tr>
</table>
</div>
</div>
<div style="width:100%; height:480px;border:hidden;" id="wkuangjia2">
<div style=" position:absolute; margin-left:140px; margin-top:70px;width:50px; height:50px; border:hidden; background-image:url(dianying.jpg)">
</div>
<div style="position:absolute; margin-top:70px; margin-left:190px; border:hidden; width:1400px; height:50px;">
<div style="margin-top:20px;">
<span class="C1 C3">猜你喜欢</span><a href="#" style="text-decoration:none">
<span class="C1 C4 C5">更多></span><span class="C1 C4 C5">速度激情</span></a> / <a href="#" style="text-decoration:none"><span class="C1 C4">院线大片</span></a> / <a href="#" style="text-decoration:none"><span class="C1 C4">欧美电影></span></a>
</div>
</div>
<div style="position:absolute; margin-top:120px; margin-left:140px; border:hidden; width:1450px; height:360px;">
<a href="#" style="text-decoration:none">
<div class="style2-2">
<div class="neibustyle3 neibustyle3-1">
</div>
<div class="neibustyle4"><span class="C1 C6">惊奇队长</span><br><span class="C1 C4">主演：布丽•拉尔森，赛缪尔•杰克逊</span>
</div>
</div>
</a>
<a href="#" style="text-decoration:none">
<div class="style2-2 style21 style3-3">
<div class="neibustyle3 neibustyle3-2">
</div>
<div class="neibustyle4"><span class="C1 C6">黑寡妇</span><br><span class="C1 C4">主演：斯嘉丽•约翰逊</span>
</div>
</div>
</a>
<a href="#" style="text-decoration:none">
<div class="style2-2 style22 style3-3">
<div class="neibustyle3 neibustyle3-3">
</div>
<div class="neibustyle4"><span class="C1 C6">21克拉</span><br><span class="C1 C4">主演：郭京飞，迪丽热巴，大鹏</span>
</div>
</div>
</a>
<a href="#" style="text-decoration:none">
<div class="style2-2 style23 style3-3">
<div class="neibustyle3 neibustyle3-4">
</div>
<div class="neibustyle4"><span class="C1 C6">婚姻故事</span><br><span class="C1 C4">主演：斯嘉丽•约翰逊，亚当•德莱弗</span>
</div>
</div>
</a>
<a href="#" style="text-decoration:none">
<div class="style2-2 style24 style3-3">
<div class="neibustyle3 neibustyle3-5">
</div>
<div class="neibustyle4"><span class="C1 C6">复仇者联盟4</span><br><span class="C1 C4">主演：小罗伯特•唐尼,马克•鲁法洛</span>
</div>
</div>
</a>
<a href="#" style="text-decoration:none">
<div class="style2-2 style25 style3-3">
<div class="neibustyle3 neibustyle3-6">
</div>
<div class="neibustyle4"><span class="C1 C6">惊涛迷局</span><br><span class="C1 C4">主演：马修•麦康纳，安妮•海瑟薇</span>
</div>
</div>
</a>
</div>
</div>
<table style="width:100%; margin-top:200px" border="0" cellspacing="0" cellpadding="0">
<tr style="height:20px; background-color:#CCC;">
<td></td>
</tr>
<tr>
<td bgcolor="#efefef" align="center">Copyright 2015-2020 Q-Walking Fashing E&S 酷喵在线影院（QST教育）版权所有<Br/>
中国河北 石家庄市北二环 8888 号 信1802团支部 咨询热线：400-658-0166 151-2710-1968<br/>
<img src="images/foot_pic.jpg">
</td>
</tr>
</table>
<script type="text/jscript">
var w=new Array();
var w =document.getElementsByClassName("white");
//alert(w.length);
for(var i=0;i<w.length;i++){
w[i].addEventListener('mouseover',function(){
//alert(this.innerHTML)
this.style.color='#0C0';
},false)
}
for(var i=0;i<w.length;i++){
w[i].addEventListener('mouseout',function(){
//alert(this.innerHTML)
this.style.color='#FFF';
},false)
}
var C=new Array();
var C=document.getElementsByClassName("C1");
for(var i=0;i<C.length;i++){
C[i].addEventListener('mouseover',function(){
//alert(this.innerHTML)
this.style.color='#0C0';
},false)
}
for(var i=0;i<C.length;i++){
C[i].addEventListener('mouseout',function(){
//alert(this.innerHTML)
this.style.color='#000';
},false)
}
</script>
</body>
</html>
浙公网安备 33010602011771号