HTML5与CSS实现神途官网

LukaJ

已于 2022-06-26 13:40:43 修改

阅读量728

点赞数

分类专栏： htlm5 文章标签： html5 css

于 2022-06-26 13:09:23 首次发布

本文链接：https://blog.csdn.net/LukaJQ/article/details/125469060

版权

htlm5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用HTML5和CSS技术来创建神途官网，涵盖了JavaScript部分的功能实现，包括最新通知的滚动展示，以及游戏截图的左右滚动切换效果。CSS部分则讲述了如何运用样式来美化和布局网站。

摘要由CSDN通过智能技术生成

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿制神途官网</title>
    <link rel="stylesheet" href="uishentu.css">
</head>
    <body class="body-bg">
        <header>
            <div class="header-div">
                <ul class="header-ul">
                    <li class="header-li">
                        <span class="cn">首页</span>
                        <br>
                        <span class="en">HOME</span>
                    </li>
                    <li class="header-li">
                        <span class="cn">新闻中心</span>
                        <br>
                        <span class="en">NEWS</span>
                    </li>
                    <li class="header-li">
                        <span class="cn">账号注册</span>
                        <br>
                        <span class="en">REGISTER</span>
                    </li>
                    <li class="header-li" height="75px">
                        <div>
                            <img class="img-logo1" src="./resource/images/bannerlogo.png" alt="logo">
                        </div>
                    </li>
                    <li class="header-li">
                        <span class="cn">充值中心</span>
                        <br>
                        <span class="en">RECHARGE</span>
                    </li>
                    <li class="header-li">
                        <span class="cn">下载游戏</span>
                        <br>
                        <span class="en">DOWNLOAD</span>
                    </li>
                    <li class="header-li">
                        <span class="cn">联系我们</span>
                        <br>
                        <span class="en">CONTACT</span>
                    </li>
                </ul>
            </div>
            <div>
                    <video autoplay muted loop class="shentu-div">
                        <source src="./resource/video/shentu.mp4">
                    </video>
            </div>
        </header>
        <!-- 内容的容器 -->
    <main class="content">
        <!-- 内容 -->
        <!-- 有背景图（游戏角色）的元素 -->
        <div class="ct-logo">
            <img class="img1" src="./resource/images/bannertxt2.png" alt="">
            <img class="img2" src="./resource/images/bannertxt1.png" alt="">
            <img class="img3" src="./resource/images/bannerlogo.png" alt="">
        </div>
        <!-- 公告和职业 -->
        <div class="ct-news">
            <!-- 新闻，职业， 技能， -->
            <!-- 不可以放版权信息相关的 -->
            <!-- 最新公告 -->
            <div class="news">
                <img src="./resource/images/icon-news.png" alt="">
                <span class="roll">
                    <span style="cursor:pointer ;" class="rollbox">
                        <li class="item">&nbsp最新公告111111111111111111111111111111</li>
                        <li class="item">&nbsp最新公告222222222222222222222222222222</li>
                        <li class="item">&nbsp最新公告333333333333333333333333333333</li>
                    </span>
                </span>
                <span class="right">
                    查看详情>>
                </span>
            </div>

            <!-- 职业介绍 -->
            <!-- 2行，每行3个元素 -->
            <div class="row">
                <div class="card">
                    <!-- 图片 -->
                    <img class="float-right" src="./resource/images/icon-new.gif" alt="" >
                    <div class="image1">
                        <!-- 添加二维码 -->
                        <div class="qrcode">
                            <span>扫描二维码 下载神途手游</span>
                            <br>
                            <img class="img1"  src="./resource/images/fixed-code.png" alt="">
                        </div>
                    </div>
                    <div class="wrapper">
                        <!-- 职业名字 -->
                        <div class="title">
                            神途单职业
                        </div>
                        <!-- 开区时间 -->
                        <div class="info">
                            开区时间：（10:00 16:00 20:00)
                        </div>
                        <!-- 三只松鼠 -->
                        <div class="btn">
                            <button type="button">进入官网</button>
                            <button type="button">微端下载</button>
                            <button type="button">手游下载</button>
                        </div>
                    </div>
                    
                </div>
                <div class="card">
                    <img class="float-right" src="./resource/images/icon-hot.gif" alt="" >
                    <!-- 图片 -->
                    <div class="image2">
                        <!-- 添加二维码 -->
                        <div class="qrcode">
                            <span>扫描二维码 下载神途手游</span>
                            <br>
                            <img class="img1"  src="./resource/images/fixed-code.png" alt="">
                        </div>
                    </div>
                    <div class="wrapper">
                        <!-- 职业名字 -->
                        <div class="title">
                            神途单职业
                        </div>
                        <!-- 开区时间 -->
                        <div class="info">
                            开区时间：（10:00 16:00 20:00)
                        </div>
                        <!-- 三只松鼠 -->
                        <div class="btn">
                            <button type="button">进入官网</button>
                            <button type="button">微端下载</button>
                            <button type="button">手游下载</button>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <!-- 图片 -->
                    <div class="image3">
                        <!-- 添加二维码 -->
                        <div class="qrcode">
                            <span>扫描二维码 下载神途手游</span>
                            <br>
                            <img class="img1"  src="./resource/images/fixed-code.png" alt="">
                        </div>
                    </div>
                    <div class="wrapper">
                        <!-- 职业名字 -->
                        <div class="title">
                            神途单职业
                        </div>
                        <!-- 开区时间 -->
                        <div class="info">
                            开区时间：（10:00 16:00 20:00)
                        </div>
                        <!-- 三只松鼠 -->
                        <div class="btn">
                            <button type="button">进入官网</button>
                            <button type="button">微端下载</button>
                            <button type="button">手游下载</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="card">
                    <!-- 图片 -->
                    <div class="image1">
                        <!-- 添加二维码 -->
                        <div class="qrcode">
                            <span>扫描二维码 下载神途手游</span>
                            <br>
                            <img class="img1"  src="./resource/images/fixed-code.png" alt="">
                        </div>
                    </div>
                    <div class="wrapper">
                        <!-- 职业名字 -->
                        <div class="title">
                            神途单职业
                        </div>
                        <!-- 开区时间 -->
                        <div class="info">
                            开区时间：（10:00 16:00 20:00)
                        </div>
                        <!-- 三只松鼠 -->
                        <div class="btn">
                            <button type="button">进入官网</button>
                            <button type="button">微端下载</button>
                            <button type="button">手游下载</button>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <!-- 图片 -->
                    <div class="image2">
                        <!-- 添加二维码 -->
                        <div class="qrcode">
                            <span>扫描二维码 下载神途手游</span>
                            <br>
                            <img class="img1"  src="./resource/images/fixed-code.png" alt="">
                        </div>
                    </div>
                    <div class="wrapper">
                        <!-- 职业名字 -->
                        <div class="title">
                            神途单职业
                        </div>
                        <!-- 开区时间 -->
                        <div class="info">
                            开区时间：（10:00 16:00 20:00)
                        </div>
                        <!-- 三只松鼠 -->
                        <div class="btn">
                            <button type="button">进入官网</button>
                            <button type="button">微端下载</button>
                            <button type="button">手游下载</button>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <!-- 图片 -->
                    <div class="image6">
                        <!-- 添加二维码 -->
                        <div class="qrcode">
                            <span>扫描二维码 下载神途手游</span>
                            <br>
                            <img class="img1"  src="./resource/images/fixed-code.png" alt="">
                        </div>
                    </div>
                    <div class="wrapper">
                        <!-- 职业名字 -->
                        <div class="title">
                            神途单职业
                        </div>
                        <!-- 开区时间 -->
                        <div class="info">
                            开区时间：（10:00 16:00 20:00)
                        </div>
                        <!-- 三只松鼠 -->
                        <div class="btn">
                            <button type="button">进入官网</button>
                            <button type="button">微端下载</button>
                            <button type="button">手游下载</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 更多版本 -->
            <div class="ct-version">
                <img src="./resource/images/list-more.png" alt="">
                <span style="cursor:pointer;">
                    查看更多版本
                </span>
            </div>

            <!-- 新闻中心 -->
            <div class="news-report">
                <div class="img-report">
                    <!-- 图片展示 -->
                    <img src="./resource/images/img550x310.jpg" alt="">
                </div>
                <div class="text-report">
                    <div class="span-title">
                        <span class="span1">新闻公告</span>
                        <span class="span1">游戏特色</span>
                        <span class="span1">开合区规则</span>
                        <br>
                        <div class="intro-div">
                            <span>推荐:</span>
                            <p>[无文案内容]请根据实际需要右键打开方式，选择软件编辑index.html中的文字</p>
                        </div>
                        <div class="list-div">
                            <ul>
                                <li>[无文案内容]请根据实际需要右键打开方式，选择软件编辑index.html中的文字</li>
                                <li>[无文案内容]请根据实际需要右键打开方式，选择软件编辑index.html中的文字 <span class="right">08-18</span></li>
                                <li>[无文案内容]请根据实际需要右键打开方式，选择软件编辑index.html中的文字 <span class="right">08-18</span></li>
                                <li>[无文案内容]请根据实际需要右键打开方式，选择软件编辑index.html中的文字 <span class="right">08-18</span></li>
                                <li>[无文案内容]请根据实际需要右键打开方式，选择软件编辑index.html中的文字 <span class="right">08-18</span></li>
                                <li>[无文案内容]请根据实际需要右键打开方式，选择软件编辑index.html中的文字 <span class="right">08-18</span></li>
                            </ul>
                        </div>
                    </div>                 
                </div>
            </div>
            <!-- 视频中心 -->
            <div class="video-div">
                <div class="span-video">
                    <span class="cn">视频中心</span>
                    <span class="en">Videolist</span>
                    <button class="span-right">
                        <img src="./resource/images/btn-next.png" alt="">
                    </button>
                    <button class="span-right">
                        <img src="./resource/images/btn-prev.png" alt="">
                    </button>
                </div>
                <div class="video-img">
                    <ul class="video-ul">
                        <li>
                            <div class="li-div">
                                <img src="./resource/images/video-img285x160-1.jpg" alt="">
                                <p>图片详细</p>
                            </div>
                        </li>
                        <li>
                            <div class="li-div">
                                <img src="./resource/images/video-img285x160-2.jpg" alt="">
                                <p>图片详细</p>
                            </div>
                        </li>
                        <li>
                            <div class="li-div">
                                <img src="./resource/images/video-img285x160-1.jpg" alt="">
                                <p>图片详细</p>
                            </div>
                        </li>
                        <li>
                            <div class="li-div">
                                <img src="./resource/images/video-img285x160-2.jpg" alt="">
                                <p>图片详细</p>
                            </div>
                        </li>
                    </ul>
                    </div>
            </div>
            <!-- 装备展示  -->
            <div class="show-equipment">
                <div class="eq-title">
                    <span class="cn">装备展示</span>
                    <span class="en">Equipment</span>
                </div>
                <div class="eq-img">
                    <div class="item">
                        <img src="./resource/images/img550x309-1.gif" alt="">
                    </div>
                    <div class="item">
                        <img src="./resource/images/img550x309-2.gif" alt="">
                    </div>
                    <div class="item">
                        <img src="./resource/images/img550x309-3.gif" alt="">
                    </div>
                    <div class="item">
                        <img src="./resource/images/img550x309-4.gif" alt="">
                    </div>
                </div>
            </div>
            <!-- 游戏截图 -->
            <div class="screen-game">
                <div class="scshot">
                    <span class="cn">游戏截图</span>
                    <span class="en">Screenshot</span>
                </div>
                <div class="screenshot-div">
                    <div class="img1">
                        <img  src="./resource/images/btn-prev.png" alt="prev">
                    </div>
                    <div class="box">
                        <div class="wrapper">
                            <div class="img2">
                                <img src="./resource/images/jt01.gif" alt="">
                            </div>
                            <div class="img2">
                                <img src="./resource/images/jt02.gif" alt="">
                            </div>
                            <div class="img2">
                                <img src="./resource/images/jt03.gif" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="img3">
                        <img  src="./resource/images/btn-next.png" alt="next">
                    </div>
                </div>
            </div>
        </div>
        </div>
        <aside class="aside-div">
            <div class="all-content">
            <div class="aside-QQ">
            </div>
            <div class="aside-QQkefu">
                <ul>
                    <li>
                        <span class="cn">QQ客服1</span>
                        <div class="img">
                            <img src="./resource/images/fixed-qq1.png">
                        </div>
                        
                    </li>
                    <li>
                        <span class="cn">QQ客服2</span>
                        <div class="img">
                            <img src="./resource/images/fixed-qq1.png">
                        </div>
                    </li>
                </ul>
            </div>
            <div class="aside-QQqun">
            </div>
            <div class="aside-group">
                <ul>
                    <li>
                        <span class="cn">玩家交流群1</span>
                        <div class="img">
                            <img src="./resource/images/fixed-qq2.png">
                        </div>
                    </li>
                    <li>
                        <span class="cn">玩家交流群2</span>
                        <div>
                            <img src="./resource/images/fixed-qq2.png">
                        </div>
                    </li>
                    <li>
                        <span class="cn">玩家交流群3</span>
                        <div>
                            <img src="./resource/images/fixed-qq2.png">
                        </div>
                    </li>
                    <li>
                        <span class="cn">玩家交流群4</span>
                        <div>
                            <img src="./resource/images/fixed-qq2.png">
                        </div>
                    </li>
                </ul>
            </div>
            <div class="aside-offac">
                <span class="cn">
                    <strong>关注微信公众号</strong>
                </span>
                    <img class="img" src="./resource/images/fixed-code.png">
            </div>
            <div class="aside-acqrcode">
            </div>
            </div>
        </aside>
    </main>

    <footer class="footer-div">
        <div class="notice">
            <div class="footer-logo">
            </div>
            <div class="footer-content">
                <span class="yellow">
                    健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适当游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。
                </span>
                <br>
                <span class="yellow">
                    适龄提示：本游戏适合18岁以上的成年人进入。请您确认已如实进行实名认证，为了您的健康，请合理控制游戏时间，适度娱乐，理性消费。
                </span>
                <br>
                <span class="white">
                    著作权人：杭州神兔网络科技有限公司 | 出版单位：北京科海电子出版社 | 审批问号：新广初审[2022]2069号 | 出版物号：ISBN 978-978-458269858
                </span>
                <br>
                <span class="white">
                    网络文化经营许可证：浙网文(2019)0606-222号 | 增值电信业务许可证：浙B2-123582854 | ICP备案：浙ICP备12597号
                </span>
            </div>
        </div>
    </footer>

    <div class="player">
        <img src="./resource/images/m.png" alt="">
        <audio class="audio-play" src="./resource/audio/music.mp3"></audio>
    </div>
