老师教我们敲的集团

已于 2023-12-25 09:45:44 修改
阅读量37 收藏
点赞数
文章标签： css css3 html
于 2023-09-10 17:52:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pig_pig7/article/details/132793758
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .clearFloat::after {
                display: block;
                overflow: hidden;
                content: "";
                clear: both;
                height: 0;
            }
            .clearFloat {
                zoom: 1;
            }
            ul {
                list-style: none;
            }
            a {
                text-decoration: none;
            }
            .nav {
                width: 100%;
                height: 100px;
            }
            .nav_box1 {
                width: 1100px;
                height: 100px;
                margin: 0 auto;
            }
            .nav_box1_left {
                width: 272px;
                height: 72px;
                background-color: orange;
                float: left;
                margin-top: 14px;
            }
            .nav_box1_left img {
                width: 100%;
                height: 100%;
            }
            .nav_box1_right {
                width: 700px;
                height: 100px;
                float: right;
            }
            .nav_box2 {
                width: 267px;
                height: 30px;
                float: right;
            }
            .nav_icon {
                width: 22px;
                height: 22px;
                margin-top: 4px;
                float: left;
                margin-right: 5px;
            }
            .nav_box3 {
                width: 185px;
                height: 30px;
                font-size: 12px;
                color: #999;
                line-height: 28px;
                float: left;
            }
            .nav_uls {
                width: 640px;
                height: 60px;
                float: right;
            }
            .nav_uls li {
                width: 60px;
                height: 60px;
                float: left;
                text-align: center;
                font-size: 12px;
                color: #999;
                margin-left: 20px;
            }
            .nav_uls li p:first-child {
                margin-top: 14px;
            }
            .swipt {
                width: 100%;
                height: 667px;
                background-image: url("./zysy/zhonangabox.png");
                background-position: center;
                overflow: hidden;
            }
            .swipt_box1 {
                width: 1100px;
                height: 450px;
                margin: 217px auto 0 auto;
            }
            .swipt_box1_text {
                width: 80px;
                height: 30px;
                background-color: orange;
                font-size: 12px;
                color: #fff;
                text-align: center;
                line-height: 30px;
            }
            .swipt_box2 {
                width: 80px;
                height: 30px;
            }
            .swipt_border {
                width: 10px;
                height: 10px;
                background-color: #999;
                float: left;
                margin: 12px 0 0 12px ;
            }
            .swipt_box3 {
                width: 1100px;
                height: 300px;
                background-color: rgba(0,0,0,0.5);
                margin-top: 90px;
            }
            .swipt_box4 {
                width: 275px;
                height: 300px;
                float: left;
            }
            .swipt_box4_box1 {
                width: 240px;
                height: 200px;
                margin: 50px auto 0 auto;
                font-size: 12px;
                color: #fff;
            }
            .swipt_box4_img {
                width: 34px;
                height: 34px;
                float: left;
            }
            .swipt_box4_text {
                width: 180px;
                float: left;
                margin-left: 10px;
            }
            .swipt_box4_box2 {
                width: 240px;
                height: 80px;
                border-top: 1px solid #fff;
                border-bottom: 1px dashed #fff;
                
                
            }
            .swipt_box4_box2
        </style>
    </head>
    <body>
        <!-- 大盒子 -->
        <div class="boss">
            <!-- 导航 -->
            <div class="nav">
                <div class="nav_box1 clearFloat">
                    <!-- logo -->
                    <div class="nav_box1_left">
                        <img src="zysy/zhonnanya.png" >
                    </div>
                    <!-- 菜单 -->
                    <div class="nav_box1_right clearFloat">
                        <div class="nav_box2">
                            <div class="nav_icon">
                                <img src="./zysy/zhongnaya.png" alt="">
                            </div>
                            <div class="nav_icon">
                                <img src="./zysy/zhongnanya1.png" alt="">
                            </div>
                            <div class="nav_icon">
                                <img src="./zysy/en.png" alt="">
                            </div>
                            <div class="nav_box3">
                                / 联系我们 / 设为首页 / 加入收藏
                            </div>
                        </div>
                        <ul class="nav_uls">
                            <li>
                                <p>首页</p>
                                <p>Home</p>
                            </li>
                            <li>
                                <p>走进中亚</p>
                                <p>Home</p>
                            </li>
                            <li>
                                <p>走进中亚</p>
                                <p>Home</p>
                            </li>
                            <li>
                                <p>走进中亚</p>
                                <p>Home</p>
                            </li>
                            <li>
                                <p>走进中亚</p>
                                <p>Home</p>
                            </li>
                            <li>
                                <p>走进中亚</p>
                                <p>Home</p>
                            </li>
                            <li>
                                <p>走进中亚</p>
                                <p>Home</p>
                            </li>
                            <li>
                                <p>走进中亚</p>
                                <p>Home</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 背景轮播 -->
            <div class="swipt">
                <div class="swipt_box1">
                    <div class="swipt_box1_text">了解更多</div>
                    <div class="swipt_box2 clearFloat">
                        <div class="swipt_border swipt_btn1"></div>
                        <div class="swipt_border swipt_btn2"></div>
                        <div class="swipt_border swipt_btn3"></div>
                    </div>
                    <div class="swipt_box3">
                        <div class="swipt_box4">
                            <div class="swipt_box4_box1">
                                <div class="clearFloat">
                                    <div class="swipt_box4_img">
                                        <img src="zysy/zhonangya5.png" >
                                    </div>
                                    <div class="swipt_box4_text">
                                        <p>The group dynamic</p>
                                        <p>集团动态</p>
                                    </div>
                                    <div class="nav_box5_img"></div>
                                </div>
                                <div class="swipt_box4_box2 clearFloat">
                                    <p style="float: left;margin-top: 25px;">＞ </p>
                                    <p style="float: left;width: 200px;margin-top: 25px;border-bottom: 1px dashed #fff;">中亚实业集团三方协议签约仪式在南昌滨江宾馆举行。</p>
                                </div>
                                <div class="clearFloat">
                                    <p style="float: left;margin-top: 25px;">＞ </p>
                                    <p style="float: left;width: 200px;margin-top: 25px;">中亚实业集团三方协议签约仪式在南昌滨江宾馆举行。</p>
                                </div>
                            </div>
                        </div>
                        <div class="swipt_box4">
                            <div class="swipt_box4_box1">
                                <div class="clearFloat">
                                    <div class="swipt_box4_img">
                                        <img src="zysy/zhonangya5.png" >
                                    </div>
                                    <div class="swipt_box4_text">
                                        <p>A subsidiary copany</p>
                                        <p>控股企业</p>
                                    </div>
                                </div>
                                <div class="swipt_box4_box2 clearFloat">
                                    <img src="zysy/zhonagasnfgan.png"/>
                                    
                            </div>
                        </div>
                        <div class="swipt_box4">
                            <div class="swipt_box4_box1">
                                <div class="clearFloat">
                                    <div class="swipt_box4_img">
                                        <img src="zysy/zhonangya5.png" >
                                    </div>
                                    <div class="swipt_box4_text">
                                        <p>Corporate culture and</p>
                                        <p>philosophy</p>
                                    </div>
                                </div>
                                <div class="swipt_box4_box2 clearFloat">
                                    <div class="box3">
                                            <div class="box3-1">
                                            <img  style="width: 100%;height: 100%;" src="zysy/zhongangnyawa1.png" alt=""></div>
                                            <p style="margin-top: 10px;margin-left: 65px;">集团组织进行公益活动</p>
                                            <p style="margin-top: 5px;margin-left: 65px;">更多more+</p>
                                        </div>
                                        <div class="box3">
                                            <div class="box3-1">
                                            <img  style="width: 100%;height: 100%;" src="zysy/zhoanganagaysae2.png" alt=""></div>
                                            <p style="margin-top: 10px;margin-left: 65px;">集团组织进行公益活动</p>
                                            <p style="margin-top: 5px;margin-left: 65px;">更多more+</p>
                                        </div>
                                    </div>
                        </div>
                        <div class="swipt_box4">
                            <div class="swipt_box4_box1">
                                <div class="clearFloat">
                                    <div class="swipt_box4_img">
                                        <img src="zysy/zhonangya5.png" >
                                    </div>
                                    <div class="swipt_box4_text">
                                        <p>The group dynamic</p>
                                        <p>集团动态</p>
                                    </div>
                                </div>
                                <div class="swipt_box4_box2 clearFloat">
                                    <p style="float: left;margin-top: 25px;">＞ </p>
                                    <p style="float: left;width: 200px;margin-top: 25px;">中亚实业集团三方协议签约仪式在南昌滨江宾馆举行。</p>
                                </div>
                                <div class="clearFloat">
                                    <p style="float: left;margin-top: 25px;">＞ </p>
                                    <p style="float: left;width: 200px;margin-top: 25px;">中亚实业集团三方协议签约仪式在南昌滨江宾馆举行。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var swipt_btn1 = document.getElementsByClassName("swipt_btn1")[0];
        var swipt_btn2 = document.getElementsByClassName("swipt_btn2")[0];
        var swipt_btn3 = document.getElementsByClassName("swipt_btn3")[0];
        var swipt = document.getElementsByClassName("swipt")[0];
        var num = -300;
        // 第一个按钮
        swipt_btn1.onclick = function(){
            num = -300;
            var time = setInterval(function(){
                num -= 40;
                swipt.style.backgroundPosition = num+"px";
                if(num<=-2220){
                    swipt.style.backgroundImage = "url(./zysy/zhonangabox.png)";
                    clearInterval(time);
                }
            },1)
        }
        swipt_btn2.onclick = function(){
            num = -300;
            var time = setInterval(function(){
                num -= 40;
                swipt.style.backgroundPosition = num+"px";
                if(num<=-2220){
                    swipt.style.backgroundImage = "url(./zysy/zhonangabox.png)";
                    clearInterval(time);
                }
            },1)
        }
        swipt_btn3.onclick = function(){
            num = -300;
            var time = setInterval(function(){
                num -= 40;
                swipt.style.backgroundPosition = num+"px";
                if(num<=-2220){
                    swipt.style.backgroundImage = "url(./zysy/zhonangabox.png)";
                    clearInterval(time);
                }
            },1)
        }
    </script>
</html>

头秃患者77
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值