HTML期末大网页作业-腾讯官网

.slide_tips{ display:block; width: 30px; height: 57px; position: absolute; left: 50%; margin-left: -15px; bottom: 62px; z-index: 2;}

.slide_tips .s_line{ display:block; width: 2px; height: 32px; border-radius: 2px; position: absolute; left: 50%; margin-left: -1px; top: 0px; background: #fff;}

.slide_tips .txt{ display:block; width: 100%; position: absolute; left:0; text-align: center; bottom: 0px; font-size: 12px; letter-spacing: 2px;}

.en-us .slide_tips .txt{ left:-6px;}

.slide_tips .s_line{ animation: a_banner_s_line 3s 0.3s linear both infinite;-webkit-animation: a_banner_s_line 3s 0.3s linear both infinite;-ms-animation: a_banner_s_line 3s 0.3s linear both infinite;-moz-animation: a_banner_s_line 3s 0.3s linear both infinite;-o-animation: a_banner_s_line 3s 0.3s linear both infinite;}

/首页内容/

.descript_area{ display:block; width: 100%;}

.descript_area .txt{ text-align: center; font-size: 24px; color: #5f6464; line-height: 54px; padding: 105px 0 74px;font-family: ‘TencentSansw3’; }

.descript_area .txt span.m{ display:none;}

.descript_area .txt span.pc{ display:block;}

.details_area{display:block; width: 100%; margin-bottom: 84px;}

.details_con{ display:block; width: 1240px; margin: 0px auto; height: 250px;}

.detail_list{ display:block; height: 250px;}

.detail_list li{ display:inline-block; float: left; height: 100%; width: 400px; text-align: center; margin-right:20px; position: relative; overflow: hidden;}

.detail_list li a{ display:block; height: 100%; width: 100%;}

.detail_list li a:after{ display:block; content: “”; height: 100%; width: 100%; background:rgba(0,82,217,0.7); position: absolute; left: 0px; top: 0px; z-index: 2; opacity: 0; transition: opacity 0.3s ease-out;}

.detail_list li p{ display:block; float: left; font-size: 30px; height: 40px; text-align: center; position: absolute; left: 50%; top: 50%; margin-top: -20px; z-index: 3; color: #fff; border-bottom: 1px solid rgba(255,255,255,0); transform: translate(-50%,0); padding-bottom: 3px; transition: border-bottom 0.3s ease-out 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 ;font-family: ‘TencentSansw7’;padding-bottom: 5px;-webkit-transition: width 1s linear;}

.detail_list li p:after{

content: ’ ';

width: 0;

height: 2px;

background: #fff;

bottom: -2px;

left: 0;

position: absolute;

opacity: 0;

-webkit-transition: all 0.2s linear;

}

.detail_list li img{ display:block; height:100%;; width: 100%; position: absolute; left: 0px; top: 0px; z-index: 1; transform:scale(1); transition: transform 0.3s ease-out;}

.detail_list li.last{ margin-right:0px;}

.detail_list li a:hover:after{opacity:1;}

.detail_list li a:hover p:after{

opacity: 1;

left: 0;

width: 100%;

}

.detail_list li a:hover img{ transform:scale(1.024);}

/连接模块/

.link_area{ display:block; width: 100%; height: 780px; background: #1b1f25; margin-bottom: 84px; }

.link_area .link_hook{ display:block; width:1440px; height: 780px; margin:0px auto;

/background:#1b1f25 url(./style/img/bg_3.png) no-repeat 0 0; background-size: contain;/}

.link_area .link_tab{ display:block; width: 36%; height: 100%; float: left;}

.link_area .tab_list{ display:block; height: 100%;}

.link_area .tab_list li{ display:block; height: 33.3%; opacity: 0.4; position: relative;}

.link_area .tab_list .tit{ display:block; font-size: 30px; color: #fff; position: absolute; left: 50%; margin-left: -32%; top: 50%; margin-top: -4.9%; transition: margin-left 0.3s ease-out;font-family: ‘TencentSansw7’;right: 32px;}

.link_area .tab_list .txt{ display:block; font-size: 16px; color: #fff; position: absolute; left: 50%; margin-left: -32%; top: 50%; margin-top: 5.8%; transition: margin-left 0.3s ease-out;font-family: ‘TencentSansw3’;right: 30px;}

.link_area .tab_list .icon{ display:block; height: 16px; width: 54px; background: url(./style/img/icon_arrow_r.png) no-repeat 0 0; position: absolute; left: 50%; /margin-left: -21.5%;/ margin-left: -32%; top: 50%; margin-top: 14.8%; opacity: 0; transition: margin-left 0.3s ease-out,opacity 0.3s ease-out;background-size: 100% 100%;}

.link_area .tab_list li.list_item_2 .icon{ margin-top: 9.0%; }

.link_area .tab_list li.list_item_3 .icon{ margin-top: 3.8%; }

.link_area .tab_list .tit:after{ display:block; content:“”; height: 70px; width: 6px; background: #1e52d8; position: absolute; left: 50%; margin-left: -62%; top: 18%; opacity:0; transform: translate(-20px,0px); transition: opacity 0.3s ease-out,transform 0.3s ease-out;}

.link_area .tab_list li.list_item_2 .tit{ margin-top: -10.9%; }

.link_area .tab_list li.list_item_2 .txt{margin-top: -0.2%; }

.link_area .tab_list li.list_item_3 .tit{ margin-top: -16.3%; }

.link_area .tab_list li.list_item_3 .txt{margin-top: -6.2%; }

.link_area .tab_list li.current{opacity: 1;}

.link_area .tab_list li.current .tit{ margin-left: -28%; }

.link_area .tab_list li.current .txt{ margin-left: -28%; }

.link_area .tab_list li.current .tit:after{ opacity:1; transform: translate(0px,0px);}

.link_area .tab_list li.current .icon{ opacity:1; margin-left: -27.5%; }

.link_area .link_content{ display:block; width: 64%; height: 780px; margin-left: 36%; overflow: hidden;}

.link_area .link_content .con{ display:none; width: 100%; height: 100%;}

.link_area .link_content .con_1{ display:block;}

.link_area .link_con_list{ display:block; width: 100%; height: 100%;}

.link_area .link_con_list li{ display:block; width: 50%; float: left; height: 50%; background: url(./style/img/index_link_1_1.jpg) no-repeat center center; background-size: cover; overflow: hidden;}

.link_area .link_con_list li a{ display:block; width: 100%; height: 100%; position: relative;}

.link_area .con_1 .link_con_list li.item_1{ background-image: url(./style/img/index_link_1_1.jpg);}

.link_area .con_1 .link_con_list li.item_2{ background-image: url(./style/img/index_link_1_2.jpg); }

.link_area .con_1 .link_con_list li.item_3{ background-image: url(./style/img/index_link_1_3.jpg); }

.link_area .con_1 .link_con_list li.item_4{ background-image: url(./style/img/index_link_1_4.jpg); }

.link_area .con_2 .link_con_list li.item_1{ background-image: url(./style/img/index_link_2_1.jpg); }

.link_area .con_2 .link_con_list li.item_2{ background-image: url(./style/img/index_link_2_2.jpg); }

.link_area .con_2 .link_con_list li.item_3{ background-image: url(./style/img/index_link_2_3.jpg); width: 100%;}

.link_area .con_3 .link_con_list li.item_1{ background-image: url(./style/img/index_link_3_1.jpg); }

.link_area .con_3 .link_con_list li.item_2{ background-image: url(./style/img/index_link_3_2.jpg); }

.link_area .con_3 .link_con_list li.item_3{ background-image: url(./style/img/index_link_3_3.jpg); }

.link_area .con_3 .link_con_list li.item_4{ background-image: url(./style/img/index_link_3_4.jpg); }

.link_area .link_con_list .script{ display:block; width: 100%; height: 50%; position: absolute; left: 0px; bottom: 0px; background:-webkit-linear-gradient(bottom,rgba(0,0,0,0.4),rgba(0,0,0,0)); }

.link_area .link_con_list .script .tit{ display:block; margin-left:43px; margin-top: 119px; font-size: 24px; color: #fff; transition: margin-top 0.3s ease-out;font-family: ‘TencentSansw7’;}

.link_area .link_con_list .script .txt{ display:block; margin-left:43px; margin-top: 9px; line-height: 1.8; font-size: 16px; color: #fff; opacity: 0; transform: translate(0px,15px); transition: opacity 0.3s ease-out;font-family: ‘TencentSansw3’;margin-right: 43px;}

.link_area .link_con_list .script .icon{ display:block; height: 14px; width: 31px; background: url(./style/img/icon_arrow_r_s.png) no-repeat 0 0; position: absolute; right: 71px; top: 71px; opacity: 0; transition: all 0.3s ease-out;background-size: 100% 100%;}

.link_area .link_con_list li a:hover .script .tit{ margin-top: 59px; }

.link_area .link_con_list li a:hover .script .txt{ opacity: 1; transform: translate(0px,0);}

.link_area .link_con_list li a:hover .script .icon{animation: a_arrow_r 0.2s linear forwards; }

@keyframes a_arrow_r {

0%{ opacity: 0; right: 71px;}

100%{opacity: 1; right: 51px;}

}

/责任模块/

.resp_area{ display:block; width:1280px; height:620px; margin: 0px auto 84px; /background:url(./style/img/bg_4.png) no-repeat 0 0; background-size: contain;/ position: relative;}

.resp_area .public_welfare{ display:block; width:627px; height:620px; position: absolute; left: 0px; top: 0px;}

.resp_area .slide_area{ display:block; width:627px; height:620px; position: absolute; left: 0px; top: 0px; overflow: hidden;}

.resp_area .slide_list{

display:block; width:100%; height:620px; position: relative;

}

.resp_area .slide_list li{ width:627px; height:620px;position: absolute;opacity: 0;transition: opacity 0.3s linear;

-moz-transition: opacity 0.3s linear;

-ms-transition: opacity 0.3s linear;

-o-transition: opacity 0.3s linear;

-webkit-transition: opacity 0.3s linear;left: 0;top:1;}

.resp_area .slide_list li a{

display: block;

color: #fff;

position: absolute;

width: 100%;

height: 100%;

}

.resp_area .slide_list li.active{

opacity: 1;

}

.resp_area .slide_list li .shadow_bg{ display:block; width:100%; height:30%; position: absolute; left: 0px; bottom: 0px; background: -webkit-linear-gradient(bottom,rgba(0,0,0,0.15),rgba(0,0,0,0)); pointer-events: none;}

.resp_area .slide_list li .img{ display:block; width:627px; height:620px; position: absolute; left: 0px; top: 0px;}

.resp_area .slide_list li .img0{

background: url(./style/img/index_resp_bg0.png) no-repeat center center;background-size: cover;

}

.resp_area .slide_list li .img1{

background: url(./style/img/index_resp_bg1.jpg) no-repeat center center;background-size: cover;

}

.resp_area .slide_list li .img2{

background: url(./style/img/index_resp_bg2.jpg) no-repeat center center;background-size: cover;

}

.resp_area .slide_list li .img3{

background: url(./style/img/index_resp_bg3.jpg) no-repeat center center;background-size: cover;

}

.resp_area .slide_list li .tit{ display:block; width: 500px;font-size: 24px; position: absolute; left: 53px; bottom: 107px;z-index: 1;font-family: ‘TencentSansw7’;}

.resp_area .slide_list li .txt{ display:block; width: 500px; font-size: 16px; position: absolute; left: 52px; bottom: 41px; line-height: 29px;z-index: 1;font-family: ‘TencentSansw3’;}

.resp_area .public_welfare .hook_tri{ display:block; width:43px; height:620px; background: url(./style/img/i_tri.png) no-repeat 0 0; background-size: contain; position: absolute; right: 0px; bottom: 0px;}

.resp_area .slide_area .icon_arrow{ display:block; width:10px; height:16px; background: url(./style/img/sli-left-icon.png) no-repeat center; position: absolute; right: 144px; bottom: 116px; margin-top:-30px;z-index:5;background-size: 10px 16px;padding: 5px;cursor: pointer; display: none\9; opacity: 0; transition: opacity 0.2s linear;}

.resp_area .slide_area .icon_arrow_r{ left: auto; right: 98px; background: url(./style/img/sli-right-icon.png) no-repeat center;background-size: 10px 16px;}

.resp_area .slide_area:hover .icon_arrow{

display: block;

opacity: 1;

}

.en-us .resp_area .slide_area .icon_arrow{ right:84px; bottom: 15px;}

.en-us .resp_area .slide_area .icon_arrow_r{ right:48px;}

.resp_area .resp_details{ display:block; width: 450px; position: absolute; left: 50%; margin-left: 68px; top: 50%; margin-top: -8.3%;}

.resp_area .resp_details .tit{ display:block; color: #2a2e2e; width: 450px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size:36px; margin-bottom: 20px;font-family: ‘TencentSansw7’;}

.resp_area .resp_details .txt{ display:block; color: #5f6464; width: 450px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size:20px; margin-bottom: 40px;font-family: ‘TencentSansw3’;}

.resp_area .resp_details .icon_arrow_r{ display:block; width: 38px; height: 16px; background: url(./style/img/icon_arrow_r_dark.png) no-repeat 0 0; margin-left: 3px;background-size: 100% 100%;}

.en-us .resp_area .resp_details .txt{ white-space:normal; }

/人才发展模块/

.develop_area{ display:block; width: 100%;margin: 0px auto; position: relative;}

.develop_con{

width: 1240px;

margin: 0 auto;

}

.develop_area .develop_details{ display:block; width: 450px; position: absolute; left: 6.6%; top: 16%;z-index: 1;}

.develop_area .develop_details .tit{ display:block; color: #2a2e2e; width: 450px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size:36px; margin-bottom: 20px;font-family: ‘TencentSansw7’;}

.develop_area .develop_details .txt{ display:block; color: #5f6464; width: 450px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size:20px; margin-bottom: 40px;font-family: ‘TencentSansw3’;}

.develop_area .develop_details .icon_arrow_r{ display:block; width: 38px; height: 16px; background: url(./style/img/icon_arrow_r_dark.png) no-repeat 0 0; margin-left: 3px;background-size: 100% 100%;}

.develop_area .slide_area{ display:block; width: 100%; height: 100%; overflow: hidden;position: relative;}

.develop_area .slide_list{ display:block; width: 100%; height: 100%;position: relative;height: 1040px;}

.develop_area .slide_list li{ display:inline-block; width: 100%;height: 1040px; float: left;overflow: hidden;position: relative;opacity: 0;transition: 0.3s linear;

-moz-transition: opacity 0.3s linear;

-ms-transition: opacity 0.3s linear;

-o-transition: opacity 0.3s linear;

-webkit-transition: opacity 0.3s linear;position: absolute;left: 0;top: 0;}

.develop_area .slide_list li.active{

opacity: 1;

}

.develop_area .slide_list .li1{

background: url(./style/img/index_develop_bg1.jpg) no-repeat top;background-size: cover;

}

.video1 {

width: 2560px;

height: 780px;

position: absolute;

top: 0;

left: 50%;

margin-left: -1280px;

z-index: 1;

}

.slide-tab{

position: absolute;

right: 32px;

bottom: 24px;

}

.slide-tab .li{

float: left;

margin-left: 8px;

width: 8px;

height: 8px;

background: #fff;

transition: width 0.3s linear;

-moz-transition: width 0.3s linear;

-ms-transition: width 0.3s linear;

-o-transition: width 0.3s linear;

-webkit-transition: width 0.3s linear;

cursor: pointer;

}

.slide-tab .li.active{

width: 24px;

background: #0052d9;

}

.block-link {

display: block;

height: 100%;

width: 100%;

}

.banner_txt{

position: absolute;

top: 50%;

left: 50%;

z-index: 99999;

transform: translate(-50%,-50%);

}

.banner_txt .txtbox span{

display: inline-block;

font-size: 58px;

}

Tencent腾讯

  • 简介

  • 业务

  • 员工

  • 企业责任

  • 投资者

  • 媒体

    |

    |

    EN

    <video width=“100%” id=“video” autoplay loop preload muted preload=“auto” x-webkit-airplay=“true”

    airplay=“allow” webkit-playsinline=“true” playsinline=“true” src=“./style/video/index-video.mp4”

    class=“video1 video”>

    连接你我

    共生未来

    滑动

    腾讯是一家以互联网为基础的平台公司,通过技术丰富互联网用户的生活,助力企业数字化升级。

    class=“pc”>我们的使命是“用户为本 科技向善”。

    • 公司简介

      公司简介
    • 企业文化

      企业文化
    • 办公地点

      办公地点
      • 连接用户与生活

        让生活更便捷更多彩

      • 连接企业与科技

        数字化助手,助力产业升级

      • 连接现在与未来

        探索面向未来的创新科技

      • 通信与社交

        连接人与人,提供功能丰富的即时通信和社交平台,让沟通更便捷。

      • 数字内容

        基于优质内容,以技术为驱动引擎,探索社交和内容融合的下一代形态。

      • 金融科技服务

        连接用户、商户和金融机构,提供安全、专业、便捷的金融产品与服务。

      • 工具

        提供多种工具性软件,帮助用户快速直接解决各项具体需求。

        连接
        责任与信任

        聚合微小善行,以科技让世界更美好

        • 全球战疫 一起行动

          在新冠肺炎疫情之战中,腾讯秉持科技向善,以互联网科技的力量,通过我们的技术和产品为全球战疫提供支持。

          连接
          人才与发展

          激发活力,助力成长

          • 关注我们

            • img
            • 加入我们

              • 社会招聘

              • 校园招聘

              • 国际招聘

                联系我们

                • 客户服务

                • 合作洽谈

                • 0
                  点赞
                • 2
                  收藏
                  觉得还不错? 一键收藏
                • 0
                  评论

                “相关推荐”对你有帮助么?

                • 非常没帮助
                • 没帮助
                • 一般
                • 有帮助
                • 非常有帮助
                提交
                评论
                添加红包

                请填写红包祝福语或标题

                红包个数最小为10个

                红包金额最低5元

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

                抵扣说明:

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

                余额充值