</body>
</html>

JavaScript部分

最新通知滚动

游戏截图部分左右滚动切换图片

</script>
    <script type="text/javascript">
        let el=document.querySelector('.roll .rollbox');
        _animation(el)
        // 隔一段时间移动一行
        // 封装功能
        // 功能描述：移动一个行高
        function _animation(elem){
        var offset=0;
        // var height=60;
        // 使用定时器
        // 每200毫秒执行一次
        var tim=setInterval(function(){
            offset+=5;
            elem.style.top=`-${offset}px`;
                if(offset == 40){
             // 当offset达到一定程度的时候停止
            // clearInterval(tim);
            offset=0;
            }
            },250)
        }

    // audio
    var audio_play = document.querySelector(".player .audio-play")
    var audio_box = document.querySelector(".player")
    audio_box.addEventListener("click",function(){
        if(audio_play.paused){
            audio_play.play();
        }
        else{
            audio_play.pause();
        }
    })


// 滚动轮播图
var el2 = document.querySelector(".content .screen-game .screenshot-div .box .wrapper")
console.log("el2 =  ", el2)

var t2 = setInterval(function(){
    // 01-复制第一行元素，加到最后面
    console.log("第一个元素", el.children[0])
    // 复制元素
    var newline = el2.children[0].cloneNode(true)
    // 把复制的元素加到最后面
    el2.append(newline)
    // 02-滚动到显示第二张
    // 1100 是元素的宽度
    _animation_left(el2, 1100)

}, 3000)    // 数字控制每次滚动的间隔

