网页大赛作品--第一次组队去做些东西

最新推荐文章于 2024-08-28 22:19:47 发布

E2.0

最新推荐文章于 2024-08-28 22:19:47 发布

阅读量675

点赞数

分类专栏：实战项目 ---------

本文链接：https://blog.csdn.net/qq_39125908/article/details/80096569

版权

实战项目 --------- 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主页</title>

</head>
<body>
<!-- 代码部分begin -->
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}/* Hides from IE-mac \*/
*html .clearfix{height:1%;}
.clearfix{display:block;}/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}
/* lanrenzhijia */
.lanrenzhijia{width:1250px;margin:10px auto 0 auto;overflow:hidden;}
.lanrenzhijia ul{width:1250px;}
.lanrenzhijia ul li{float:left;margin-right:6px;margin-bottom:10px;display:inline;width:300px;height:430px;overflow:hidden;position:relative;}
.lanrenzhijia ul li .photo{width:300px;height:430px;overflow:hidden;}
.lanrenzhijia .rsp{width:300px;height:430px;overflow:hidden;position: absolute;background:#000;top:0px;left:0px;}
.lanrenzhijia .text{position:absolute;width:300px;height:430px;left:-300px;top:0px;overflow:hidden;}
.lanrenzhijia .text h3{width:300px;margin-top:100px;height:50px;line-height:50px;text-align:center;color:#FFFFFF;font-size:20px;}
.lanrenzhijia .text a{text-decoration:none}
.lanrenzhijia .text div{text-align:center;color:#FFFFFF;font-size:18px;}
*{margin:0;padding:0;font-size:20px}
ul{list-style:none}
li{float:left}
a{text-decoration:none;display:block;height:50px;line-height:70px;width:300px;margin-bottom:1px;background-color:#ccc;text-align;center;}
a:hover{background-color:#DC143C;color:#fff}

h1{
    text-align:center;
	font-size:30px;
}

</style>
<embed src="2.mp3" hidden="true" autostart="true" loop="true">
<div class="daohang"  style="width:100%;height:200px;background-image:url('ysuname.jpg');background-repeat:no-repeat;">


</div>
<div id="first">
<ul>
<li><a href="school.html">校园</a></li>
<li><a href="teacher.html">老师</a></li>
<li><a href="student.html">学生</a></li>
<li><a href="science.html">科技</a></li>
</ul>
</div>

<div class="lanrenzhijia">
	<ul class="clearfix">
		<li>
			<div class="photo"><img src="schooly.jpg" width="300" height="430" /></div>
			<div class="rsp"></div>
			<div class="text"><h3>燕山大学（Yanshan University）简称“燕大”（YSU），坐落于河北省秦皇岛市，北依燕山，南临渤海，故得名燕山大学，是全国重点大学，北京高科大学联盟成员.</h3></div>
		</li>
		<li>
			<div class="photo"><img src="teachery.jpg" width="300" height="430" /></div>
			<div class="rsp"></div>
			<div class="text"><h3>截至2015年9月，燕山大学有教职工3000人，其中专职教师2000人，教师中教授413人（含博士生导师200人），副教授630人。截至2016年1月，燕山大学有“长江学者奖励计划”特聘教授7人。</h3></div>
		</li>
		<li>
			<div class="photo"><img src="studenty.jpg" width="300" height="430" /></div>
			<div class="rsp"></div>
			<div class="text"><h3>知名校友：</br>


张春贤
十八届中央政治局委员，新疆维吾尔自治区党委书记</br>


马西林	原中国科学技术大学副校长</br>


</h3></div>
		</li>
		<li>
			<div class="photo"><img src="sciencey.jpg" width="300" height="430" /></div>
			<div class="rsp"></div>
			<div class="text"><h3>学校设有5个国家重点学科、4个国防重点学科和16个省级重点学科；有“亚稳材料制备技术与科学”国家重点实验室、“冷轧板带装备及工艺”国家工程技术研究中心学”国防重点学科实验室.</h3></div>
		</li>
		
	</ul>
	<div class="clear"></div>
</div>
//<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
$(function(){
	$(".lanrenzhijia ul li .rsp").hide();	
	$(".lanrenzhijia ul li").hover(function(){
		$(this).find(".rsp").stop().fadeTo(500,0.5)
		$(this).find(".text").stop().animate({left:'0'}, {duration: 500})
	},
	function(){
		$(this).find(".rsp").stop().fadeTo(500,0)
		$(this).find(".text").stop().animate({left:'300'}, {duration: "fast"})
		$(this).find(".text").animate({left:'-300'}, {duration: 0})
	});
});
 window.οnlοad=function(){
  var aA=document.getElementsByTagName('a');
  for(var i=0;i<aA.length;i++){
    aA[i].οnmοuseοver=function(){
	    var This=this;
	    This.timem=setInterval(function(){
		This.style.width=This.offsetWidth+8+"px";
		if(This.offsetWidth>=320){
		clearInterval(This.timem)
		}
		},70)
	}
	aA[i].οnmοuseοut=function(){
	    var This=this;
	    This.time=setInterval(function(){
		This.style.width=This.offsetWidth-8+"px";
		if(This.offsetWidth<=320){
		This.style.width="300px";
		clearInterval(This.time)
		}
		},30)
		}
  }
}
</script>
<!-- 代码部分end -->
</body>
</html>