玻璃拟物自适应HTML图片展示页面

温馨提示:本文最后更新于2025-02-28 21:47:41,某些文章具有时效性,若有错误或已失效,请在下方留言或联系站长

图片[1]-玻璃拟物自适应HTML图片展示页面-胖大海博客资源网

页面效果如上;其它元素自行添加!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #333;
color: #F5ECE7;
}
img {
max-width: 100%;
height: auto;
}
/* 全局样式 */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* 导航栏样式 */
.navbar {
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.nav-list {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
align-items: center;
height: 60px;
}
.nav-item {
margin: 0 10px;
}
.nav-link {
text-decoration: none;
color: #333;
font-weight: bold;
transition: color 0.3s ease;
}
.nav-link:hover {
color: #666;
}
/* 图文双列表样式 */
.content {
flex: 1;
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
padding: 20px;
}
.product-list {
width: 45%;
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.product-item {
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
text-align: center;
width: 100%;
}
.product-image {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 5px;
margin-bottom: 10px;
}
.product-title {
margin-top: 0;
color: #333;
}
.product-description {
color: #666;
margin-bottom: 20px;
}
/* 购买按钮样式 */
.buy-button {
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
display: block;
margin: 0 auto;
}
.buy-button:hover {
background-color: #0056b3;
}
</style>
<title>自适应玻璃拟态图片展示</title>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<ul class="nav-list">
<li class="nav-item"><a href="#" class="nav-link">网站首页</a></li>
<li class="nav-item"><a href="#" class="nav-link">图片分类</a></li>
<li class="nav-item"><a href="#" class="nav-link">特色图片</a></li>
<li class="nav-item"><a href="#" class="nav-link">个人中心</a></li>
</ul>
</nav>
<!-- 图片列表 -->
<div class="content">
<div class="product-list">
<div class="product-item">
<img src="https://public.giantapp.cn/upload/692c4903c2db4256bc70a830d9ef3977/wallpapers/4d40d44d67a46fb1023c688a1f7e4e00/1738827371786_9OJyH.png" alt="图片1" onclick="showPopup(this)">
</div>
<div class="product-item">
<img src="https://public.giantapp.cn/upload/692c4903c2db4256bc70a830d9ef3977/wallpapers/cc3a417967a4713505b33c3a31f01b07/1738827453101_oNEZi.png" alt="图片2">
</div>
</div>
<div class="product-list">
<div class="product-item">
<img src="https://public.giantapp.cn/upload/3f533cac0d3b4df1be65756dc2e3cf98/wallpapers/c7008c9c669ffbeb002055c56d5f53bf/1720614867169_G7U_D.png" alt="图片3">
</div>
<div class="product-item">
<img src="https://public.giantapp.cn/upload/3f533cac0d3b4df1be65756dc2e3cf98/wallpapers/d6b4ca8f669ffc2e0022aa2a6e58bdcf/1720614830844_jkuvc.png" alt="图片4">
</div>
</div>
</div>
<!--<button class="buy-button">按钮</button>-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  body {
    background-color: #333;
    color: #F5ECE7;
  }
  img {
    max-width: 100%;
    height: auto;
  }
    /* 全局样式 */
  body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  /* 导航栏样式 */
  .navbar {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .nav-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
  }

  .nav-item {
    margin: 0 10px;
  }

  .nav-link {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    transition: color 0.3s ease;
  }

  .nav-link:hover {
    color: #666;
  }

  /* 图文双列表样式 */
  .content {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 20px;
  }

  .product-list {
    width: 45%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .product-item {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
  }

  .product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 10px;
  }

  .product-title {
    margin-top: 0;
    color: #333;
  }

  .product-description {
    color: #666;
    margin-bottom: 20px;
  }

  /* 购买按钮样式 */
  .buy-button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: block;
    margin: 0 auto;
  }

  .buy-button:hover {
    background-color: #0056b3;
  }
  </style>
  <title>自适应玻璃拟态图片展示</title>
</head>

<body>
  <!-- 导航栏 -->
  <nav class="navbar">
    <ul class="nav-list">
      <li class="nav-item"><a href="#" class="nav-link">网站首页</a></li>
      <li class="nav-item"><a href="#" class="nav-link">图片分类</a></li>
      <li class="nav-item"><a href="#" class="nav-link">特色图片</a></li>
      <li class="nav-item"><a href="#" class="nav-link">个人中心</a></li>
    </ul>
  </nav>
  <!-- 图片列表 -->
  <div class="content">
    <div class="product-list">
      <div class="product-item">
<img src="https://public.giantapp.cn/upload/692c4903c2db4256bc70a830d9ef3977/wallpapers/4d40d44d67a46fb1023c688a1f7e4e00/1738827371786_9OJyH.png" alt="图片1" onclick="showPopup(this)">
      </div>
      
      <div class="product-item">
        <img src="https://public.giantapp.cn/upload/692c4903c2db4256bc70a830d9ef3977/wallpapers/cc3a417967a4713505b33c3a31f01b07/1738827453101_oNEZi.png" alt="图片2">
      </div>
    </div>

    <div class="product-list">
      <div class="product-item">
        <img src="https://public.giantapp.cn/upload/3f533cac0d3b4df1be65756dc2e3cf98/wallpapers/c7008c9c669ffbeb002055c56d5f53bf/1720614867169_G7U_D.png" alt="图片3">
      </div>
      
      <div class="product-item">
        <img src="https://public.giantapp.cn/upload/3f533cac0d3b4df1be65756dc2e3cf98/wallpapers/d6b4ca8f669ffc2e0022aa2a6e58bdcf/1720614830844_jkuvc.png" alt="图片4">
      </div>
    </div>
  </div>

<!--<button class="buy-button">按钮</button>-->
</body>

</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color: #333; color: #F5ECE7; } img { max-width: 100%; height: auto; } /* 全局样式 */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh; } /* 导航栏样式 */ .navbar { background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .nav-list { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-around; align-items: center; height: 60px; } .nav-item { margin: 0 10px; } .nav-link { text-decoration: none; color: #333; font-weight: bold; transition: color 0.3s ease; } .nav-link:hover { color: #666; } /* 图文双列表样式 */ .content { flex: 1; display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; padding: 20px; } .product-list { width: 45%; margin-bottom: 20px; display: flex; flex-direction: column; align-items: center; } .product-item { background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 20px; margin-bottom: 20px; text-align: center; width: 100%; } .product-image { width: 100%; height: 200px; object-fit: cover; border-radius: 5px; margin-bottom: 10px; } .product-title { margin-top: 0; color: #333; } .product-description { color: #666; margin-bottom: 20px; } /* 购买按钮样式 */ .buy-button { background-color: #007bff; color: white; border: none; border-radius: 5px; padding: 10px 20px; cursor: pointer; transition: background-color 0.3s ease; display: block; margin: 0 auto; } .buy-button:hover { background-color: #0056b3; } </style> <title>自适应玻璃拟态图片展示</title> </head> <body> <!-- 导航栏 --> <nav class="navbar"> <ul class="nav-list"> <li class="nav-item"><a href="#" class="nav-link">网站首页</a></li> <li class="nav-item"><a href="#" class="nav-link">图片分类</a></li> <li class="nav-item"><a href="#" class="nav-link">特色图片</a></li> <li class="nav-item"><a href="#" class="nav-link">个人中心</a></li> </ul> </nav> <!-- 图片列表 --> <div class="content"> <div class="product-list"> <div class="product-item"> <img src="https://public.giantapp.cn/upload/692c4903c2db4256bc70a830d9ef3977/wallpapers/4d40d44d67a46fb1023c688a1f7e4e00/1738827371786_9OJyH.png" alt="图片1" onclick="showPopup(this)"> </div> <div class="product-item"> <img src="https://public.giantapp.cn/upload/692c4903c2db4256bc70a830d9ef3977/wallpapers/cc3a417967a4713505b33c3a31f01b07/1738827453101_oNEZi.png" alt="图片2"> </div> </div> <div class="product-list"> <div class="product-item"> <img src="https://public.giantapp.cn/upload/3f533cac0d3b4df1be65756dc2e3cf98/wallpapers/c7008c9c669ffbeb002055c56d5f53bf/1720614867169_G7U_D.png" alt="图片3"> </div> <div class="product-item"> <img src="https://public.giantapp.cn/upload/3f533cac0d3b4df1be65756dc2e3cf98/wallpapers/d6b4ca8f669ffc2e0022aa2a6e58bdcf/1720614830844_jkuvc.png" alt="图片4"> </div> </div> </div> <!--<button class="buy-button">按钮</button>--> </body> </html>
------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

------关注微信公众号:胖大海TuT------
© 版权声明
THE END
喜欢就支持一下吧
点赞675 分享
You're always on my mind.
你长眠,我常念。
评论 抢沙发

请登录后发表评论

    暂无评论内容