标签：round styles splay ext on() :active use enter tag
<!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;
width: 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;
width: auto;
height: 600px;
}
#photo{
position: absolute;
margin: 10px 0 0 20px;
width: 40%;
height: 450px;
background: red;
}
#word{
position:absolute;
top: 80%;
width: 100%;
text-align: center;
background: red;
}
#photo ul{
position:absolute;
top: 85%;
width: 100%;
padding: 0;
text-align: center;
}
#photo ul li{
display: inline-block;
width: 10px;
height: 10px;
border:3px solid #ccc;border-radius:50%;
}
#list{
float: right;
margin: 10px 20px 0 0px;
width: 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;
width: 90%;
}
#list ul{
position: relative;
list-style: none;
width: 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;
width: 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;
width: 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;
}
标签：round styles splay ext on() :active use enter tag
原文地址：http://www.cnblogs.com/lixiansheng/p/7067611.html
