首页 > 代码库 > index

index

2024-10-10 11:00:02   218人阅读

<!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=http://www.mamicode.com/dir+this.id+type;"#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=http://www.mamicode.com/dir+count+type;>

 

index


联系
我们