qpw

最新推荐文章于 2020-12-18 15:01:43 发布

weixin_45429709

最新推荐文章于 2020-12-18 15:01:43 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/weixin_45429709/article/details/103775513

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>桥牌网</title>
    <link href="main01.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="main01.js" type="text/javascript"></script>
<header>
    <div class="wrap">
        <img src="images/logo.png">
        <h3>中国桥牌网</h3>
        <input type="checkbox" id="hamber">
        <nav>
            <ul>
                <li>主页</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>
                <li><a href="#">软件</a></li>
                <li><a href="#">国际组织</a></li>
                <li><a href="#">帮助</a></li>
            </ul>

        </nav>
        <label for="hamber"><img src="images/menu.png"></label>
    </div>
</header>

<div class="container">
    <div class="wrap">
        <div class="banner1"  id="play">
            <img src="images/banner1.png" alt="1">
            <img src="images/banner2.png" alt="2">
            <img src="images/banner3.png" alt="3">
            <img src="images/banner4.png" alt="4">
            <img src="images/banner5.png" alt="5">
        </div>


        <div class="behind">
            <div class="wrap">
                <div class="box1">
                    <div class="font1"><h2>中桥讯</h2>
                    </div>
                    <ul>
                        <li><a href="#">中国桥牌协会关于申请和发放个人会员技术等级证章的通知</a><span>12.10</span></li>
                        <li><a href="#">中国桥牌协会关于2020年单位会员年度注册的通知</a><span>12.10</span></li>
                        <li><a href="#">2020-2021年度国家混合桥牌队选拔赛四强产生</a><span>12.10</span></li>
                        <li><a href="#">第二届全国青少年智力运动大会桥牌比赛补充通知</a><span>12.10</span></li>
                        <li><a href="#">2019年攀枝花欢乐阳光节全国桥牌公开赛开幕 </a><span>12.10</span></li>
                        <li><a href="#">2020-2021年度国家混合桥牌队选拔赛八强产生</a><span>12.10</span></li>
                        <li><a href="#">关于举办第三届“交能杯”全国桥牌公开赛的通知</a><span>12.10</span></li>
                        <li><a href="#">中国桥牌协会大师分英雄榜 2019-12-16~2019-12-22</a><span>12.10</span></li>
                        <li><a href="#">中国桥牌竞赛规则补充规定（2020年度）</a><span>12.10</span></li>
                        <li><a href="#">2020-2021年度国家混合桥牌队选拔赛在京开赛</a><span>12.10</span></li>
                        <div class="clearfix"></div>
                    </ul>
                    <div class="more">
                        <div class="font2">更多</div>
                        <span class="font3">搜桥讯</span>
                    </div>
                </div>
                <div class="box2">
                    <div class="font21"><h2>全国赛事</h2>
                    </div>
                    <div class="clearfix"></div>
                    <ul>
                        <li><a href="#">2020-2021年度国家混合桥牌队选拔赛</a><span>12.24</span></li>
                        <li><a href="#">2019年攀枝花欢乐阳光节全国桥牌公开赛 </a><span>12.26</span></li>
                        <li><a href="#">2020-2021年度国家男子桥牌队选拔赛</a><span>12.10</span></li>
                        <li><a href="#">国家女子桥牌集训队选拔赛</a><span>12.10</span></li>
                        <li><a href="#">2020年全国桥牌青年团体赛 </a><span>12.10</span></li>
                        <li><a href="#">第二届全国青少年智力运动大会桥牌比赛</a><span>12.10</span></li>
                        <li><a href="#">第三届“交能杯”全国桥牌公开赛</a><span>12.10</span></li>
                        <li><a href="#">第二十二届中国桥牌精英赛</a><span>12.10</span></li>
                        <div class="clearfix"></div>
                    </ul>
                    <div class="more">
                        <div class="font22">更多</div>
                        <span class="font23">搜比赛</span>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div></div>

        <div class="after">
            <div class="wrap">
                <div class="box3">
                    <div class="font31"><h2>地方桥讯</h2>
                    </div>
                    <ul>
                        <li><a href="#">关于召开深圳市桥牌协会关于召开青少年桥牌发展座谈会的通知 </a><span>12.24</span></li>
                        <li><a href="#">深圳职业技术学院全年共开设各类桥牌课程21门次</a><span>12.26</span></li>
                        <li><a href="#">2019年全国桥牌通讯系列赛(12)-四川绵阳分赛场比赛圆满落幕</a><span>12.10</span></li>
                        <li><a href="#">12月通讯赛落下帷幕，我校全年举办19场次有大师分的桥牌比赛</a><span>12.10</span></li>
                        <li><a href="#">2019年广州市桥牌等级赛瑞健（大塘）队夺得甲级冠军 </a><span>12.10</span></li>
                        <li><a href="#">南充市桥协2019庆元旦桥牌比赛赛</a><span>12.10</span></li>
                        <li><a href="#">国家级教练张邦祥为深圳青少年桥牌队员授课</a><span>12.10</span></li>
                        <li><a href="#">2020年元旦师生桥牌联谊赛</a><span>12.10</span></li>
                        <li><a href="#">“碧桂园杯”湖州市首届智力运动会顺利举行</a><span>12.10</span></li>
                        <li><a href="#">2019年怀柔区桥牌锦标赛收牌</a><span>12.10</span></li>
                        <li><a href="#">2019年“钱塘杯”桥牌公开赛进入尾声 浙江锦江和浙江新翔争夺冠军</a><span>12.10</span></li>
                        <li><a href="#">聂卫平点赞“钱塘杯”</a><span>12.10</span></li>
                        <li><a href="#">宁波恒成和刘英皓/李屹帆分别夺得2019年“钱塘杯”桥牌公开赛一副一比团体赛和VP双人赛冠军</a><span>12.10</span></li>
                        <li><a href="#">（组图）2019年“钱塘杯”桥牌公开赛男子牌手特写集锦</a><span>12.10</span></li>
                        <li><a href="#">2019年“钱塘杯”桥牌公开赛决出8强</a><span>12.10</span></li>
                        <div class="clearfix"></div>
                    </ul>
                    <div class="more">
                        <div class="font32">更多</div>
                        <span class="font33">搜桥讯</span>
                    </div>
                </div>
                <div class="box4">
                    <div class="font41"><h2>地方赛事</h2>
                    </div>
                    <ul>
                        <li><a href="#">“体彩大乐透杯”第十届金山桥牌联赛总决赛</a><span>12.24</span></li>
                        <li><a href="#">2019年河北省桥牌团体赛 </a><span>12.26</span></li>
                        <li><a href="#">2019年奉贤区“体总杯”桥牌联谊赛 </a><span>12.10</span></li>
                        <li><a href="#">2019年广西桥牌锦标赛</a><span>12.10</span></li>
                        <li><a href="#">丰台区第十二届全民健身体育节暨第六届“常鸿杯”桥牌大赛</a><span>12.10</span></li>
                        <li><a href="#">江西省上饶市第十一届桥牌锦标赛</a><span>12.10</span></li>
                        <li><a href="#">集贤桥牌俱乐部喜迎二0二0年桥牌团体赛</a><span>12.10</span></li>
                        <li><a href="#">睿钦投资俱乐部年终决赛</a><span>12.10</span></li>
                        <li><a href="#">2019安吉桥牌队式锦标赛</a><span>12.10</span></li>
                        <li><a href="#">2020迎新年兰州新区“奥特莱斯杯”公开团体赛</a><span>12.10</span></li>
                        <li><a href="#">2020年元旦珠海世创杯迎新桥牌赛</a><span>12.10</span></li>
                        <li><a href="#">山西第29届“设计杯”桥牌赛</a><span>12.10</span></li>
                        <li><a href="#">安徽省第十二届名人桥牌精英赛（第一站“电信杯”）</a><span>12.10</span></li>
                        <li><a href="#">太仓市第十一届“微笑杯”桥牌队式赛</a><span>12.10</span></li>
                        <li><a href="#">2020年第九届莞深新春交流赛</a><span>12.10</span></li>
                        <div class="clearfix"></div>
                    </ul>
                    <div class="more">
                        <div class="font42">更多</div>
                        <span class="font43">搜比赛</span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<footer>
    <div class="wrap">
        <div class="foot">© 京ICP备17039047号</div>
        <div class="foot">中国桥牌网 版权所有</div>
    </div>