function _animation_left(elem , iLeft){
    var offset = 0 ;

    // 使用定时器
    var tim = setInterval( function(){
        offset += 150
        // 修改 left 属性模拟滚动 -150px
        elem.style.left = `-${offset }px`
        if( offset > iLeft ){
            // 当offset  达到一定程度的时候停止
            clearInterval( tim )
            // 停止的时候，把已经滚动完的元素删除掉
            elem.children[0].remove()
            elem.style.left = `-${0}px`
        }
    }, 200)  // 每20毫秒执行一次
}

        </script>

CSS部分

.body-bg {
  background-image: url(./resource/images/bg-body.jpg);
  background-repeat: repeat-y;
  width: auto;
  padding: 0 0;
  margin: 0;
}

.header-div {
  position: fixed;
  width: 1903px;
  height: 80px;
  margin: 0;
  left: 0;
  z-index: 666;
  /* margin-bottom: 0; */
  background-color: #1e363a80;
  text-align: center;
}

.header-div .header-ul {
  float: left;
  width: 1400px;
  list-style: none;
  margin-right: 0px;
  margin-left: 397px;
  margin-top: 20px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.header-div .header-ul .header-li {
  float: left;
  height: 60px;
  width: 150px;
  margin-left: 0;
}

.header-div .header-ul .header-li .cn {
  font-size: 20px;
  color: white;
}

.header-div .header-ul .header-li .cn:hover {
  cursor: pointer;
  color: #12454e;
}

.header-div .header-ul .header-li .en {
  font-size: 12px;
  color: #064742;
}

.header-div .header-ul .header-li .en:hover {
  cursor: pointer;
  color: #34eea7;
}

.header-div .header-ul .header-li .img-logo1 {
  height: 89px;
  position: absolute;
  top: 12px;
  left: 903px;
}

.shentu-div {
  width: 1903px;
  height: 972px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -99;
}

body .content .ct-logo .img1 {
  left: 22%;
  top: 130px;
  position: relative;
  width: 10%;
}

body .content .ct-logo .img2 {
  position: relative;
  right: -50%;
  top: 420px;
  width: 22%;
}

body .content .ct-logo .img3 {
  position: absolute;
  top: 20%;
  right: 22%;
  width: 15%;
}

body .content .ct-news {
  padding: 0px 14%;
  height: 500px;
  top: 480px;
  position: relative;
}

body .content .ct-news .news {
  line-height: 22px;
  background-color: rgba(255, 255, 255, 0.575);
  padding: 5px 10px;
}

body .content .ct-news .news .roll {
  display: inline-block;
  overflow: hidden;
  height: 25px;
}

body .content .ct-news .news .roll .rollbox {
  position: relative;
}

body .content .ct-news .news .roll .rollbox .item {
  line-height: 22px;
  list-style: none;
}

body .content .ct-news .news img {
  top: 5px;
  position: relative;
}

body .content .ct-news .news .right {
  float: right;
  color: #7eb4b1;
  cursor: pointer;
}

body .content .ct-news .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 20px;
}

