ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-06-17 09:04:10  阅读:108  来源: 互联网

标签:网页 area list width HTML background 官网 display block


 HTML期末作业课程设计期末大作业-腾讯官网


<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Tencent 腾讯</title>
  <style>
  html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 100px;
}
body {
  color: #fff;
  line-height: 1.5;
}
*{
  margin: 0;
  padding: 0;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: 0;
}
button:focus,
input:focus,
optgroup:focus,
select:focus,
textarea:focus {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
}
textarea {
  resize: none;
}
img {
  border: 0;
  vertical-align: bottom;
}
a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
}
a,a:hover,a:active,a:visited,a:link,a:focus{
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  outline:none;
  background: none;
  text-decoration: none;
}
ul,
li {
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-variant: normal;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}
.clear-p-t{
  padding-top: 0 !important;
}
.clear-margin{
  margin: 0 !important;
}
.clear-b-margin{
  margin-bottom: 0 !important;
}
.light{
	color: #0052D9;
}
.p-light{
	padding-left: 5px;
}


.w3{
  color: #000;
  font-family: 'TencentSansw3';
}
.w7{
  color: #000;
  font-family: 'TencentSansw7';
}

.pc-box{
  display: block;
}
.mobile-box{
  display: none;
}
.mobile-box-2{
  display: none;
}

/* 页面最小高 */
.null_content{
  min-height: 600px;
}

/*页头*/
.wrap{ display: block; width: 100%;position: relative;overflow-x: hidden;}
.wrap_head{ display:block; width:100%; height: 72px;
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
}
.head_con{ display:block; width:1200px; height: 72px;  margin: 0px auto; position: relative; z-index: 2; }
.head_con .logo{ display:block; height: 22px; width: 168px; position: absolute; left: 0px; top: 25px;}
.head_con .logo h1{ display:block; height: 22px; width: 168px; background: url(./style/img/menu_logo.png) no-repeat 0 0; text-indent: -9999px; overflow: hidden;background-size: 100% 100%;}


