代码如下：
<!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>Document</title>
<style>
*{
padding:0;
margin:0;
list-style: none;
}
.box1{
width: 1473px;
height: 2125.51px
background-color: #fff;
}
.box2{
width: 1473px;
height: 72px;
background-color: #fff;
display: block;
position: absolute;
top: 0px;
}
.box3{
display: block;
width: 1200px;
height: 72px;
margin: 0px auto;
position: relative;
z-index: 2;
background-color: #fff;
}
.box4{
width: 211px;
height: 35px;
background-color: #fff;
float: left;
position: relative;
left: -685px;
top: 21px;
}
.box5{
width: 788px;
height: 72px;
background-color: #fff;
float: left;
position: relative;
left:391px;
}
.ul1{
list-style:none;
}
.li1{
width:114px;
height:72px;
float:left;
line-height:72px;
text-align: center;
position: relative;
}
.ul2{
list-style:none;
overflow: hidden;
height:0;
position: absolute;
}
.li1:hover .ul2{
display: block;
height:800px;
width: 100px;
}
h1{
display: block;
height: 22px;
width: 168px;
background: url(./menu_logo_hover.png) no-repeat 0 0;
text-indent: -9999px;
overflow: hidden;
background-size: 100% 100%;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-variant: normal;
}
.lang_area{
display: block;
position: absolute;
right: 0px;
top: 24px
}
.lang_area a{
display: inline-block;
font-size: 16px;
color: rgb(0, 0, 0);
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;
}
.box6{
width: 1473px;
height: 15px;
min-height: 56px;
background-color: #f2f3f5;
line-height: 56px;
font-size: 16px;
}
.pp{
width: 195px;
height: 53px;
background-color: #f2f3f5;
position: relative;
left: 236px;
top: 3px;
font-size: 13px;
}
.box8{
width: 840px;
height: 2111px;
background-color: #ffffff;
position: relative;
left: 288px;
top: 3px;
}
.box7{
width: 840px;
height: 120px;
background-color: #ffffff;
font-size: 35px;
line-height: 66px;
padding-bottom: 7px;
font-weight: 500px;
border-bottom: 1px solid #D8D9DC;
}
.date{
line-height: 25px;
color: #919797;
font-size: 12px;
}
.box9{
width: 840px;
height: 200px;
background-color: rgb(255, 255, 255);
line-height: 25px;
color: #5F6464;
position: relative;
top: 61px;
}
.box10{
width: 840px;
height: 60px;
background-color: rgb(255, 255, 255);
line-height: 25px;
color: #5F6464;
position: relative;
top: 100px;
}
.box11{
width: 840px;
height: 126.2px;
background-color: rgb(255, 255, 255);
line-height: 25px;
color: #5F6464;
position: relative;
top: 170px;
}
.box12{
width: 614px;
height: 417px;
background-color: rgb(255, 255, 255);
position: relative;
top: 168px;
left: 117px;
}
.box13{
width: 840px;
height: 126.2px;
background-color: rgb(255, 255, 255);
line-height: 25px;
color: #5F6464;
position: relative;
top: 170px;
}
.box14{
width: 840px;
height: 60px;
background-color: rgb(255, 255, 255);
line-height: 25px;
color: #5F6464;
position: relative;
top: 205px;
}
.box15{
width: 840px;
height: 126.2px;
background-color: rgb(255, 255, 255);
line-height: 25px;
color: #5F6464;
position: relative;
top: 249px;
}
.box16{
width: 840px;
height: 126.2px;
background-color: rgb(255, 255, 255);
line-height: 25px;
color: #5F6464;
position: relative;
top: 277px;
}
.box17{
width: 614px;
height: 417px;
background-color: rgb(255, 255, 255);
position: relative;
top: 302px;
left: 117px;
}
.wrap_footer{ width:100%;
height: 676px;
background: #fff;
position: relative;
top: 8px;
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 #fff;
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(./tech-bg.avif) 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(./华为标签.lnk) 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: -181px; 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;
}
.box{
width: 211px;
height: 35px;
float: left;
position: relative;
left: 0px;
top: 21px;}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<div class="box5">
<ul class="ul1">
<li class="li1">
简介
<ul class="ul2">
<li class="li2">公式简介</li>
<li class="li2">愿景及使命</li>
<li class="li2">发展历程</li>
<li class="li2">业务架构</li>
<li class="li2">管理团队</li>
<li class="li2">董事会成员</li>
<div class="li2">企业文化</div>
<div class="li2">办公地点</div>
</ul>
</li>
<li class="li1">
业务
<ul class="ul2">
<li class="li2">面向用户</li>
<li class="li2">面向企业</li>
<li class="li2">创新科技</li>
</ul>
</li>
<li class="li1">
员工
<ul class="ul2">
<li class="li2">人才发展</li>
<li class="li2">腾讯学堂</li>
<li class="li2">工作环境</li>
<li class="li2">员工活动</li>
</ul>
</li>
<li class="li1">
ESG
<ul class="ul2">
<li class="li2">环境</li>
<li class="li2">社会</li>
<li class="li2">治理</li>
<li class="li2">ESG评及</li>
<li class="li2">报告</li>
</ul>
</li>
<li class="li1">
投资者
<ul class="ul2">
<li class="li2">季度业绩投资者新闻</li>
<li class="li2">公告财务报告</li>
<li class="li2">业务电话投资者日历</li>
<li class="li2">投资者工具包</li>
<li class="li2">证券及债券信息</li>
</ul>
</li>
<li class="li1">
媒体
<ul class="ul2">
<li class="li2">企业动态</li>
<li class="li2">财务新闻</li>
<li class="li2">腾讯视角</li>
<li class="li2">媒体资料库</li>
</ul>
</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 class="bg_hover"></div>
</div>
<div class="box4">
<h1>Tencent腾讯</h1>
</div>
</div>
<div class="box6">
<div class="pp">
首页>媒体>腾讯视角>文章详细
</div>
<div class="box8">
<div class="box7">
街边小店和小修小补入驻数字地图<br>
<span class="date">2024.01.12</span>
</div>
<div class="box9"><p>    曾经无处不在的便民商铺和小修小补店正慢慢从中国的城市生活中“消失”。
城镇化和大型商业综合体使得那些夫妻店和街头小贩渐渐淡出人们的视野。那些在数字化浪潮下艰难经营的小店仿佛“失联”了：
他们没有网站，没有社交媒体账号，在网络上没有任何存在感。然而，这些便民小店构筑起老街坊们的便民圈，特别是在北京、上海、
深圳和广州这样的大城市。当居民发现他们常去的小修小补店日渐式微，一直给他们配钥匙、补自行车胎或是修电器的人已经无处可寻，
他们总会怅然若失 </p> </div>
<div class="box10">
<p>  为了能让这些便民且充满城市文化底色的小店发展下去，我们开始积极采取行动，协助他们步入数字时代。
我们想要保留并重振城市的烟火气。事实上，便民小店解决了很多人的温饱。我们的技术可以帮助他们跟上社会的变化。</p> </div>
<div class="box11"><p>  腾讯的解决方案非常简单——我们发起了“小修小补引路行动”，在腾讯地图上标出一个个便民小店。
原本只能通过口口相传为人所知的店铺地址和联系方式现在被搬上数字世界，可以在腾讯地图和广受欢迎的微信平台中进行定位和搜索。
我们还提供一个免费的AI功能，帮助无名小店设计标志和招牌，
方便挂在店面上，这样顾客在街上更容易找到它们。腾讯也鼓励普通大众在腾讯数字地图上添加他们生活中不可或缺的小店。
</p></div>
<img src="./wmy.avif" class="box12">
<div class="box13">华姐就是该计划的众多受益者之一。20年来，她一直在深圳蛇口的一个仅有10平方米的小店里售卖传统客家特产和日杂。
这个店铺养活了她整个家庭。随着网络数字化进程的加深，华姐和她的小店却渐渐淡出人们的视野。
华姐为未来的生意感到担忧，却不知该怎么做。现在，她的店面上挂着一个全新的招牌—— “华姐客家特产”，她感到松了一口气。</div>
<div class="box14">“腾讯地图让我的生意回春了，”华姐说。“不仅提醒老顾客我的店在哪，还带来了新顾客，特别是那些想买客家特产的人。”</div>
<div class="box15">在中国，这种街头巷尾的小店不计其数。自2023年年初项目启动以来，这份地图已收录了200多座城市的超过50万家修补小店，在网友的共同努力下，
有6万多家小店搬上了地图。我们的AI技术帮忙制作了超过一万个免费招牌。我们发现，搜索次数最多的服务是配钥匙，其次是手机维修和裁缝。</div>
<div class="box16">腾讯将继续努力，助力各地中小商户在持续推进的数字化转型中保持竞争力。下一步，腾讯将与微信支付合作，帮助小店开通电子支付服务，
从而更好地服务顾客，同时让交易更加便捷高效。</div>
<img src="./wmx.avif" class="box17">
</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="" alt="img">
</a>
</li>
<li>
<a href="javascript:;" target="_blank">
<i class="icon i_weibo"></i>
<img src="" alt="">
</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>
<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">
<div class="box">
<h1>Tencent腾讯</h1>
</div>
</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:;">粤网文【2017】6138-1456号</a>
</li>
<li class="num">
<a href="javascript:;">粤B2-20090059</a>
</li>
</ul>
<p class="copyright"><a href="javascript:;" class="flag_num"><span>粤公网安备 44030502008569号</span></a>Copyright ©
1998 - 2024Tencent. All Rights Reserved. <br class="flag_m">腾讯公司 版权所有</p>
</div>
<div class="back_to_top">
<a class="back">回到顶部</a>
</div>
</div>
</div>
</body>
</html>效果图如下：
6531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