body .content .ct-news .row .card {
  width: 30%;
  border: 1px solid #b1ddd6;
  text-align: center;
  position: relative;
  background-color: white;
}

body .content .ct-news .row .card .float-right {
  position: absolute;
  right: -6px;
  top: 0;
}

body .content .ct-news .row .card .image1 {
  background-image: url("./resource/images/img386x200-1.jpg");
  height: 250px;
  background-size: cover;
}

body .content .ct-news .row .card .image1:hover .qrcode {
  display: block;
}

body .content .ct-news .row .card .image1 .qrcode {
  background-color: #6cc9c488;
  height: 250px;
  display: none;
}

body .content .ct-news .row .card .image1 .qrcode span {
  text-align: center;
  font-size: 20px;
  line-height: -2px;
  color: aliceblue;
}

body .content .ct-news .row .card .image1 .qrcode .img1 {
  padding: 10px;
  width: 180px;
  height: 180px;
  margin-top: 1px;
}

body .content .ct-news .row .card .image2 {
  background-image: url("./resource/images/img386x200-2.jpg");
  height: 250px;
  background-size: cover;
}

body .content .ct-news .row .card .image2:hover .qrcode {
  display: block;
}

body .content .ct-news .row .card .image2 .qrcode {
  background-color: #6cc9c488;
  height: 250px;
  display: none;
}

