<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="css.css" rel="stylesheet"> </head> <body> <div id="header"> <div class="h_1"> <div class="h_11"></div> <a href="#" style="margin-top: 77px;position: absolute;text-decoration: none;color:#427ac8;margin-left: 15px;"> <b>2016贵阳国际马拉松赛</b> </a> <span style="margin-top: 100px;position: absolute;text-decoration: none;color:#427ac8;margin-left: 17px;font-size: 12px;"><b>GUIYANG GUOJI MALASOSONG</b></span> </div> <div class="h_2"> <span style="font-size: 40px;color:#ffffff;position: absolute;">2016贵阳国际马拉松赛</span> <span style="font-size: 25px;color:#ffffff;position: absolute;margin-top: 50px;margin-left: 10px;"><b>GUIYANG GUOJI MALASONGSAI MAM</b></span> </div> <div class="h_3"> <a href="#"><b>首页</b></a> <div id="h_4"></div> </div> <div class="h_5"> <a href="#"><b>赛事专题</b></a> <a href="#"><b>报名</b></a> <a href="#"><b>比赛成绩</b></a> <a href="#"><b>比赛照片</b></a> <a href="#"><b>赞助商</b></a> <a href="#"><b>志愿者</b></a> </div> <div class="h_6"> <input type="text" value="站内搜索"/> <button><b>提交</b></button> </div> <div class="h_7"> <a href="#" style="text-decoration: none;width:125px;line-height: 40px; color:#ffffff; margin-left: 30px;"><img src="image/3.PNG" style="position: absolute;margin-top: 0;margin-left: -70px;"/><b>登陆|注册</b></a> <a href="#" style="width:125px;line-height: 40px; color:#ffffff;margin-left: 60px;text-decoration: none"><img src="image/1.PNG" alt=""/><b>中文</b></a> <a href="#" style="text-decoration: none;width:125px;line-height: 40px; color:#ffffff;margin-left: 60px;"><img src="image/2.PNG" alt=""/><b>English</b></a> </div> </div> <div id="banner"> <div id="frame" > <a id="a1" class="num">1</a> <a id="a2" class="num">2</a> <a id="a3" class="num">3</a> <a id="a4" class="num">4</a> <a id="a5" class="num">5</a> <div id="photos" class="play"> <img src="image10/222222.jpg" > <img src="image10/333333.jpg" > <img src="image10/45.jpg" > <img src="image10/102.jpg" > <img src="image10/103.jpg" > <ul id="dis"> <li>中国标志性景点:双龙洞1</li> <li>中国标志性公园:金华园2</li> <li>中国标志性建筑:金华体育馆3</li> <li>中国标志性建筑:金华体育馆3</li> <li>中国标志性美食:方便面5</li> </ul> </div> </div> <div id="banner1"> <div id="banner1-1"> <span style="font-size: 20px;color:#ffffff;margin-left: 10px;margin-top: 40px;"><b>2016</b></span> <br/> <span style="font-size: 20px;color:#ffffff;margin-left: 10px;margin-top: 40px;"><b>贵阳国际马拉松赛</b></span> <br/> <span style="font-size: 20px;color:#ffffff;margin-left: 10px;margin-top: 40px;"><b>GUIYANG</b></span> <br/> <span style="font-size: 20px;color:#ffffff;margin-left: 10px;margin-top: 40px;"><b>MALASONGSAI</b></span> <br/> <span style="font-size: 20px;color:#ffffff;margin-left: 10px;margin-top: 40px;"><b>ZAIJINGT</b></span> </div> <div id="banner1-2"> <p><b>12月11日9:00开跑!</b></p> </div> <div id="banner1-3"> <p>倒计时:</p> </div> <div id="time"> <span id="t_d" >00天</span> <span id="t_h">00时</span> <span id="t_m">00分</span> <span id="t_s">00秒</span> </div> <div id="banner1-4"> <span style="font-size: 20px;color:#ffffff;margin-left: 20px;margin-top: 10px;display: inline-block;">天</span> <span style="font-size: 20px;color:#ffffff;margin-left: 45px;margin-top: 10px;display: inline-block;">时</span> <span style="font-size: 20px;color:#ffffff;margin-left: 45px;margin-top: 10px;display: inline-block;">分</span> <span style="font-size: 20px;color:#ffffff;margin-left: 45px;margin-top: 10px;display: inline-block;">秒</span> </div> <div id="banner1-5"> <a href="#">立即报名</a> </div> <div id="banner1-6"> <a href="#"> <img src="image10/图层%2070%20拷贝11.png" alt=""/> </a> <a href="#" style="text-decoration: none;color:#ffffff;display: inline-block;width: 130px;text-align: center;margin-top: 5px;"><b>微信报名</b></a> </div> <div id="banner1-7"> <a href="#"> <img src="image10/图层%2070%20拷贝aa.png" alt=""/> </a> <a href="#" style="text-decoration: none;color:#ffffff;display: inline-block;width: 130px;text-align: center;margin-top: 5px;"><b>下载app报名</b></a> </div> </div> </div> <div id="center"> <div class="center1"> <div class="center1-1"> <div class="center1-1-1"> <p><b>比赛公告</b></p> </div> <div class="center1-1-2"> <span style="font-size: 40px;margin: 0 0 0 10px;color:#eb7955;"><b>09</b></span> <span style="margin-left: 50px;"><b>号码布要加印选手姓名吗?号码布要加印? 号码布...</b></span> <p style="margin:0 0 0 10px;">2016-11</p> </div> <div class="center1-1-2"> <span style="font-size: 40px;margin: 0 0 0 10px;color:#eb7955;"><b>09</b></span> <span style="margin-left: 50px;"><b>号码布要加印选手姓名吗?号码布要加印? 号码布...</b></span> <p style="margin:0 0 0 10px;">2016-11</p> </div> <div class="center1-1-2"> <span style="font-size: 40px;margin: 0 0 0 10px;color:#eb7955;"><b>09</b></span> <span style="margin-left: 50px;"><b>号码布要加印选手姓名吗?号码布要加印? 号码布...</b></span> <p style="margin:0 0 0 10px;">2016-11</p> </div> <div class="center1-1-2"> <span style="font-size: 40px;margin: 0 0 0 10px;color:#eb7955;"><b>09</b></span> <span style="margin-left: 50px;"><b>号码布要加印选手姓名吗?号码布要加印? 号码布...</b></span> <p style="margin:0 0 0 10px;">2016-11</p> </div> <div class="center1-1-2"> <span style="font-size: 40px;margin: 0 0 0 10px;color:#eb7955;"><b>09</b></span> <span style="margin-left: 50px;"><b>号码布要加印选手姓名吗?号码布要加印? 号码布...</b></span> <p style="margin:0 0 0 10px;">2016-11</p> </div> <div class="ck"> <a href="#" style="text-align: center;line-height: 40px;margin-left: 25px;text-decoration: none;color:#eb7955;">查看更多</a> </div> </div> <div id="div1"> <input class="active" type="button" value="全场" /> <input class="" type="button" value="半场" /> <input class="" type="button" value="半场" /> <div style="display:block;"> <img src="image10/4.png" alt=""/> </div> <div style="background-color: red;"> <img src="image10/333.jpg" alt="" style="width: 777px;height: 500px"/> </div> <div style="background-color:green;"> <img src="image10/173.jpg" alt=""/> </div> </div> </div> <div class="h"> <div class="q"></div> <div class="w"></div> <div class="e">1 <p style="display: inline-block;font-size: 20px;width:111px;margin: 10px 0 0 15px;"><b>赛事新闻</b></p> </div> <div class="r"></div> <div class="t"></div> </div> <div class="center2">2 <div class="center2-1"> <div class="center2-1-1"></div> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"> </div> </div> <div class="center2-2">3 <div class="centerq"> <span style="font-size: 50px;color:#eb7955;margin-left: 10px;"><b>09</b></span> <span style="margin-left: 50px;color:darkslategray;"><b>贵阳国际马拉松赛贵阳国际马拉松赛...</b></span> <p style="margin:0 0 0 10px;">2016-11</p> </div> <div class="centerq"> <span style="font-size: 50px;color:#eb7955;margin-left: 10px;"><b>09</b></span> <span style="margin-left: 50px;color:darkslategray;"><b>贵阳国际马拉松赛贵阳国际马拉松赛...</b></span> <p style="margin:0 0 0 10px;">2016-11</p> </div> <div class="centerq"> <span style="font-size: 50px;color:#eb7955;margin-left: 10px;"><b>09</b></span> <span style="margin-left: 50px;color:darkslategray;"><b>贵阳国际马拉松赛贵阳国际马拉松赛...</b></span> <p style="margin:0 0 0 10px;">2016-11</p> </div> <div class="centerq"> <span style="font-size: 50px;color:#eb7955;margin-left: 10px;"><b>09</b></span> <span style="margin-left: 50px;color:darkslategray;"><b>贵阳国际马拉松赛贵阳国际马拉松赛...</b></span> <p style="margin:0 0 0 10px;">2016-11</p> </div> <div class="centerq"> <span style="font-size: 50px;color:#eb7955;margin-left: 10px;"><b>09</b></span> <span style="margin-left: 50px;color:darkslategray;"><b>贵阳国际马拉松赛贵阳国际马拉松赛...</b></span> <p style="margin:0 0 0 10px;">2016-11</p> </div> <div class="centerq"> <span style="font-size: 50px;color:#eb7955;margin-left: 10px;"><b>09</b></span> <span style="margin-left: 50px;color:darkslategray;"><b>贵阳国际马拉松赛贵阳国际马拉松赛...</b></span> <p style="margin:0 0 0 10px;">2016-11</p> </div> <div class="centerq"> <span style="font-size: 50px;color:#eb7955;margin-left: 10px;"><b>09</b></span> <span style="margin-left: 50px;color:darkslategray;"><b>贵阳国际马拉松赛贵阳国际马拉松赛...</b></span> <p style="margin:0 0 0 10px;">2016-11</p> </div> <div class="ckgd"> <a href="#" style="color:#ffffff;display: inline-block;text-align: center;font-size: 20px;margin:15px 0 0 40px;text-decoration: none;">查看更多</a> </div> </div> </div> <div class="center3"> <div class="qq"> <a href="#"> <b>领物指南</b> </a> </div> <div class="ww"> <a href="#" > <b>旅游指南</b> </a> </div> <div class="ee"> <a href="#" > <b>贵马训练营</b> </a> </div> <div class="rr"> <a href="#"> <b>招商信息</b> </a> </div> </div> </div> <div id="footer-2"> <div id="footer-21"> <span style="font-size: 20px;color:#ffffff;"><b>主办单位:中国田径协会 贵州省体育局 贵阳市人民政府</b></span> <br/> <span style="font-size: 20px;color:#ffffff;"><b>承办单位:贵阳市体育局 贵阳市旅游发展协会 贵阳市乌当区人民政府</b></span> <br/> <span style="font-size: 20px;color:#ffffff;"><b>贵阳国际马拉松组委会 @ 版权所有</b></span> <br/> <span style="font-size: 20px;color:#ffffff;"><b>技术支持:417信息技术 4栋4楼417</b></span> <br/> </div> <div id="footer-22"> <img src="image/未标题-1.gif" alt=""/> </div> </div> </body> </html> <script> window.οnlοad=function() { <script type = "text/javascript" > var sogou_ad_id = 395091; var sogou_ad_height = 90; var sogou_ad_width = 960; }; </script> <script> function GetRTime(){ var EndTime= new Date('2016/12/31 00:00:00'); var NowTime = new Date(); var t =EndTime.getTime() - NowTime.getTime(); var d=Math.floor(t/1000/60/60/24); var h=Math.floor(t/1000/60/60%24); var m=Math.floor(t/1000/60%60); var s=Math.floor(t/1000%60); document.getElementById("t_d").innerHTML = d ; document.getElementById("t_h").innerHTML = h ; document.getElementById("t_m").innerHTML = m ; document.getElementById("t_s").innerHTML = s ; } setInterval(GetRTime,0); </script> <script> window.onload = function () { var aDiv = document.getElementById('div1');//提取div1的一个元素 var aBtn = aDiv.getElementsByTagName('input');//数组 var bDiv = aDiv.getElementsByTagName('div');//数组 for (var i = 0; i < aBtn.length; i++) { aBtn[i].index = i;//存储的是一个数字 aBtn[i].onclick = function () { for (var i = 0; i < aBtn.length; i++) { aBtn[i].className = ''; bDiv[i].style.display = 'none'; } this.className = 'active'; bDiv[this.index].style.display='block'; } } } </script>
css:
body{ margin: 0; padding: 0; } #header{ width:1920px; height:190px; background-color: #427ac8; } .h_1{ width:195px; height:155px; position: absolute; margin-top: 10px; margin-left: 20px; background-image: url("image10/2.png"); } .h_11{ width:110px; height:55px; position: absolute; margin-top: 10px; margin-left: 35px; background-image: url("image10/smallLogo.png"); } .h_2{ width:410px; height:90px; position: absolute; margin-top: 35px; margin-left: 235px; } .h_3{ width:60px; height:50px; position: absolute; margin-top: 152px; margin-left: 490px; } .h_3 a{ display: inline-block; width: 60px; line-height: 30px; text-align: center; text-decoration: none; font-size: 20px; color:#ffffff; } #h_4{ width:35px; position: absolute; margin-left: 11px; border: 1px solid #38ff7c; } .h_5{ width:815px; height:50px; position: absolute; margin-top: 140px; margin-left: 600px; } .h_5 a{ display: inline-block; width:120px; height: 50px; line-height: 50px; text-decoration: none; text-align: center; font-size: 20px; color:#ffffff; transition: 0.5s; } .h_5 a:hover{ background-color: #ffffff; color: #1d3e8b; transition: 0.5s; } .h_6{ position: absolute; margin-top: 130px; margin-left: 1540px; width:320px; height:40px; } input{ width:250px; height:33px; } button{ width:57px; height:40px; margin-left: -7px; } .h_7{ width:375px; height:40px; position: absolute; margin-left: 1500px; margin-top: 10px; } #banner{ width:1920px; height:780px; position: absolute; } #frame { /*----------图片轮播相框容器----------*/ position: absolute; /*--绝对定位,方便子元素的定位*/ width: 1920px; height: 780px; overflow: hidden; /*--相框作用,只显示一个图片---*/ border-radius: 5px; } #dis {/*--绝对定位方便li图片简介的自动分布定位---*/ position: absolute; left: -50px; top: -10px; opacity: 0.5; } #dis li { display: inline-block; width: 220px; height: 20px; margin: 0 850px; float: left; text-align: center; color: #fff; border-radius: 10px; background: #000; opacity:0.8; } #photos img { float: left; width:1920px; height:780px; } #photos {/*---设置总的图片宽度--通过位移来达到轮播效果----*/ position: absolute;z-index:-1; width: calc(1920px * 5);/*---修改图片数量的话需要修改下面的动画参数*/ } .play{ animation: ma 20s ease-out infinite alternate;/**/ } @keyframes ma {/*---每图片切换有两个阶段:位移切换和静置。中间的效果可以任意定制----*/ 0%,20% { margin-left: 0; } 25%,40% { margin-left: -1920px; }/* 第一张图片的宽度 */ 45%,60% { margin-left: -3840px; }/* 第二张图片的宽度(=)在此基础上加上第一张图片的宽度。*/ 65%,80% { margin-left: -5760px; }/* 第三张图片的宽度(=)第二张图片的宽度加上第一张图片的宽度*/ 85%,100% { margin-left: -7680px; }/* 第四张图片的宽度(=)第三张图片的宽度加上第一张图片的宽度 以此类推...*/ } .num{ position:absolute;z-index:10; display:inline-block; right:10px; top:575px; border-radius:100%; background:#f00; width:25px;height:25px; line-height:25px; cursor:pointer; color:#fff; text-align:center; opacity:0.5; } .num:hover{background:#00f;} .num:hover,#photos:hover{animation-play-state:paused;} .num:nth-child(5){margin-right:877px}/*第一个小圆圈(1)与左边的距离*/ .num:nth-child(4){margin-right:912px}/*第二个小圆圈(2)与左边的距离*/ .num:nth-child(3){margin-right:947px}/*第三个小圆圈(3)与左边的距离*/ .num:nth-child(2){margin-right:982px}/*第四个小圆圈(4)与左边的距离*/ .num:nth-child(1){margin-right:1017px}/*第五个小圆圈(5)与左边的距离*/ #a1:hover ~ #photos{animation: ma1 .3s ease-out forwards;} #a2:hover ~ #photos{animation: ma2 .3s ease-out forwards;} #a3:hover ~ #photos{animation: ma3 .3s ease-out forwards;} #a4:hover ~ #photos{animation: ma4 .3s ease-out forwards;} #a5:hover ~ #photos {animation: ma5 .3s ease-out forwards;} @keyframes ma1 {0%{margin-left:-7680px;}100%{margin-left:-0px;} } @keyframes ma2 {0%{margin-left:-7680px;}100%{margin-left:-1920px;} } @keyframes ma3 {100%{margin-left:-3840px;} } @keyframes ma4 {100%{margin-left:-5760px;} } @keyframes ma5 {100%{margin-left:-7680px;} } #center{ width:1920px; height:1715px; top: 990px; background-color: rgba(169, 169, 169, 0.24); position: absolute; } #footer-2{ width:1920px; height:255px; top: 2700px; background-color: #3465aa; position: absolute; } .center1{ width:1360px; height:555px; margin:auto; margin-top: 10px; } .center1-1{ width:535px; height:555px; background-color: #d6d6d6; float: left; border-radius: 10px; } #div1{ width:777px; height:555px; float: right; border-radius: 10px; } .center1-1-1{ width:535px; height:80px; border-bottom: 1px dashed #6a6b66; } .center1-1-1 p{ display: inline-block; line-height: 80px; font-size: 25px; margin: 0 0 0 10px; } .center1-1-2{ width:535px; height:80px; border-bottom:1px dashed #6a6b66; } .center1-1-2:hover{ transition: 0.5s; background-color: #3465aa; } .ck{ width:110px; height:40px; border: 1px solid #eb7955; background-color: #ffffff; box-shadow: 2px 3px 4px #eb7955; margin: 15px 0 0 400px; transition: 0.5s; } .ck:hover{ transition: 0.5s; background-color: #0000ff; } .h{ width:1360px; height:100px; margin: auto; } .q{ width:335px; border-bottom: 2px solid #ec805e; margin-top: 48px; position: absolute; } .w{ width:275px; border-bottom: 2px solid #0d87d2; margin-top: 48px; position: absolute; margin-left: 345px; } .e{ width:111px; height:40px; position: absolute; margin-top: 30px; margin-left: 630px; } .r{ width:275px; border-bottom: 2px solid #ffad10; margin-top: 48px; position: absolute; margin-left: 751px; } .t{ width:325px; border-bottom: 2px solid #44a970; margin-top: 48px; position: absolute; margin-left: 1036px; } .center2{ width:1360px; height:710px; margin: auto; } .center2-1{ width:860px; height:710px; float: left; border-radius: 10px; } .center2-2{ width:465px; height:710px; border:1px solid saddlebrown; float: right; border-radius: 10px; } .centerq{ width:465px; height:80px; border-bottom: 1px saddlebrown solid; border-radius: 10px; } .centerq:hover{ background-color: #5ed0c8; transition: 0.5s; } .center2-1-1{ width:860px; height:550px; border:1px solid saddlebrown; background-image: url("image/图层%2086.png"); border-radius: 10px; position: absolute; } .div1{ width:200px; height:125px; border:1px solid saddlebrown; border-radius: 10px; position: absolute; margin-top: 585px; background-image: url("image/图层%2086.png"); background-size: 100% 100%; } .div2{ width:200px; height:125px; border:1px solid saddlebrown; border-radius: 10px; position: absolute; margin-top: 585px; margin-left: 220px; background-image: url("image/图层%2086.png"); background-size: 100% 100%; } .div3{ width:200px; height:125px; border:1px solid saddlebrown; border-radius: 10px; position: absolute; margin-top: 585px; margin-left: 440px; background-image: url("image/图层%2086.png"); background-size: 100% 100%; } .div4{ width:200px; height:125px; border:1px solid saddlebrown; border-radius: 10px; position: absolute; margin-top: 585px; margin-left: 660px; background-image: url("image/图层%2086.png"); background-size: 100% 100%; } .ckgd{ width:160px; height:55px; background-color: #eb7955; margin-top: 40px; margin-left: 280px; border-radius: 10px; transition: 0.5s; } .ckgd:hover{ background-color: #0081d0; transition: 0.5s; } .center3{ width:1360px; height:310px; margin: auto; } .qq{ width:325px; height:205px; margin-top: 50px; position: absolute; background-color: #eb7955; border-radius: 10px; } .ww{ width:325px; height:205px; margin-top: 50px; position: absolute; background-color: #0081d0; border-radius: 10px; margin-left: 345px; } .ee{ width:325px; height:205px; margin-top: 50px; position: absolute; background-color:#ffa903 ; border-radius: 10px; margin-left: 690px; } .rr{ width:325px; height:205px; margin-top: 50px; position: absolute; background-color: #3aa468; border-radius: 10px; margin-left: 1035px; } .qq a{ display: inline-block; line-height: 205px; font-size: 40px; width:325px; color:#ffffff; text-align: center; text-decoration: none; transition: 0.3s; } .qq a:hover{ font-size: 30px; transition: 0.3s; } .ww a{ display: inline-block; line-height: 205px; font-size: 40px; width:325px; color:#ffffff; text-align: center; text-decoration: none; transition: 0.3s; } .ww a:hover{ font-size: 30px; transition: 0.3s; } .ee a{ display: inline-block; line-height: 205px; font-size: 40px; width:325px; color:#ffffff; text-align: center; text-decoration: none; transition: 0.3s; } .ee a:hover{ font-size: 30px; transition: 0.3s; } .rr a{ display: inline-block; line-height: 205px; font-size: 40px; width:325px; color:#ffffff; text-align: center; text-decoration: none; transition: 0.3s; } .rr a:hover{ font-size: 30px; transition: 0.3s; } #banner1{ width:1360px; height:175px; margin: auto; border-radius: 10px; margin-top: 605px; background-image: url("image10/3.jpg.png"); } #banner1-1{ width:200px; height:125px; margin-top: 40px; position: absolute; } #banner1-2{ width:350px; height:50px; margin-top: 20px; position: absolute; margin-left: 270px; } #banner1-2 p{ display: inline-block; line-height: 50px; text-align: center; font-size: 35px; margin: 0; color:#ffffff; } #banner1-3{ width:140px; height:50px; margin-top: 117px; position: absolute; margin-left: 170px; } #banner1-3 p{ display: inline-block; line-height: 50px; text-align: center; font-size: 35px; margin: 0; color:#0d72a9; } #time{ width:275px; height:60px; margin-top: 110px; position: absolute; margin-left: 300px; } #t_d{ width:60px; height:60px; position: absolute; background-color: #ffffff; } #t_h{ width:60px; height:60px; position: absolute; margin-left: 70px; background-color: #ffffff; } #t_m{ width:60px; height:60px; position: absolute; margin-left: 140px; background-color: #ffffff; } #t_s{ width:60px; height:60px; position: absolute; margin-left: 210px; background-color: #ffffff; } #time span{ font-size: 30px; text-align: center; line-height: 60px; color:#0d72a9; } #banner1-4{ position: absolute; width:270px; height:40px; margin-left: 300px; margin-top:70px; } #banner1-5{ position: absolute; margin-left: 730px; margin-top: 60px; width:235px; height:70px; border: 2px solid #ffffff; box-shadow: 3px 4px 5px #ffffff; transition: 0.5s; border-radius: 5px; } #banner1-5:hover{ background-color: #bf9d57; transition: 0.5s; box-shadow: 3px 4px 5px #1a201e; } #banner1-5 a{ display: inline-block; text-decoration: none; line-height: 70px; text-align: center; color:#ffffff; width:235px; font-size: 30px; } #banner1-6{ position: absolute; margin-top: 15px; margin-left: 1020px; width:130px; height:160px; } #banner1-7{ position: absolute; margin-top: 15px; margin-left: 1164px; width:130px; height:160px; } #div1 .active { } #div1 div { width: 777px; height: 500px; display: none; } #div1 input{ width:50px; height:30px; } #footer-21{ width:700px; height:100px; position: absolute; margin-top: 65px; margin-left: 280px; } #footer-22{ width:300px; height:100px; position: absolute; margin-top: 45px; margin-left: 1155px; }