<!DOCTYPE html>
<html>
<head>
<title>大学生计算机设计联赛</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="basic.css" />
<script type="text/javascript" src="basic.js"></script>
</head>
<body>
<div id="head">
<img src="./images/banner.jpg" width="100%">
<ul id="main">
<li><a href="#">首页</a></li>
<li><a href="#">大赛资讯</a></li>
<li><a href="#">专家风采</a></li>
<li><a href="#">创业工场</a></li>
<li><a href="#">大赛花絮</a></li>
<li><a href="#">大赛视频</a></li>
<li><a href="#">关于大赛</a></li>
</ul>
</div>
<div id="message">
<div id="photo">
<img id="imp" width="100%" height="100%" src="./images/p1.jpg" />
<p id="word">test<p>
<ul id="point">
<li id='1'> </li>
<li id='2'> </li>
<li id='3'> </li>
<li id='4'> </li>
<li id='5'> </li>
</ul>
</div>
<div id="list">
<h3>大赛公告</h3>
<hr>
<ul>
<li class="left"><a href="#">徐州市大学生计算机设计联赛开幕式暨个人赛顺利举行
<p class="right">2016/05/11</p></a></li>
<li class="left"><a href="#">徐州市大学生计算机设计联赛开幕式暨个人赛顺利举行
<p class="right">2016/05/11</p></a></li>
<li class="left"><a href="#">徐州市大学生计算机设计联赛开幕式暨个人赛顺利举行
<p class="right">2016/05/11</p></a></li>
<li class="left"><a href="#">徐州市大学生计算机设计联赛开幕式暨个人赛顺利举行
<p class="right">2016/05/11</p></a></li>
<li class="left"><a href="#">徐州市大学生计算机设计联赛开幕式暨个人赛顺利举行
<p class="right">2016/05/11</p></a></li>
</ul>
</div>
<div id="date">
<ul>
<li class="red">徐州市大学生程序设计联赛团队创业赛</li>
<li >报名阶段<br>2016/04-2016/05</li>
<li>报名阶段<br>2016/04-2016/05</li>
<li>报名阶段<br>2016/04-2016/05</li>
</ul>
</div>
</div>
</body>
</html>
@charset "utf-8";
body{
padding: 0;
margin: 0;
font-family: "微软雅黑";
}
#main{
list-style: none;
background: #4a86e8;
height: 40px;
border-top: 5px gray solid;
margin: -5px 0 0 0 ;
padding: 0px;
text-align: center;
}
#main li{
display: inline-block;
13%;
height: 100%;
padding: 5px 0 0 0;
text-align:center;
}
#main li a
{
text-decoration: none;
color: #FFFFFF
}
#message{
margin: 10px 20px;
background: #EEE;
auto;
height: 600px;
}
#photo{
position: absolute;
margin: 10px 0 0 20px;
40%;
height: 450px;
background: red;
}
#word{
position:absolute;
top: 80%;
100%;
text-align: center;
background: red;
}
#photo ul{
position:absolute;
top: 85%;
100%;
padding: 0;
text-align: center;
}
#photo ul li{
display: inline-block;
10px;
height: 10px;
border:3px solid #ccc;border-radius:50%;
}
#list{
float: right;
margin: 10px 20px 0 0px;
50%;
height: 450px;
color: #4a86e8;
}
#list *{
margin: 0;
padding: 0;
}
#list h3{
margin: 10px 0 0 0;
}
#list hr{
padding: 0;
margin: 10px 0;
border: 3px solid #4a86e8;
90%;
}
#list ul{
position: relative;
list-style: none;
90%;
background: #FFFFFF;
height: 390px;
}
#list ul li a:link{
color: #4a86e8;
text-decoration: none;
}
#list ul li a:visited{
color: blue;
}
#list ul li a:active{
color: red;
}
#list ul .left{
float: left;
}
#list ul .right{
float: right;
}
#list ul li{
margin: 20px 10px;
95%;
}
#date{
clear: both;
}
#date ul
{
font-size: 20px;
list-style: none;
text-align: center;
padding: 0;
}
#date ul li
{
line-height: 45px;
margin: 10px 10px;
display: inline-block;
border-radius:10px;
border: 3px solid #CCC;
20%;
height: 100px;
}
.red{
color: #FFF;
background: red;
}
var dir = "./images/p";
var type = ".jpg";
var count = 2;
window.onload = function(){
var imp = document.getElementById('imp');
var t1 = window.setInterval("change(imp)", 1000);
var point = document.getElementById('point');
var number = point.getElementsByTagName('li');
for(var i=0; i<5; i++)
{
number[i].onmouseover= function(i)
{
clearInterval(t1);
imp.src=dir+this.id+type;
this.style.background="#CCC";
};
number[i].onmouseout = function ()
{
t1 = window.setInterval("change(imp)", 1000);
this.style.background="none";
};
}
change(imp);
imp.onmouseover = function()
{
clearInterval(t1);
};
imp.onmouseout = function ()
{
t1 = window.setInterval("change(imp)", 1000);
};
};
function change(imp)
{
imp.src=dir+count+type;
count++;
if(count > 5)
count = 1;
}