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

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

页面效果如上；其它元素自行添加！

<!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------

版权声明 1 本网站名称：胖大海博客资源网
2 本站永久网址：https://www.pdha.top
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ941093035进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END