</footer>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.clearfix{
    clear: both;
}
a{
    text-decoration: none;
}
.wrap{
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
header{
    /*width: 100%;*/

    background: #013d06;
}
header img{

    float: left;
}
header h3 {
    color: white;

    line-height: 60px;
    float: left;
}
header nav ul{
    min-height: 60px;
}
header nav ul li{
    float: left;
    line-height: 60px;
    margin-left: 20px;
    color: #cc5a96;

}
header nav ul li a{
    color: #8f8f8f;
}
header nav ul li a:hover{
    color: white;
}
header nav ul li:first-child{
    color: white;
}
header input[type="checkbox"]{
    z-index: -1;
}
header input[type="checkbox"],header label{
    position: absolute;
    right: 2%;
    display: none;
}

.container .banner1{
    position: relative;
    width: 1100px;
    margin: 20px 0 ;
    min-height: 462px;
    overflow: hidden;
}
.container .banner1 img{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.5s;
}

.box1{
    height: 500px;
    margin-top: 20px;

    width: 650px;
    border: 1px solid #0a263c;
    float: left;
}
.box1 .font1{
    width: 600px;
    line-height: 60px;
    padding-left: 50px;
    border: 1px solid #00bbcc;
}
.box1 ul li a,.box2 ul li a{
    color: #000;
    cursor: pointer;
}
.box1 ul li a:hover,.box2 ul li a:hover{
    text-decoration: underline;
}
.box1  ul li ,.box2  ul li {
    margin-top: 20px;
    margin-left: 20px;
    font-size: 12px;
}
.box1  ul li span,.box2  ul li span{
    float: right;
    padding-right: 10px;
}
.box1 .more .font2,.box2 .more .font22{
    width: 60px;
    margin-left: 20px;
    margin-top: 20px;
    background: #0a263c;
    color: white;
    text-align: center;
    font-size: 20px;
    display: inline-block;
    cursor: pointer;
}
.box1 .more .font3,.box2 .more .font23{
    width: 60px;
    background: #e15016;
    color: white;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
}

.box2{
    margin-top: 20px;
    height: 500px;
    margin-left: 20px;
    width: 440px;
    border: 1px solid #00f;
    float: left;
}
.box2 .font21{
    width: 390px;
    line-height: 60px;
    padding-left: 50px;
    border: 1px solid #333;
}
.behind{
    height: 510px;
}



.box3{
    height: 690px;
    margin-top: 20px;

    width: 650px;
    border: 1px solid #0a263c;
    float: left;
}
.box3 .font31{

    width: 600px;
    line-height: 60px;
    padding-left: 50px;
    border: 1px solid #00bbcc;
}
.box3 ul li a,.box4 ul li a{
    color: #000;
    cursor: pointer;
}
.box3 ul li a:hover,.box4 ul li a:hover{
    text-decoration: underline;
}

.box3  ul li ,.box4  ul li {
    margin-top: 20px;
    margin-left: 20px;
    font-size: 12px;
}
.box3  ul li span,.box4  ul li span{
    float: right;
    padding-right: 10px;
}
.box3 .more .font32,.box4 .more .font42{
    width: 60px;
    margin-left: 20px;
    margin-top: 20px;
    background: #0a263c;
    color: white;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    display: inline-block;
}
.box3 .more .font33,.box4 .more .font43{
    width: 60px;
    background: #e15016;
    color: white;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
}

.box4{
    margin-top: 20px;
    height: 690px;
    margin-left: 20px;
    width: 440px;
    border: 1px solid #00f;
    float: left;
    background: #28a745;
}
.box4 .font41{

    width: 390px;
    line-height: 60px;
    padding-left: 50px;
    border: 1px solid #333;
}
.after{
    height: 750px;
}
footer{
    /*width: 100%;*/
    height: 60px;
    background: #013d06;
}
footer .foot{
    padding-top: 5px;
    text-align: center;
    color: white;
}
@media (max-width:640px) {
    .wrap{
        width: 100%;
    }

    header{

        background: #013d06;
        min-height: 60px;
    }
    header nav{
        display: none;
    }
    header input[type="checkbox"],header label{
        display: block;
        right: 2%;
        top: 10px;
        cursor: pointer;
    }
    header input[type="checkbox"]:checked+nav{
        display: block;

    }

    header nav ul li{
        float: none;
    }

    header nav ul li:first-child{
        display: none;
    }
    .container .banner1{
        width: 100%;
    }
    .behind .box1,.behind .box2{
        float: none;
        width: 100%;
        margin: 10px auto;
    }
    .after .box3,.after .box4{
        float: none;
        width: 100%;
        margin: 10px auto;
    }
    .container .behind{
        height: 1000px;
    }
    .container .after{
        height: 1400px;
    }
}

window.onload=function () {
    // 自动从右往左轮播
    // 获取对象：获取图片
    var box1=document.getElementById("play");
    var oImgs=box1.getElementsByTagName("img");
    var len=oImgs.length;
    var imgWidth=oImgs[0].offsetWidth;
    // alert(imgWidth);
    //设置图片初始位置
    n=0;
    function  setImgsPose(i) {
        // 我
        oImgs[i].style.left=0;
        // 我之前
        for(var j=0;j<i;j++){
            oImgs[j].style.left=0-imgWidth+"px";
        }
        //我之后
        for(var j=i+1;j<len;j++){
            oImgs[j].style.left=imgWidth+"px";
        }

    }
    // alert(len);
    setImgsPose(0);
    // 绑定事件
    function move() {
        n++;
        if(n>=5)n=0;
        setImgsPose(n);
    }
    setInterval(move,1000);
}

weixin_45429709

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
qpw

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>桥牌网</title> <link href="main01.css" rel="stylesheet" type="text/css"></h...
复制链接

扫一扫