body .content .ct-news .row .card .image2 .qrcode span {
  text-align: center;
  font-size: 20px;
  line-height: -2px;
  color: aliceblue;
}

body .content .ct-news .row .card .image2 .qrcode .img1 {
  padding: 10px;
  width: 180px;
  height: 180px;
  margin-top: 1px;
}

body .content .ct-news .row .card .image3 {
  background-image: url("./resource/images/img386x200-3.jpg");
  height: 250px;
  background-size: cover;
}

body .content .ct-news .row .card .image3:hover .qrcode {
  display: block;
}

body .content .ct-news .row .card .image3 .qrcode {
  background-color: #6cc9c488;
  height: 250px;
  display: none;
}

body .content .ct-news .row .card .image3 .qrcode span {
  text-align: center;
  font-size: 20px;
  line-height: -2px;
  color: aliceblue;
}

body .content .ct-news .row .card .image3 .qrcode .img1 {
  padding: 10px;
  width: 180px;
  height: 180px;
  margin-top: 1px;
}

body .content .ct-news .row .card .image6 {
  background-image: url("./resource/images/img386x200-1.jpg");
  height: 250px;
  background-size: cover;
}

body .content .ct-news .row .card .image6:hover .qrcode {
  display: block;
}

body .content .ct-news .row .card .image6 .qrcode {
  background-color: #6cc9c488;
  height: 250px;
  display: none;
}

