<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
HiGA 青年人才展示
</title>
<style>
/* 全局 */
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
background:
linear-gradient(
180deg,
#eef4fa,
#ffffff
);
font-family:
"Microsoft YaHei",
Arial,
sans-serif;
}
/* 页面 */
.container{
width:100%;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:30px 0;
}
/* 图片外框 */
.poster{
position:relative;
background:white;
box-shadow:
0 20px 50px rgba(0,0,0,.12);
}
/* 图片 */
.poster img{
display:block;
width:auto;
height:auto;
max-height:95vh;
max-width:92vw;
object-fit:contain;
}
/* 顶部浮层 */
.header{
position:fixed;
top:20px;
left:50%;
transform:translateX(-50%);
z-index:10;
padding:10px 28px;
background:
rgba(255,255,255,.85);
backdrop-filter:
blur(10px);
border-radius:30px;
box-shadow:
0 8px 25px rgba(0,0,0,.08);
}
.header h1{
font-size:18px;
letter-spacing:3px;
color:#1d3d70;
font-weight:600;
}
.header span{
font-size:12px;
color:#888;
margin-left:10px;
}
/* 手机端 */
@media(max-width:768px){
.container{
padding:0;
align-items:flex-start;
}
.poster{
width:100%;
box-shadow:none;
}
.poster img{
width:100%;
max-width:100%;
height:auto;
}
.header{
top:12px;
padding:8px 18px;
}
.header h1{
font-size:15px;
}
}
/* 大屏 */
@media(min-width:1600px){
.poster img{
max-height:98vh;
}
}
</style>
</head>
<body>
<!-- 顶部标题 -->
<div class="header">
<h1>
HiGA 青年人才展示
</h1>
<span>
Young Talent
</span>
</div>
<!-- 主体 -->
<div class="container">
<div class="poster">
<img
src="talent.jpg"
alt="HiGA青年人才展示"
>
</div>
</div>
<script>
// 图片禁止拖动
document
.querySelector("img")
.addEventListener(
"dragstart",
function(e){
e.preventDefault();
});
</script>
</body>
</html>