<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 页面整体 -->
<div class="page">
<!-- 头部位置 -->
<div class="header">
<ul>
<li><a href="#">登录</a></li>
<li><a href="#">兑换</a></li>
</ul>
</div>
<!-- 导航栏部分 -->
<div class="nav">
<div class="nav_left">
<ul>
<li><a href="#" class="game">游戏</a></li>
<li><a href="#">社区</a></li>
<li><a href="#">商品</a></li>
<li><a href="#">支持</a></li>
</ul>
</div>
<div class="nav_center">
<a href="#"><img src="img/logo-minecraft.svg" alt=""></a>
</div>
<div class="nav_right">
<a href="#">获取 MINECRAFT</a>
</div>
</div>
<!-- 内容部分 -->
<div class="content">
<div class="download">
<h1>欢迎来到 MINECRAFT</h1>
<p>新游戏、新更新、新畅玩方式应有尽有，快来加入最大的游戏社区之<br />一，今天就开启创作之旅吧！</p>
<div>
<a href="#">获取 MINECRAFT</a>
</div>
</div>
</div>
<!-- 更多游戏部分 -->
<div class="more">
<div class="more_game">
<h2>探索 MINECRAFT 游戏</h2>
<div class="box">
<div class="box_left">
<a href="#">←</a>
</div>
<div class="game first">
<img src="img/Games_Subnav_Minecraft-228x350.jpg" alt="">
<div class="mes1">
<a href="#">MINECRAFT</a>
<p>探索自己独一无二的世界，挺过黑<br />夜，并创建您能想象的一切！</p>
</div>
</div>
<div class="game">
<img src="img/Games_Subnav_Dungeona-228x350.jpg" alt="">
<div class="mes2">
<a href="#">MINECRAFT DUNGEONS</a>
<p>发现一款以经典地牢爬虫为灵感来<br />源的全新动作冒险游戏！</p>
</div>
</div>
<div class="game last">
<img src="img/MC_Education_KeyArt_650x1000-final.jpg" alt="">
<div class="mes3">
<a href="#">MINECRAFT 教育版</a>
<p>一个基于游戏的学习平台，支持来<br />自100多个国家/地区的成千上万<br />名教育工作者！</p>
</div>
</div>
<div class="box_right">
<a href="#">→</a>
</div>
</div>
</div>
</div>
<!-- 最新消息部分 -->
<div class="news">
<h1>最新消息</h1>
<div class="new_content">
<div class="new_left">
<a href="#">←</a>
</div>
<div class="new1">
<img src="img/java_realms_june_440x250.jpg" alt="">
<div class="link">
<a href="#">NEW ON REALMS:<br /> HARDCORE PARKOUR</a>
</div>
</div>
<div class="new2">
<img src="img/Xbox_Minecraft_WildUpdate_Main_.Net_440x250.jpg" alt="">
<div class="link">
<a href="#">THE WILD UPDATE IS<br />COMING</a>
<p>Experience the greater outdoors on<br /> june 7</p>
</div>
</div>
<div class="new3">
<img src="img/Minecraft_Yr1_NET_440x250.jpg" alt="">
<div class="link">
<a href="#">FAN FAVOURITES:YEAR 1</a>
</div>
</div>
<div class="new_right">
<a href="#">→</a>
</div>
</div>
</div>
<!-- 其他部分 -->
<div class="another">
<div class="black"></div>
<div class="more1">
<img src="img/Xbox_Minecraft_MarketPlace_5YearAnniversary_.Net_600x360.jpg" alt="">
<h1>庆祝商城 5 周年！</h1>
<p>在 5 月 24 日和 7 月 12 日之间，尽情探索粉丝最爱的五周年庆典，<br />邂逅最热门商城世界幕后的创作者。</p>
<a href="#">了解更多</a>
</div>
<div class="more2">
<img src="img/MinecraftDungeons_S2LuminousNight_.net_600x360.jpg" alt="">
<h1>闪耀吧，冒险者！</h1>
<p>在夜幕降临之际，通过各个楼层的神秘壁画、复杂的谜题和棘手的<br />敌人，以全新角度开启探索高塔之旅。</p>
<a href="#">了解更多</a>
</div>
<div class="more3">
<img src="img/Minecraft-Birthday_2022-PromoTile-600x360.jpg" alt="">
<h1>别具风格的庆祝</h1>
<p>参加Minecraft主题派对，你只需要准备个性化的服装、配饰和派对<br />用品！</p>
<a href="#">了解更多</a>
</div>
<div class="black_bottom"></div>
</div>
<!-- 社区部分 -->
<div class="community">
<div class="black_top"></div>
<div class="headline">
<h1>社区创作品</h1>
<p>发现最好的 Add-On、模组，以及非凡的 Minecraft 社区正在创建的更多内<br />容！</p>
<a href="#">探索</a>
</div>
<div class="middle">
<ul>
<li class="pic1">
<img src="img/meet-the-allay-header 277x277.jpg" alt="">
<div class="mask">
<h3>MEET THE ALLAY</h3>
</div>
</li>
<li class="pic2">
<img src="img/java_realms_june_277x277.jpg" alt="">
<div class="mask">
<h3>NEW ON REALMS:HARDCORE<br />OARKOUR</h3>
</div>
</li>
<li class="pic3">
<img src="img/waste-1x1(2).jpg" alt="">
<div class="mask">
<h3>AROUND THE BLOCK:NETHER<br />WASTES</h3>
</div>
</li>
<li class="pic4">
<img src="img/Xbox_Minecraft_WildUpdate_Main_.Net_277x277.jpg" alt="">
<div class="mask">
<h3>THE WILD UPDATE IS<br />COMING</h3>
</div>
</li>
</ul>
</div>
<div class="btn">
<a href="#">
<h3>加载更多内容</h3>
</a>
</div>
<div class="message">
<p>Xbox One、PlayStation 4、Nintendo Switch、iOS、Android 和 Windows 10 都支持跨平台游戏。跨平台游戏需要 Microsoft<br />
账号。Xbox One 在线多人游戏需要 Xbox Live 金会员资格。 4 在线多人游戏需要 PlayStation Plus 会员资格 。<br />Nintendo Switch
在线多人游戏需要 Nintendo Switch Online 会员资格。</p>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="attention">
<h3>关注 MINECRAFT</h3>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="footer_middle">
<div class="middle_content">
<div class="footer_left">
<img class="img1" src="img/Mojang2020Logo.png" alt="">
<img src="img/Logo_ Xbox_Game_Studio.jpg" alt="">
<p>Mojang ©2009-2022.“Minecraft”是 Mojang Synergies AB 的商标</p>
<ul>
<li><a href="#">查看 Mojang 条款和条件</a></li>
<li><a href="#">查看 Mojang 品牌和资产指南</a></li>
<li class="last1"><a href="#">管理同意</a></li>
</ul>
</div>
<div class="footer_center1">
<div>
<h3>游戏</h3>
<ul>
<li><a href="#">Minecraft</a></li>
<li><a href="#">Minecraft Dungeons</a></li>
<li><a href="#">Minecraft: Education Edition</a></li>
</ul>
</div>
<div>
<h3>社区</h3>
<ul>
<li><a href="#">社区</a></li>
<li><a href="#">创建者学习门户</a></li>
<li><a href="#">Mojang Studios 招贤纳士</a></li>
</ul>
</div>
</div>
<div class="footer_center2">
<div>
<h3>商店</h3>
<ul>
<li><a href="#">商城</a></li>
<li><a href="#">Minecraft 商店</a></li>
</ul>
</div>
<div>
<h3>支持</h3>
<ul>
<li><a href="#">讨论与帮助</a></li>
<li><a href="#">反馈</a></li>
<li><a href="#">网站地图</a></li>
</ul>
</div>
<div>
<h3>账户</h3>
<ul>
<li><a href="#">档案</a></li>
<li><a href="#">兑换</a></li>
</ul>
</div>
</div>
<div class="footer_right">
<img src="img/esrb_2021.svg" alt="">
</div>
</div>
</div>
<div class="footer_bottom">
<div class="language">
<a href="#">简体中文</a>
</div>
<div class="about">
<ul>
<li><a href="#">隐私和 Cookie</a></li>
<li><a href="#">使用条款</a></li>
<li><a href="#">商标</a></li>
<li><a href="#">关于我们的广告</a></li>
<li><a href="#">© 2022 Microsoft</a></li>
</ul>
</div>
<div class="logo">
<img src="img/Logo_ Microsoft.svg" alt="">
</div>
</div>
</div>
</div>
</body>
</html>* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: '微软雅黑';
}
a:visited {
color: #a0e080;
}
.header {
width: 100%;
height: 35px;
background-color: #000000;
}
.header ul {
display: block;
float: right;
margin-right: 62px;
}
.header ul li {
float: left;
line-height: 35px;
}
.header ul li a {
font-size: 12px;
padding: 0 28px;
font-weight: 700;
}
.header ul li a:link {
color: #a0e080;
}
.header ul li a:hover {
color: #ffffff;
}
.nav {
width: 100%;
height: 84px;
background-color: #171615;
border-bottom: 1px solid #ffffff;
z-index: 1;
}
.nav_left ul {
display: block;
padding-left: 55px;
}
.nav_left ul li {
float: left;
line-height: 84px;
}
.nav_left ul li .game {
padding: 35px 49px 35px 0;
}
.nav_left ul li a {
font-size: 12px;
font-weight: 700;
padding: 35px 26px;
color: #ffffff;
}
.nav_left ul li a:link {
color: #ffffff;
}
.nav_left ul li a:hover {
color: #a0e080;
}
.nav_center {
float: left;
width: 235px;
height: 42px;
margin-top: 22px;
margin-left: 253px;
}
.nav_right {
float: left;
width: 200px;
height: 42px;
background-color: #3b8526;
margin-left: 255px;
border-top: 4px solid #6bc349;
border-bottom: 4px solid #2a631c;
margin-top: 17px;
text-align: center;
box-shadow: ;
box-shadow: -1px 2px #111010;
cursor: pointer;
}
.nav_right a {
font-size: 18px;
font-weight: 700;
line-height: 42px;
color: #ffffff;
}
.nav_right:hover {
background-color: #bfc1c5;
border-top: 4px solid #bfc1c5;
border-bottom: 4px solid #bfc1c5;
transition: .4s;
}
.nav_right:hover a {
color: #252525;
transition: .4s;
}
.content {
width: 100%;
height: 600px;
background-color: #000000;
}
.download {
margin: 0 auto;
width: 1200px;
height: 600px;
background-image: url(../img/home-hero-1200x600.jpg);
color: #ffffff;
}
.download h1 {
font-size: 36px;
padding-top: 104px;
margin-left: 100px;
color: #ffffff;
}
.download p {
padding: 16px 0;
font-size: 18px;
margin-left: 100px;
}
.download div {
width: 270px;
height: 65px;
font-weight: 700;
margin-top: 24px;
line-height: 65px;
font-size: 19px;
background-color: #3b8526;
margin-left: 100px;
border-top: 4px solid #6bc349;
border-bottom: 4px solid #2a631c;
text-align: center;
box-shadow: 0 4px rgba(0, 0, 0, .2);
cursor: pointer;
}
.download div a {
color: #ffffff;
}
.download div:hover {
background-color: #252322;
border-top: 4px solid #252322;
border-bottom: 4px solid #252322;
transition: .4s;
}
.more {
width: 100%;
height: 792px;
background: url(../img/bg-wool-dark.png);
position: relative;
}
.more_game {
position: absolute;
overflow: hidden;
width: 1140px;
height: 742px;
background-color: #eeeeee;
margin-top: 50px;
left: 105px;
}
.more_game h2 {
text-align: center;
font-size: 28px;
margin-top: 80px;
}
.box {
width: 1000px;
height: 500px;
margin: 0 auto;
}
.box_left {
float: left;
width: 50px;
height: 48px;
background-color: #3b8526;
margin-left: 23px;
margin-top: 136px;
border-top: 4px solid #6bc349;
border-bottom: 4px solid #2a631c;
box-shadow: 0 4px rgba(0, 0, 0, .2);
cursor: pointer;
font-size: 24px;
text-align: center;
line-height: 48px;
}
.box_left:hover {
border-top: 4px solid #242221;
border-bottom: 4px solid #242221;
background-color: #242221;
transition: all .4s;
}
.box_right {
float: right;
width: 50px;
height: 48px;
background-color: #3b8526;
border-top: 4px solid #6bc349;
border-bottom: 4px solid #2a631c;
box-shadow: 0 4px rgba(0, 0, 0, .2);
margin-top: 136px;
margin-right: 23px;
cursor: pointer;
font-size: 24px;
text-align: center;
line-height: 48px;
}
.box_right:hover {
border-top: 4px solid #242221;
border-bottom: 4px solid #242221;
background-color: #242221;
transition: all .4s;
}
.game img {
float: left;
width: 216px;
height: 335px;
margin-top: 63px;
margin-right: 64px;
margin: 63px 32px 0 32px;
box-sizing: border-box;
cursor: pointer;
}
.game img:hover {
transform: scale(1.05);
border: 2px solid #84c94c;
transition: .2s;
}
.mes1 {
position: absolute;
bottom: 100px;
left: 172px;
width: 220px;
height: 100px;
text-align: center;
}
.mes1 a {
font-size: 18px;
font-weight: 700;
color: #196d17;
}
.mes1:hover a {
color: #181818;
transition: .2s;
border-bottom: 1px solid #181818;
}
.mes1 p {
font-size: 14px;
}
.mes2 {
position: absolute;
bottom: 100px;
left: 452px;
width: 220px;
height: 100px;
text-align: center;
}
.mes2 a {
font-size: 18px;
font-weight: 700;
color: #196d17;
}
.mes2:hover a {
color: #181818;
transition: .2s;
border-bottom: 1px solid #181818;
}
.mes2 p {
font-size: 14px;
}
.mes3 {
position: absolute;
bottom: 100px;
left: 732px;
width: 220px;
height: 100px;
text-align: center;
}
.mes3 a {
font-size: 18px;
font-weight: 700;
color: #196d17;
}
.mes3:hover a {
color: #181818;
transition: .2s;
border-bottom: 1px solid #181818;
}
.mes3 p {
font-size: 14px;
}
.news {
width: 100%;
height: 605px;
background: url(../img/bg-wool-dark.png);
}
.news h1 {
font-size: 28px;
color: #ffffff;
text-align: center;
padding-top: 73px;
}
.new_content {
position: relative;
width: 1236px;
height: 400px;
margin: 0 auto;
box-sizing: border-box;
}
.new_content .new1 {
position: absolute;
margin-top: 53px;
margin-left: 91px;
transform: scale(0.9);
}
.new_content .new2 {
position: absolute;
margin-top: 53px;
margin-left: 454px;
font-size: 12px;
font-weight: 700;
}
.new_content .new2::after {
content: "NEWS";
display: block;
position: absolute;
width: 70px;
height: 30px;
background-color: #ffffff;
top: 180px;
left: 138px;
line-height: 30px;
text-align: center;
}
.new_content .new3 {
position: absolute;
margin-top: 53px;
margin-left: 816px;
transform: scale(0.9);
}
.new_content img {
width: 345px;
height: 198px;
border: 2px solid #ffffff;
cursor: pointer;
}
.new_content img:hover {
border: 2px solid #84c94c;
}
.link {
width: 310px;
height: 80px;
text-align: center;
margin: 18px auto 0;
}
.link p {
font-size: 15px;
color: #ffffff;
font-weight: 700;
}
.new_content a {
font-size: 18px;
color: #ffffff;
font-weight: 700;
}
.new_content a:hover {
color: #84c94c;
}
.new_left {
float: left;
width: 50px;
height: 44px;
background-color: #3b8526;
margin-left: 33px;
margin-top: 136px;
border-top: 4px solid #6bc349;
border-bottom: 4px solid #2a631c;
box-shadow: 0 4px rgba(0, 0, 0, .2);
cursor: pointer;
font-size: 24px;
text-align: center;
line-height: 44px;
}
.new_left:hover {
border-top: 4px solid #242221;
border-bottom: 4px solid #242221;
background-color: #242221;
transition: all .4s;
}
.new_right {
float: right;
width: 50px;
height: 44px;
background-color: #3b8526;
margin-right: 13px;
margin-top: 136px;
border-top: 4px solid #6bc349;
border-bottom: 4px solid #2a631c;
box-shadow: 0 4px rgba(0, 0, 0, .2);
cursor: pointer;
font-size: 24px;
text-align: center;
line-height: 44px;
}
.new_right:hover {
border-top: 4px solid #242221;
border-bottom: 4px solid #242221;
background-color: #242221;
transition: all .2s;
}
.another {
width: 100%;
height: 1250px;
background: url(../img/bg-wool-light.png);
}
.another a {
font-size: 15px;
font-weight: 700;
color: #196d17;
}
.another .black {
width: 100%;
height: 100px;
background: url(../img/trans-top-darkwool.png);
}
.another div {
width: 1000px;
height: 350px;
margin: 0 auto;
}
.another div img {
width: 475px;
height: 285px;
}
.more1 h1 {
padding-top: 65px;
}
.more1 p {
padding-top: 18px;
}
.more2 {
padding-left: 70px;
}
.more2 h1 {
padding-top: 65px;
}
.more2 p {
padding-top: 18px;
}
.more3 h1 {
padding-top: 65px;
}
.more3 p {
padding-top: 18px;
}
.more1 img {
float: left;
padding-right: 30px;
}
.more2 img {
float: right;
}
.more3 img {
float: left;
padding-right: 30px;
}
.another .black_bottom {
background: url(../img/trans-bottom-darkwool.png);
width: 100%;
height: 100px;
}
.community {
width: 100%;
height: 850px;
background-color: #f8f5f4;
}
.black_top {
background: url(../img/bg-wool-dark.png);
width: 100%;
height: 100px;
}
.headline {
width: 600px;
height: 160px;
margin: 80px auto 0;
text-align: center;
}
.headline h1 {
font-size: 28px;
margin-bottom: 20px;
}
.headline p {
font-size: 15px;
margin-bottom: 20px;
}
.headline a {
font-size: 15px;
font-weight: 700;
color: #196d17;
}
.middle {
width: 1140px;
height: 300px;
margin: 0 auto;
}
.middle ul {
margin-top: 30px;
}
.middle ul li {
float: left;
margin: 0 7px;
height: 266px;
position: relative;
}
.middle ul li img {
width: 270px;
height: 266px;
}
.mask {
position: absolute;
color: #ffffff;
font-weight: 700;
text-align: center;
bottom: 0;
width: 270px;
height: 84px;
background-color: rgba(0, 0, 0, .7);
}
.mask h3 {
padding-top: 32px;
font-size: 18px;
}
.pic2 .mask h3 {
padding-top: 32px;
font-size: 14px;
}
.pic3 .mask h3 {
padding-top: 32px;
font-size: 14px;
}
.pic1::after {
content: "DEEP DIVE S";
display: block;
position: absolute;
bottom: 64px;
height: 34px;
background-color: #ffffff;
padding: 0 18px;
line-height: 34px;
font-size: 12px;
font-weight: 700;
left: 78px;
}
.pic2::after {
content: "NEWS";
display: block;
position: absolute;
bottom: 64px;
height: 34px;
background-color: #ffffff;
padding: 0 18px;
line-height: 34px;
font-size: 12px;
font-weight: 700;
left: 99px;
}
.pic3::after {
content: "DEEP DIVE S";
display: block;
position: absolute;
bottom: 64px;
height: 34px;
background-color: #ffffff;
padding: 0 18px;
line-height: 34px;
font-size: 12px;
font-weight: 700;
left: 78px;
}
.pic4::after {
content: "NWES";
display: block;
position: absolute;
bottom: 64px;
height: 34px;
background-color: #ffffff;
padding: 0 18px;
line-height: 34px;
font-size: 12px;
font-weight: 700;
left: 99px;
}
.pic1 {
overflow: hidden;
cursor: pointer;
}
.pic2 {
overflow: hidden;
cursor: pointer;
}
.pic3 {
overflow: hidden;
cursor: pointer;
}
.pic4 {
overflow: hidden;
cursor: pointer;
}
.pic1:hover img {
transform: scale(1.1);
transition: all .4s;
}
.pic1:hover .mask {
color: #ffffff;
font-weight: 700;
text-align: center;
bottom: 0;
width: 270px;
height: 103px;
background-color: rgba(0, 0, 0, .7);
transition: all .4s;
}
.pic1:hover::after {
bottom: 83px;
transition: all .4s;
}
.pic2:hover img {
transform: scale(1.1);
transition: all .4s;
}
.pic2:hover .mask {
color: #ffffff;
font-weight: 700;
text-align: center;
bottom: 0;
width: 270px;
height: 154px;
background-color: rgba(0, 0, 0, .7);
transition: all .4s;
}
.pic2:hover::after {
bottom: 134px;
transition: all .4s;
}
.pic3:hover img {
transform: scale(1.1);
transition: all .4s;
}
.pic3:hover .mask {
color: #ffffff;
font-weight: 700;
text-align: center;
bottom: 0;
width: 270px;
height: 154px;
background-color: rgba(0, 0, 0, .7);
transition: all .4s;
}
.pic3:hover::after {
bottom: 134px;
transition: all .4s;
}
.pic4:hover img {
transform: scale(1.1);
transition: all .4s;
}
.pic4:hover .mask {
color: #ffffff;
font-weight: 700;
text-align: center;
bottom: 0;
width: 270px;
height: 103px;
background-color: rgba(0, 0, 0, .7);
transition: all .4s;
}
.pic4:hover::after {
bottom: 83px;
transition: all .4s;
}
.btn {
width: 600px;
height: 80px;
margin: 0 auto;
text-align: center;
}
.btn a {
display: inline-block;
width: 171px;
height: 44px;
background-color: #3b8526;
border-top: 4px solid #6bc349;
border-bottom: 4px solid #2a631c;
box-shadow: 0 3px rgba(0, 0, 0, .3);
line-height: 44px;
}
.btn a h3 {
font-size: 18px;
color: #ffffff;
}
.btn a:hover {
background-color: #2f2c2b;
border-top: 4px solid #2f2c2b;
border-bottom: 4px solid #2f2c2b;
transition: all .4s;
}
.message {
width: 934px;
height: 100px;
margin: 0 auto;
text-align: center;
}
.message p {
font-size: 16px;
font-style: italic;
}
.footer {
width: 100%;
height: 650px;
}
.attention {
width: 100%;
height: 141px;
background-color: #000000;
}
.attention h3 {
color: #ffffff;
font-size: 15px;
text-align: center;
padding-top: 25px;
}
.attention ul {
padding-top: 25px;
text-align: center;
}
.attention ul li {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #2a2a2a;
margin: 0 30px;
}
.footer_middle {
width: 100%;
height: 408px;
background-color: #111111;
}
.middle_content {
width: 1140px;
height: 408px;
margin: 0 auto;
padding-top: 78px;
}
.footer_left {
float: left;
width: 420px;
height: 408px;
}
.footer_left .img1 {
margin-right: 60px;
}
.footer_left p {
font-size: 12px;
color: #d1cfce;
padding-top: 45px;
}
.footer_left ul {
padding-top: 18px;
}
.footer_left ul li {
display: inline-block;
font-size: 12px;
border-right: 1px solid #ffffff;
padding-right: 8px;
}
.footer_left ul .last1 {
border: none;
}
.footer_center1 {
float: left;
margin-left: 80px;
}
.footer_center1 h3 {
color: #ffffff;
font-size: 15px;
}
.footer_center1 ul li {
font-size: 12px;
padding: 5px 0;
}
.footer_center2 {
float: left;
margin-left: 80px;
}
.footer_center2 h3 {
color: #ffffff;
font-size: 15px;
}
.footer_center2 ul li {
font-size: 12px;
padding: 5px 0;
}
.footer_right {
float: right;
width: 300px;
height: 300px;
}
.footer_right img {
width: 190px;
height: 127px;
padding-left: 100px;
}
.footer_bottom {
position: relative;
width: 100%;
height: 100px;
background-color: #313131;
}
.language {
position: absolute;
width: 94px;
height: 30px;
border-radius: 2px;
left: 120px;
top: 36px;
}
.language a {
color: #ffffff;
font-size: 12px;
font-weight: 700;
}
.about {
position: absolute;
left: 460px;
top: 36px;
}
.about ul {
display: inline-block;
}
.about ul li {
float: left;
font-size: 12px;
font-weight: 700;
padding: 0 8px;
}
.logo {
position: absolute;
top: 34px;
right: 170px;
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