/*菜单*/
.menu_list{ display: block; height:72px; position: absolute; right: 220px; top: 0px; cursor: pointer; opacity: 1; transition:opacity 0.3s linear;transform: translate(0px,0);}
.menu_list .menu_item{ display: inline-block; height:72px; float: left; margin-left:72px; position: relative;}
.en-us .menu_list .menu_item{
  margin-left: 36px;
}
.menu_list .menu_item .txt{ display: block; height:72px; line-height: 72px; font-size: 16px; color: #fff; font-weight: bold; opacity: 0.95; -webkit-transition:color 0.3s linear; position: relative; z-index: 2;}
.menu_list .menu_item .txt:hover{  opacity: 1;}
.menu_list .menu_item .txt:after{ display:block; content:""; height: 4px; width: 100%; position: absolute; bottom: 19px; left: 0px; background: #194ac3; opacity: 0; -webkit-transition: transform 0.2s ease-out,opacity 0.2s ease-out; transform-origin: 50% 0%; transform:scale(0.01,1);}
.menu_list .menu_item .txt:before{ display:none; content:""; height: 400px; width: 100%; position: absolute; top: 19px; left: -10px; background: #194ac3; opacity: 1;}
.menu_list .menu_item:hover .txt:after{ transform:scale(1,1); opacity: 1;}
.menu_list .menu_item.menu_item_lan{ display:none;}
.menu_list .menu_item .menu_hook{ display:none; width: 100%; height: 445px; position: absolute; left: -36px; top: 0px; z-index: 1;}

.en-us .menu_list .menu_item{ margin-left: 60px;}
.en-us .sub_list li a{ padding:10px 0;}

.sub_list{display: none; position: absolute; width:160px; left: 50%; margin-left: -80px; text-align: center; z-index: 2; }
.sub_list li a{ display: block; font-size: 16px; color: #2b2e2e; opacity: 0.7; padding: 13px 0;}
.sub_list li a:hover{ opacity: 1;}


/*搜索框*/
.search_area{display: none; height: 42px; width: 42px; background:rgba(255,255,255,0); position:absolute; right: 128px; top: 16px; border: 1px solid rgba(255,255,255,0); border-radius: 3px; transition: width 0.25s ease-out,background 0.25s ease-out,border 0.25s ease-out;}
.search_area .search_icon{display: block; height: 16px; width: 16px; background:url(./style/img/icon_search.png) no-repeat 0 0; position:absolute; left: 13px; top: 13px; opacity: 0.9; transition: opacity 0.25s linear;background-size: 100% 100%;}
.search_area .search_icon:hover{ opacity:1;}
.search_area .ipt_search{display: block; height: 42px; line-height: 42px; width: 16px; position:absolute; left: 42px; top: 0px; font-size: 16px; display: none;}

.search_area_show .menu_list{ opacity: 0; pointer-events: none;}
.search_area_show .search_area{ width: 676px; background: #000; border: 1px solid rgba(255,255,255,0.95);}
.search_area_show .search_icon{opacity:1;}
.search_area .ipt_search{ width:615px;}

/*语言框*/
.lang_area{ display: block; position: absolute; right: 0px; top: -74px}
.lang_area a{ display: inline-block; font-size: 16px; color: #fff; font-family:"PingFangSC-Regular"; opacity: 0.7;cursor: pointer;}
.lang_area a:hover{ opacity:0.95;}
.lang_area a.current{ opacity:1;}
.lang_area .s_line{ display: inline-block; font-size: 12px; margin: 0px 3px; position: relative; top: -2px; opacity: 0.7;}

.head_white{
  background: #fff;
}
/* .head_white.fixed{
  position: fixed;
  top: -72px;
} */
.submenu_show .logo h1,.head_white .logo h1{ background-image: url(./style/img/menu_logo_hover.png);background-size: 100% 100%;}
.submenu_show .menu_list .menu_item .txt,.head_white .menu_list .menu_item .txt{ color: #2b2e2e;}
.submenu_show.search_area_show .search_area,.head_white.search_area_show .search_area{ width: 676px; background: #f6f6f6; }
.submenu_show.search_area_show .search_area .search_icon,.head_white.search_area_show .search_area .search_icon{ opacity: 0.3; }
.submenu_show.search_area_show .search_area .ipt_search,.head_white.search_area_show .search_area .ipt_search{ color: #2b2e2e;}
.submenu_show .search_area .search_icon,.head_white .search_area .search_icon{ background-image:url(./style/img/icon_search_hover.png);}
.submenu_show .lang_area a,.head_white .lang_area a{ color: #2b2e2e;}
.submenu_show .lang_area .s_line,.head_white .lang_area .s_line{ color: #2b2e2e;}
.submenu_show .bg_hover{ display:block !important; width: 100%; height: 445px; background:rgba(255,255,255,1); z-index: 1; position: absolute; top: 0px; left: 0px; -webkit-animation:a_bg_hover_show 0.2s ease-out both; -webkit-transform-origin:50% 0%;}
.submenu_show .menu_list .menu_item.sublist_show .sub_list,.head_white .menu_list .menu_item.sublist_show .sub_list{ -webkit-animation:a_menu_item_show 0.2s ease-out both;}
.submenu_show .menu_list .menu_item.sublist_hide .sub_list,.head_white .menu_list .menu_item.sublist_hide .sub_list{ -webkit-animation:a_menu_item_hide 0.15s ease-out both;}
.submenu_show .menu_list .menu_item .menu_hook{ display:block;}
.submenu_hide,.sublist_hide{ pointer-events:none;} /*避免鼠标快速移动触发鼠标对菜单收回动画延迟 一进多出显示bug*/
.submenu_hide .bg_hover{ -webkit-animation:a_bg_hover_hide 0.15s ease-out both; -webkit-transform-origin:50% 0%;}

/*页脚*/
.wrap_footer{ width:100%; height: 480px; background: #fbfbfb; position: relative; z-index: 1;}
.footer_con{ width:1200px; margin: 0px auto; height: 480px; position: relative;}
.footer_con .tit{ display:block; font-size: 20px; color: #5f6464; font-weight: normal; margin-bottom: 30px; }
.footer_con ul li a{ display:block; font-size: 16px; color: #5f6464; font-weight: normal; margin-bottom: 18px;}


.focus_us{ display: block; height: 55px; width: 100%; border-bottom: 1px solid #f2f3f5; padding-top: 33px; margin-bottom: 40px;}
.focus_us .tit{ float: left; margin-right: 33px; }
.focus_us .focus_list li{ display:inline-block; float: left; margin-right: 28px;}
.focus_us .focus_list li a{ display:block; height: 28px; width: 28px;}
.focus_us .focus_list li a .icon{ display:block; height: 28px; width: 28px; background:url(./style/img/icon_wechat.png) no-repeat center; background-size: 100% 100%;position: relative; transition: background 0.2s ease-in-out;}
.focus_us .focus_list li a .i_weibo{background:url(./style/img/icon_weibo.png) no-repeat center; background-size: 100% 100%;}
.focus_us .focus_list li a .i_twitter{background:url(./style/img/icon_twitter.png) no-repeat center; background-size: 100% 100%;}
.focus_us .focus_list li a .i_in{background:url(./style/img/icon_in.png) no-repeat center; background-size: 100% 100%;}

.focus_us .focus_list li a:hover .icon{
  background:url(./style/img/icon_wechat_hover.png) no-repeat center; background-size: 100% 100%;
}
.focus_us .focus_list li a:hover .i_weibo{
  background:url(./style/img/icon_weibo_hover.png) no-repeat center; background-size: 100% 100%;
}
.focus_us .focus_list li a:hover .i_twitter{
  background:url(./style/img/icon_twitter_hover.png) no-repeat center; background-size: 100% 100%;
}
.focus_us .focus_list li a:hover .i_in{
  background:url(./style/img/icon_in_hover.png) no-repeat center; background-size: 100% 100%;
}

.wechat-code {
  width: 176px;
  position: absolute;
  left: 0;
  top: -186px;
  z-index: 2;
  display: block;
  display:none;
  opacity: 0;
  transition: opacity 0.2s linear;
  pointer-events:none;
}
.focus_us .focus_list li a:hover .wechat-code{
  display: block;
  opacity: 1;
}
.join_us,.contact_us,.legal_info{ float: left; width: 216px;}
.logo_tencent{ display: block; height: 28px; width: 212px; position: absolute; right: 75px; top: 50%; margin-top: -21px;}
.logo_tencent img{
  width: 100%;
}
.footer_area{ display:block; width: 100%; position: absolute; bottom: 51px; left: 0px;}
.footer_area .links li{ display:inline-block; float: left; margin-right: 20px;}
.footer_area .links li a{ font-size: 14px; color: #5f6464; margin-bottom: 0px;}
.footer_area .copyright{ font-size: 14px; color: #5f6464; float: right;}
.footer_area .copyright .flag_num{ display:none;}
/*banner*/

.banner_area{ display:block; height: 780px; width: 100%; position: relative; margin-top: -72px;overflow: hidden;}
.banner_bg{ display:block; height: 780px; width: 100%; background:#000; background-size: cover; position: absolute; left:0px; top: 0px;}

.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;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;
}
  </style>

</head>

<body>

  <div class="wrap">
    <div class="wrap_head ">

      <div class="head_con">
        <a class="logo" href="javascript:;">
          <h1>Tencent腾讯</h1>
        </a>
        <ul class="menu_list">
          <li class="menu_item">
            <a class="txt" href="javascript:;">简介</a>

          </li>
          <li class="menu_item">
            <a class="txt" href="javascript:;">业务</a>

          </li>
          <li class="menu_item">
            <a class="txt" href="javascript:;">员工</a>

          </li>
          <li class="menu_item">
            <a class="txt" href="javascript:;">企业责任</a>

          </li>
          <li class="menu_item">
            <a class="txt" href="javascript:;">投资者</a>

          </li>
          <li class="menu_item">
            <a class="txt" href="javascript:;">媒体</a>

          </li>



        </ul>
        <div class="lang_area">
          <a class="lang_ch current" lang="zh-cn">简</a>
          <i class="s_line">|</i>
          <a class="lang_hk" lang="zh-hk">繁</a>
          <i class="s_line">|</i>
          <a class="lang_en" lang="en-us">EN</a>
        </div>

      </div>
      <div class="icon_menu">
        <a class="i_menu"></a>
        <a class="i_close"></a>
      </div>
      <div class="bg_hover"></div>
    </div>
    <div class="wrap_content">

      <div class="banner_area">
        <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"></video>
        <div class="banner_txt">
          <div class="txtbox">
            <span class="ltxt" id="ltxt">连接你我</span>
            <span class="rtxt">共生未来</span>
          </div>
        </div>
      
        <div class="slide_tips">
          <i class="s_line"></i>
          <span class="txt">滑动</span>
        </div>
        <div class="banner_bg"></div>
      </div>

      <div class="descript_area">
        <p class="txt">腾讯是一家以互联网为基础的平台公司,<span class="pc"></span>通过技术丰富互联网用户的生活,<span class="m"></span>助力企业数字化升级。<span
            class="pc"></span>我们的使命是“用户为本 科技向善”。</p>
      </div>

      <div class="details_area">
        <div class="details_con">
          <ul class="detail_list">
            <li>
              <a href="javascript:;">
                <p>公司简介</p>
                <img src="style/images/index_detail_1.jpg" alt="公司简介" />
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <p>企业文化</p>
                <img src="style/images/index_detail_2.jpg" alt="企业文化" />
              </a>
            </li>
            <li class="last">
              <a href="javascript:;">
                <p>办公地点</p>
                <img src="style/images/index_detail_3.jpg" alt="办公地点" />
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div class="link_area">
        <div class="link_hook">
          <div class="link_tab">
            <ul class="tab_list">
              <li class="list_item_1 current" data-num="1">
                <a class="block-link" href="javascript:;">
                  <h3 class="tit">连接用户与生活</h3>
                  <p class="txt">让生活更便捷更多彩</p>
                  <i class="icon icon_arrow_r"></i>
                </a>
              </li>
              <li class="list_item_2" data-num="2">
                <a class="block-link" href="javascript:;">
                  <h3 class="tit">连接企业与科技</h3>
                  <p class="txt">数字化助手,助力产业升级</p>
                  <i class="icon icon_arrow_r"></i>
                </a>
              </li>
              <li class="list_item_3" data-num="3">
                <a class="block-link" href="javascript:;">
                  <h3 class="tit">连接现在与未来</h3>
                  <p class="txt">探索面向未来的创新科技</p>
                  <i class="icon icon_arrow_r"></i>
                </a>
              </li>
            </ul>
          </div>
          <div class="link_content">
            <div class="con con_1">
              <ul class="link_con_list">
                <li class="item_1">
                  <a href="javascript:;">
                    <div class="script">
                      <h4 class="tit">通信与社交</h4>
                      <p class="txt">连接人与人,提供功能丰富的即时通信和社交平台,让沟通更便捷。</p>
                      <i class="icon icon_arrow_r"></i>
                    </div>
                  </a>
                </li>
                <li class="item_2">
                  <a href="javascript:;">
                    <div class="script">
                      <h4 class="tit">数字内容</h4>
                      <p class="txt">基于优质内容,以技术为驱动引擎,探索社交和内容融合的下一代形态。</p>
                      <i class="icon icon_arrow_r"></i>
                    </div>
                  </a>
                </li>
                <li class="item_3">
                  <a href="javascript:;">
                    <div class="script">
                      <h4 class="tit">金融科技服务</h4>
                      <p class="txt">连接用户、商户和金融机构,提供安全、专业、便捷的金融产品与服务。</p>
                      <i class="icon icon_arrow_r"></i>
                    </div>
                  </a>
                </li>
                <li class="item_4">
                  <a href="javascript:;">
                    <div class="script">
                      <h4 class="tit">工具</h4>
                      <p class="txt">提供多种工具性软件,帮助用户快速直接解决各项具体需求。</p>
                      <i class="icon icon_arrow_r"></i>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>


      <div class="resp_area">
        <div class="resp_details">
          <h3 class="tit">连接<br />责任与信任</h3>
          <p class="txt">聚合微小善行,以科技让世界更美好</p>
          <a href="javascript:;"><i class="icon icon_arrow_r"></i></a>
        </div>
        <div class="public_welfare">
          <div class="slide_area">
            <ul class="slide_list">
              <li class="active">
                <a href="javascript:;">
                  <h4 class="tit">全球战疫 一起行动</h4>
                  <p class="txt">在新冠肺炎疫情之战中,腾讯秉持科技向善,以互联网科技的力量,通过我们的技术和产品为全球战疫提供支持。</p>
                  <div class="img img0"></div>
                  <span class="shadow_bg"></span>
                </a>
              </li>

            </ul>
            <i class="icon_arrow icon_arrow_l"></i>
            <i class="icon_arrow icon_arrow_r"></i>
          </div>
          <i class="hook_tri"></i>
        </div>
      </div>

      <div class="develop_area">
        <div class="develop_con">
          <div class="develop_details">
            <h3 class="tit">连接<br /> 人才与发展</h3>
            <p class="txt">激发活力,助力成长</p>
            <a href="javascript:;"><i class="icon icon_arrow_r"></i></a>
          </div>
        </div>
        <div class="slide_area dev_bg">
          <ul class="slide_list">
            <li class="li1 active"></li>
            <li class="li2"></li>
            <li class="li3"></li>
          </ul>
          <div class="slide-tab">
            <div class="li active"></div>
            <div class="li"></div>
            <div class="li"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrap_footer">
      <div class="footer_con">
        <div class="focus_us">
          <h3 class="tit">关注我们</h3>
          <ul class="focus_list">
            <li>
              <a class="wechat-btn">
                <i class="icon i_wechat"></i>
                <img class="wechat-code" src="style/images/wechat-code.jpg" alt="img" />
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank">
                <i class="icon i_weibo"></i>
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank">
                <i class="icon i_twitter"></i>
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank">
                <i class="icon i_in"></i>
              </a>
            </li>
          </ul>
        </div>

        <div class="join_us">
          <div class="tit_area">
            <h3 class="tit">加入我们</h3>
            <i class="icon icon_arrow"></i>
          </div>
          <ul class="join_list">
            <li>
              <a target="_blank" href="javascript:;">社会招聘</a>
            </li>
            <li>
              <a target="_blank" href="javascript:;">校园招聘</a>
            </li>
            <li>
              <a target="_blank" href="javascript:;">国际招聘</a>
            </li>
          </ul>
        </div>

        <div class="contact_us">
          <div class="tit_area">
            <h3 class="tit">联系我们</h3>
            <i class="icon icon_arrow"></i>
          </div>
          <ul class="contact_list">
            <li>
              <a target="_blank" href="javascript:;">客户服务</a>
            </li>
            <li>
              <a target="_blank" href="javascript:;">合作洽谈</a>
            </li>
            <li>
              <a target="_blank" href="javascript:;">腾讯采购</a>
            </li>
            <li>
              <a target="_blank" href="javascript:;">媒体及投资者</a>
            </li>
          </ul>
        </div>

        <div class="legal_info">
          <div class="tit_area">
            <h3 class="tit">法律信息</h3>
            <i class="icon icon_arrow"></i>
          </div>
          <ul class="legal_list">
            <li>
              <a target="_blank" href="javascript:;">服务协议</a>
            </li>
            <li>
              <a target="_blank" href="javascript:;">隐私政策</a>
            </li>
            <li>
              <a target="_blank" href="javascript:;">知识产权</a>
            </li>
          </ul>
        </div>

        <div class="logo_tencent">
          <img src="style/images/tencent_logo.png" alt="Tencent腾讯" />
        </div>

        <div class="footer_area">
          <ul class="links">
            <li>
              <a target="_blank" href="javascript:;">法律声明</a>
            </li>
            <li>
              <a target="_blank" href="javascript:;">阳光准则</a>
            </li>
            <li>
              <a target="_blank" href="javascript:;">网站地图</a>
            </li>
            <li class="num">
              <a href="javascript:;">××××××××号</a>
            </li>
            <li class="num">
              <a href="javascript:;">粤×-××××××××-×</a>
            </li>
          </ul>
          <p class="copyright"><a href="javascript:;" class="flag_num">×××××<span>粤××-××××××××-×</span></a>Copyright ©
            1998 - 2020 Tencent. All Rights Reserved. <br class="flag_m" />腾讯公司 版权所有</p>

        </div>
        <div class="back_to_top">
          <a class="back">回到顶部</a>
        </div>

      </div>
    </div>
    <script>
      (function(){
       
        var arr = ['连接你我','连接企业','连接科技','连接公益'];
        var num=0;
        var ltxt = document.getElementById('ltxt');
        setInterval(function(){
          if(num>3){
            num = 0;
            ltxt.innerText=arr[num];
          }else{
            ltxt.innerText=arr[num];
          }
          num++;
        }, 1000 )
      })();
      
      </script>
</body>

</html>

部分网页截图 

 

标签:网页,area,list,width,HTML,background,官网,display,block
来源: https://blog.csdn.net/qq_41101110/article/details/117963613

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有