前端html+css+js源码

最新推荐文章于 2024-06-10 22:16:06 发布

chouherou4683

最新推荐文章于 2024-06-10 22:16:06 发布

阅读量690

点赞数

原文链接：https://my.oschina.net/u/3383360/blog/866062

版权

<!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>主办单位：中国田径协会&nbsp;贵州省体育局&nbsp;贵阳市人民政府</b></span>
        <br/>
        <span style="font-size: 20px;color:#ffffff;"><b>承办单位：贵阳市体育局&nbsp;贵阳市旅游发展协会&nbsp;贵阳市乌当区人民政府</b></span>
        <br/>
        <span style="font-size: 20px;color:#ffffff;"><b>贵阳国际马拉松组委会&nbsp;@&nbsp;版权所有</b></span>
        <br/>
        <span style="font-size: 20px;color:#ffffff;"><b>技术支持：417信息技术&nbsp;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;
}

转载于:https://my.oschina.net/u/3383360/blog/866062

chouherou4683

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
前端html+css+js源码

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link href="css.c...
复制链接

扫一扫