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

关注

原创最新推荐文章于 2026-05-12 09:41:29 发布 265 阅读 AI 写同款· GEO 优化 ›

HTML期末大网页作业-腾讯官网，web应用程序开发技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！阅读详情

.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”>我们的使命是“用户为本科技向善”。
公司简介
企业文化
办公地点
连接用户与生活

让生活更便捷更多彩
连接企业与科技

数字化助手，助力产业升级
连接现在与未来

探索面向未来的创新科技
通信与社交

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

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

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

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

连接
责任与信任

聚合微小善行，以科技让世界更美好
全球战疫一起行动

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

连接
人才与发展

激发活力，助力成长
关注我们
加入我们
社会招聘
校园招聘
国际招聘

联系我们
客户服务
合作洽谈