body{
margin:0;
font-family:Arial;
background:black;
}

/* 顶部导航栏 */
.navbar{
position:fixed;
top:0;
width:100%;
height:60px;
background:rgba(0,0,0,0.6);
display:flex;
align-items:center;
justify-content:center;
z-index:100;
}

/* 导航菜单 */
.navbar nav{
display:flex;
gap:40px;
}

.navbar a{
color:white;
text-decoration:none;
font-size:18px;
}

.navbar a:hover{
color:#00ffff;
}

/* 图片区域 */
.hero{
margin-top:60px;
}

/* 图片铺满浏览器 */
.hero img{
width:100%;
height:calc(100vh - 60px);
object-fit:cover;
}

/* 手机端适配 */
@media (max-width:768px){

.navbar{
height:50px;
}

.navbar nav{
gap:20px;
}

.navbar a{
font-size:16px;
}

.hero{
margin-top:50px;
}

.hero img{
height:calc(100vh - 50px);
}

img{
max-width:100%;
height:auto;
}  
  
}