body .content .ct-news .row .card .image6 .qrcode span {
  text-align: center;
  font-size: 20px;
  line-height: -2px;
  color: aliceblue;
}

body .content .ct-news .row .card .image6 .qrcode .img1 {
  padding: 10px;
  width: 180px;
  height: 180px;
  margin-top: 1px;
}

body .content .ct-news .row .card .wrapper {
  padding: 20px 0;
}

body .content .ct-news .row .card .wrapper .title {
  font-size: 28px;
  font-weight: 700;
}

body .content .ct-news .row .card .wrapper .info {
  color: #a3a3a3;
}

body .content .ct-news .row .card .wrapper .btn {
  padding: 10px 0;
}

body .content .ct-news .row .card .wrapper .btn button {
  background-color: #2e7f82;
  color: white;
  padding: 5px 10px;
  outline: none;
  border: none;
}

body .content .ct-news .row .card .wrapper .btn button:hover {
  cursor: pointer;
  background-color: #54b17ba4;
}

body .content .ct-news .ct-version {
  line-height: 50px;
  background-color: aliceblue;
  margin-top: 20px;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  top: 5px;
  left: 5px;
}

body .content .ct-news .ct-version img {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 5px;
}

body .content .ct-news .ct-version span {
  position: absolute;
  font-size: 20px;
  left: 894px;
  color: #7eb4b1;
  text-align: center;
}

body .content .ct-news .news-report {
  margin-top: 30px;
  width: 1372px;
  height: 450px;
  float: left;
}

body .content .ct-news .news-report .img-report {
  width: 590px;
  height: 362px;
  margin-top: 20px;
  background-image: url(./resource/images/bg-imgbox590x362.png);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  float: left;
}

body .content .ct-news .news-report .img-report img {
  width: 480px;
  height: 300px;
  padding: 30px 52px;
}

