仿倾心壁纸详情布局-前端模板

最新推荐文章于 2025-06-01 14:38:30 发布

闽字

最新推荐文章于 2025-06-01 14:38:30 发布

阅读量280

点赞数 3

文章标签：前端

本文链接：https://blog.youkuaiyun.com/xiaoxuesheng566/article/details/145941663

版权

倾心壁纸系列

倾心壁纸系列一：模仿首页布局

前端：bootstrap、Jquery

文章目录

目录

倾心壁纸系列

文章目录

前言

一、界面预览

二、代码实现

1.detail.html

2.detail.css

3.detail.js

总结

前言

最近为了宣传自己的网站，疯狂向各大网站投稿自己的作品，每次就写点这种没啥用的东西，然后再配上自己的api，也是达到了宣传自己网站的作用。

这次写的是一个壁纸网站，很简洁的一个小项目。

一、界面预览

这个是他官网的界面，也是蛮简单的，就一个图片展示。

二、代码实现

1.detail.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>暖心壁纸 - 图片详情</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
  <link rel="stylesheet" href="static/css/detail.css">
</head>
<body>
  <div class="page-container">
    <!-- Header -->
    <header class="header-container">
      <div class="container">
        <div class="d-flex flex-wrap justify-content-between align-items-center py-2">
          <div class="d-flex align-items-center mb-2 mb-md-0">
            <h1 class="site-title mb-0">暖心壁纸</h1>
            <div class="ms-3 upload-btn d-none d-md-flex">
              <i class="bi bi-cloud-upload"></i> 
              <span>上传</span>
            </div>
          </div>
          <div class="d-flex align-items-center">
            <a href="#" class="nav-icon me-3">
              <i class="bi bi-person-circle fs-4 text-warning"></i>
            </a>
            <a href="#" class="nav-icon me-3 d-none d-md-flex">
              <i class="bi bi-heart"></i>
              <span>收藏</span>
            </a>
            <a href="#" class="nav-icon me-3 d-none d-md-flex">
              <i class="bi bi-gear"></i>
              <span>设置</span>
            </a>
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" id="themeSwitch">
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main class="main-content">
      <div class="container">
        <div class="row">
          <!-- Image Column -->
          <div class="col-md-9">
            <div class="wallpaper-detail">
              <img src="https://image1.zhongerqiqi.cn:47672/bizhi/i/2025/01/25/xfwy90-2.jpg?height=600&width=1000" alt="壁纸" class="img-fluid" id="wallpaperImage">
            </div>
          </div>
          
          <!-- Sidebar -->
          <div class="col-md-3">
            <div class="sidebar">
              <button class="btn btn-success w-100 mb-2">
                <i class="bi bi-download"></i> 下载壁纸
              </button>
              <button class="btn btn-primary w-100 mb-4">
                <i class="bi bi-heart"></i> 收藏图像
              </button>
              
              <div class="image-info">
                <h5>图像信息</h5>
                <table class="table table-sm">
                  <tbody>
                    <tr>
                      <td>尺寸</td>
                      <td>3840*2160</td>
                    </tr>
                    <tr>
                      <td>大小</td>
                      <td>2.01MB</td>
                    </tr>
                    <tr>
                      <td>发布时间</td>
                      <td>2025-02-05</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- Image Modal -->
    <div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
          <div class="modal-header border-0">
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body d-flex align-items-center justify-content-center p-0">
            <img src="https://image1.zhongerqiqi.cn:47672/bizhi/i/2025/01/25/xfwy90-2.jpg?height=600&width=1000" alt="壁纸" class="img-fluid">
          </div>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <footer class="footer-container py-3 mt-auto">
      <div class="container">
        <div class="text-center text-white small">
          <p class="mb-1">本站所展示的所有图片均来自互联网，如果侵犯了您的权益，如侵权请联系我们删除。QQ：7108945，邮箱：7108945@qq.com</p>
          <p class="mb-0">浙ICP备20002-09825-2</p>
        </div>
      </div>
    </footer>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  <script src="static/js/detail.js"></script>
</body>
</html>

2.detail.css

代码如下（示例）：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header Styles */
.header-container {
  background-color: white;
  border-bottom: 1px solid #e9ecef;
}

.site-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

.upload-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  font-size: 0.9rem;
}

.nav-icon {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  text-decoration: none;
  font-size: 0.9rem;
}

.nav-icon:hover {
  color: #333;
}

/* Main Content */
.main-content {
  flex: 1;
  padding: 2rem 0;
}

.wallpaper-detail {
  background-color: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.wallpaper-detail img {
  width: 100%;
  height: auto;
  cursor: zoom-in;
  border-radius: 4px;
}

/* Sidebar */
.sidebar {
  background-color: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.image-info {
  border-top: 1px solid #dee2e6;
  padding-top: 1rem;
}

.image-info h5 {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.image-info .table {
  margin-bottom: 0;
}

.image-info .table td {
  padding: 0.5rem 0;
  border: none;
}

.image-info .table td:first-child {
  color: #666;
  width: 40%;
}

/* Modal */
.modal-content {
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-header {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1050;
}

.btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-body {
  height: 100vh;
  padding: 2rem !important;
}

.modal-body img {
  max-height: 90vh;
  max-width: 90vw;
  object-fit: contain;
}

/* Footer */
.footer-container {
  background-color: #000;
  color: #fff;
  font-size: 0.8rem;
  width: 100%;
}

/* Responsive */
@media (max-width: 767px) {
  .site-title {
    font-size: 1rem;
  }

  .main-content {
    padding: 1rem 0;
  }

  .sidebar {
    margin-top: 1rem;
  }

  .wallpaper-detail {
    padding: 0.5rem;
  }
}

3.detail.js

document.addEventListener("DOMContentLoaded", () => {
  // Get the image and modal
  const wallpaperImage = document.getElementById("wallpaperImage")
  const imageModalElement = document.getElementById("imageModal")
  const imageModal = new bootstrap.Modal(imageModalElement)

  // Add click event to open modal
  wallpaperImage.addEventListener("click", () => {
    imageModal.show()
  })
})

这样子我们的首页就已经完成啦！！