body .content .ct-news .news-report .text-report {
  width: 757px;
  height: 362px;
  margin-left: 20px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

body .content .ct-news .news-report .text-report .span-title {
  border-bottom: 1px solid #b1ddd6;
  height: 45px;
}

body .content .ct-news .news-report .text-report .span-title .span1 {
  font-size: 20px;
  color: #2e7f82;
  padding: 10px 15px;
  display: inline-block;
}

body .content .ct-news .news-report .text-report .span-title .span1:active {
  background-color: #2e7f82;
  color: white;
}

body .content .ct-news .news-report .text-report .intro-div {
  width: 757px;
  height: 30px;
  background-color: #65b3af4d;
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

body .content .ct-news .news-report .text-report .intro-div span {
  width: 50px;
  padding-left: 5px;
  background-color: white;
  font-size: 18px;
  line-height: 18px;
  color: #2e7f82;
  padding-top: 5px;
}

body .content .ct-news .news-report .text-report .intro-div span:active {
  background-color: #2e7f82;
  color: white;
}

body .content .ct-news .news-report .text-report .intro-div p {
  font-size: 13px;
  margin-top: 5px;
  color: #2e7f82;
}

body .content .ct-news .news-report .list-div {
  width: 732px;
  height: 250px;
  margin-top: 5px;
  float: left;
}

body .content .ct-news .news-report .list-div ul {
  padding: 0;
}

body .content .ct-news .news-report .list-div ul li {
  border-bottom: 1px solid #b1ddd6;
  list-style: none;
  font-size: 15px;
  margin-top: 10px;
  line-height: 36px;
  color: #2e7f82;
}

body .content .ct-news .news-report .list-div ul li .right {
  font-size: 15px;
  line-height: 36px;
  color: #2e7f82;
  float: right;
}

body .content .video-div {
  width: 1372px;
  height: 280px;
  margin-top: 10px;
  float: left;
}

body .content .video-div .span-video .span-right {
  float: right;
  margin: 0px 7px;
}

body .content .video-div .span-video .span-right img {
  width: 15px;
  height: 30px;
}

body .content .video-div .span-video .cn {
  font-size: 30px;
  color: #2e7f82;
  font-weight: 600;
}

body .content .video-div .span-video .en {
  font-size: 15px;
  color: #2e7f82;
  margin-left: 5px;
}

body .content .video-div .span-video::before {
  content: "";
  width: 10px;
  height: 30px;
  top: 5px;
  display: inline-block;
  background-color: #2e7f82;
  position: relative;
  margin-right: 15px;
}

body .content .video-div .video-img {
  width: 1422px;
  height: 190px;
  margin-top: 20px;
}

body .content .video-div .video-img .video-ul {
  padding: 0;
}

body .content .video-div .video-img .video-ul li {
  list-style: none;
  display: inline;
  margin-left: 30px;
}

body .content .video-div .video-img .video-ul li .li-div {
  width: 285px;
  height: 190px;
  float: left;
  padding: 0;
  margin-left: 40px;
}

body .content .video-div .video-img .video-ul li .li-div p {
  font-size: 15px;
  line-height: 25px;
  width: 285px;
  margin: 0;
  padding: 5px 0;
  color: white;
  text-align: center;
  background-color: #2e7f82;
}

body .content .show-equipment .eq-title .cn {
  font-size: 30px;
  color: #2e7f82;
  font-weight: 600;
}

body .content .show-equipment .eq-title .en {
  font-size: 15px;
  color: #2e7f82;
  margin-left: 5px;
}

body .content .show-equipment .eq-title::before {
  content: "";
  width: 10px;
  height: 30px;
  top: 5px;
  display: inline-block;
  background-color: #2e7f82;
  position: relative;
  margin-right: 15px;
}

body .content .show-equipment .eq-img {
  width: 1422px;
  height: 750px;
}

body .content .show-equipment .eq-img .item {
  float: left;
  width: 590px;
  height: 362px;
  margin: 18px 40px;
  display: inline;
  background-image: url(./resource/images/bg-imgbox590x362.png);
}

body .content .show-equipment .eq-img .item img {
  padding: 30px 18px;
}

body .content .screen-game {
  width: 1372px;
  height: 730px;
  margin: 20px 0;
}

body .content .screen-game .scshot {
  float: left;
}

body .content .screen-game .scshot .cn {
  font-size: 30px;
  color: #2e7f82;
  font-weight: 600;
}

body .content .screen-game .scshot .en {
  font-size: 15px;
  color: #2e7f82;
  margin-left: 5px;
}

body .content .screen-game .scshot::before {
  content: "";
  width: 10px;
  height: 30px;
  top: 5px;
  display: inline-block;
  background-color: #2e7f82;
  position: relative;
  margin-right: 15px;
}

body .content .screen-game .screenshot-div {
  width: 1200px;
  height: 690px;
  background-image: url(./resource/images/bg-jietu-imgbox.png);
  margin-top: 10px;
  margin-left: -3px;
  float: left;
  left: 50px;
  position: relative;
}

body .content .screen-game .screenshot-div .img1 {
  float: left;
  width: 50px;
  height: 50px;
  position: relative;
  left: 0px;
  top: 260px;
}

body .content .screen-game .screenshot-div .box {
  width: 1100px;
  height: 620px;
  position: relative;
  top: 25px;
  left: 3px;
  overflow: hidden;
}

body .content .screen-game .screenshot-div .box .wrapper {
  width: 1100px;
  height: 620px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  left: 3px;
}

body .content .screen-game .screenshot-div .box .wrapper .img2 {
  float: left;
}

body .content .screen-game .screenshot-div .img3 {
  float: right;
  position: relative;
  right: 0px;
  bottom: 355px;
}

body .content .aside-div {
  width: 220px;
  height: 570px;
  background-image: url(./resource/images/fixedboxbg.png);
  position: absolute;
  right: 1%;
  top: 64%;
  float: left;
}

body .content .aside-div .all-content {
  width: 172px;
  height: 523px;
  position: relative;
  left: 25px;
  top: 22px;
  float: left;
}

body .content .aside-div .all-content .aside-QQ {
  width: 172px;
  height: 46px;
  background-image: url(./resource/images/title-qq.png);
  float: left;
}

body .content .aside-div .all-content .aside-QQkefu {
  width: 172px;
  height: 80px;
  float: left;
}

body .content .aside-div .all-content .aside-QQkefu ul {
  width: 172px;
  height: 40px;
  float: left;
  margin-left: -28px;
}

body .content .aside-div .all-content .aside-QQkefu ul li {
  list-style: none;
  width: 172px;
  line-height: 26px;
}

body .content .aside-div .all-content .aside-QQkefu ul li .cn {
  font-size: 15px;
  color: #2e7f82;
}

body .content .aside-div .all-content .aside-QQkefu ul li img {
  float: left;
  margin-top: -24px;
  margin-left: 68px;
}

body .content .aside-div .all-content .aside-QQqun {
  width: 172px;
  height: 46px;
  float: left;
  background-image: url(./resource/images/title-qun.png);
}

body .content .aside-div .all-content .aside-group {
  width: 172px;
  height: 160px;
  float: left;
}

body .content .aside-div .all-content .aside-group ul {
  width: 172px;
  height: 40px;
  float: left;
  margin-left: -28px;
}

body .content .aside-div .all-content .aside-group ul li {
  list-style: none;
  width: 172px;
  line-height: 26px;
}

body .content .aside-div .all-content .aside-group ul li .cn {
  font-size: 10px;
  color: #2e7f82;
}

body .content .aside-div .all-content .aside-group ul li img {
  float: left;
  margin-top: -24px;
  margin-left: 68px;
}

body .content .aside-div .all-content .aside-offac {
  width: 172px;
  height: 125px;
  float: left;
  text-align: center;
  margin-top: -29px;
}

body .content .aside-div .all-content .aside-offac .cn {
  font-size: 17px;
  color: #2e7f82;
  line-height: 39px;
}

body .content .aside-div .all-content .aside-offac img {
  float: left;
  width: 120px;
  height: 120px;
  margin-top: 0px;
  margin-left: 20px;
  background-color: #2e7f82;
  border: 6px solid rgba(5, 97, 100, 0.5);
  border-radius: 20px;
}

body .content .aside-div .all-content .aside-acqrcode {
  width: 172px;
  height: 40px;
  float: left;
  background-image: url(./resource/images/backtop.png);
  margin-top: 50px;
}

.footer-div {
  background-color: #2e7f82;
  width: 1903px;
  height: 280px;
  position: relative;
  top: 3300px;
}

.footer-div .notice .footer-logo {
  width: 200px;
  height: 138px;
  background-image: url(./resource/images/footerlogo.png);
  position: relative;
  top: 62px;
  left: 270px;
}

.footer-div .notice .footer-content {
  width: 1000px;
  position: relative;
  top: -70px;
  left: 520px;
  margin: 0;
}

.footer-div .notice .footer-content .yellow {
  color: #bee652d8;
  font-size: 15px;
  line-height: 30px;
}

.footer-div .notice .footer-content .white {
  color: #b1ddd6;
  font-size: 15px;
  line-height: 30px;
}

.player {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 10px;
  top: 200px;
  cursor: pointer;
}
/*# sourceMappingURL=uishentu.css.map */