简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  web前端  >  建立一個 Snap 網站

建立一個 Snap 網站

WBOY
WBOY原創
2024-08-31 06:33:391080瀏覽

Build a Snap Website

介紹

開發者們大家好！我很高興向大家展示我的最新項目：Snap 網站。該專案非常適合想要使用 HTML、CSS 和 JavaScript 建立具有直覺設計和互動功能的現代響應式網站的人。這是增強前端開發技能同時創建具有視覺吸引力和實用性的網頁的好方法。

項目概況

Snap 網站 是一個單頁網站，旨在以乾淨、專業的佈局展示產品或服務。這個專案示範如何建立在任何裝置上看起來都很棒的響應式互動式網頁。

特徵

  • 響應式設計：網站完全響應式，確保其在桌面和行動裝置上看起來都很棒。
  • 互動元素：包含下拉式選單和懸停效果以增強使用者互動。
  • 現代美學：採用時尚的字體和簡約的設計原則，採用現代外觀風格。

使用的技術

  • HTML：提供 Snap 網站的架構。
  • CSS：設定網站樣式以確保其視覺吸引力且使用者友好。
  • JavaScript：為網站添加互動性，例如下拉式選單和懸停效果。

專案結構

以下是項目結構的概述：

Snap-Website/
├── index.html
├── style.css
└── script.js
  • index.html：包含 Snap 網站的 HTML 結構。
  • style.css：包含 CSS 樣式以創建現代且響應式的設計。
  • script.js：管理下拉式選單等互動元素。

安裝

要開始該項目，請按照以下步驟操作：

  1. 複製儲存庫：

    git clone https://github.com/abhishekgurjar-in/Snap-Website.git

  2. 開啟專案目錄:

    cd Snap-Website

  3. 運行項目:

    • 在網頁瀏覽器中開啟index.html 檔案以查看 Snap 網站。

用法

  1. 在網頁瀏覽器中開啟網站。
  2. 透過與下拉式選單互動並將滑鼠懸停在元素上來探索內容。
  3. 透過調整瀏覽器視窗大小或在不同裝置上開啟網站來查看響應式設計。

程式碼說明

超文本標記語言

index.html 檔案定義 Snap 網站的結構，包括導航、內容部分和互動元素。這是一個片段：



  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Snap</title>
  <link href="https://fonts.googleapis.com/css?family=Epilogue:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="./script.js" defer></script>


  <div class="container">
    <nav>
      <div class="logo"><img src="./images/logo.svg" alt="建立一個 Snap 網站"></div>
      <div class="header">
        <p class="featuresDropdown">Features <span><img src="./images/icon-arrow-down.svg" alt="Arrow Down"></span></p>
        <p class="companyDropdown">Company <span><img src="./images/icon-arrow-down.svg" alt="Arrow Down"></span></p>
        <p>Careers</p>
        <p>About</p>
      </div>
      <div class="login">
        <p>Login</p>
        <button>Register</button>
      </div>
    </nav>
    <div class="dropdown"></div>
    <div class="box">
      <div class="left-box">
        <h1>Make <br> remote work</h1>
        <p>Get your team in sync, no matter your location. Streamline processes, 
          create team rituals, and watch productivity soar.</p>
        <button>Learn more</button>
        <div class="client-image">
          <img src="./images/client-databiz.svg" alt="Databiz">
          <img src="./images/client-audiophile.svg" alt="Audiophile">
          <img src="./images/client-meet.svg" alt="Meet">
          <img src="./images/client-maker.svg" alt="Maker">
        </div>
      </div>
      <div class="right-box">
        <img src="./images/image-hero-desktop.png" alt="Hero Image">
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </div>

CSS

style.css 檔案對 Snap 網站進行樣式設置，使其更具吸引力且易於使用。以下是一些關鍵樣式：

* {
  box-sizing: border-box;
}

body {
  font-family: Epilogue;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1440px;
  margin: auto;
}

nav {
  margin: 20px;
  width: 88%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  width: 90px;
}

.header {
  display: flex;
  gap: 20px;
}

.login {
  display: flex;
  align-items: center;
  gap: 20px;
}

.login button {
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  padding-inline: 14px;
  padding-block: 8px;
  color: gray;
  border: 1px solid gray;
  cursor: pointer;
}

.login button:hover {
  color: black;
}

nav p {
  color: gray;
  cursor: pointer;
}

nav p:hover {
  color: black;
}

.box {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  margin: 70px;
}

.left-box {
  width: 50%;
}

.left-box h1 {
  font-size: 90px;
}

.left-box p {
  font-size: 17px;
}

.left-box button {
  font-size: 22px;
  margin-top: 100px;
  padding: 12px;
  background-color: black;
  color: white;
  border-radius: 19px;
  cursor: pointer;
}

.left-box button:hover {
  background-color: white;
  color: black;
}

.right-box img {
  width: 50%;
  max-width: 480px;
}

.client-image {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 80px;
}

.feature-dropdown {
  position: fixed;
  background-color: white;
  width: 170px;
  left: 425px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: gray;
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
}

.feature-dropdown p:hover {
  color: black;
  cursor: pointer;
}

.company-dropdown {
  position: fixed;
  width: 140px;
  left: 580px;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: gray;
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
}

.company-dropdown p:hover {
  color: black;
  cursor: pointer;
}

.footer {
  margin: 30px;
  text-align: center;
}

@media (max-width: 800px) {
  .box {
    flex-direction: column;
    align-items: center;
    gap: 100px;
  }

  nav {
    align-items: flex-start;
    gap: 50px;
  }

  .header {
    flex-direction: column;
  }

  .client-image {
    flex-direction: column;
    gap: 80px;
  }
}

JavaScript

script.js 檔案包含下拉式選單和互動元素的邏輯。這是一個片段：

const featuresDropdown = document.getElementsByClassName("featuresDropdown")[0];
const companyDropdown = document.getElementsByClassName("companyDropdown")[0];
const dropdown = document.getElementsByClassName("dropdown")[0];

featuresDropdown.addEventListener("mouseover", () => {
    const featureDiv = document.createElement('div');
    featureDiv.classList.add("feature-dropdown");
    featureDiv.innerHTML = `
        <p><span><img src="./images/icon-todo.svg" alt=""></span>   Todo List</p>
        <p><span><img src="./images/icon-calendar.svg" alt=""></span>   Calendar</p>
        <p><span><img src="./images/icon-reminders.svg" alt=""></span>   Reminders</p>
        <p><span><img src="./images/icon-planning.svg" alt=""></span>   Planning</p>
    `;
    dropdown.innerHTML = '';  // Clear any previous dropdown content
    dropdown.appendChild(featureDiv);
    dropdown.style.display = 'block';  // Show the dropdown
});

companyDropdown.addEventListener("mouseover", () => {
    const companyDiv = document.createElement('div');
    companyDiv.classList.add("company-dropdown");
    companyDiv.innerHTML = `
        <p>History</p>
        <p>Our Team</p>
        <p>Blog</p>
    `;
    dropdown.innerHTML = '';  // Clear any previous dropdown content
    dropdown.appendChild(companyDiv);
    dropdown.style.display = 'block';  // Show the dropdown
});

// To handle mouseout to hide dropdowns
featuresDropdown.addEventListener("mouseout", () => {
    setTimeout(() => {
        if (!dropdown.matches(':hover') && !featuresDropdown.matches(':hover')) {
            dropdown.style.display = 'none';
        }
    }, 100);  // Timeout to ensure the mouseover event on the dropdown itself is registered
});

companyDropdown.addEventListener("mouseout", () => {
    setTimeout(() => {
        if (!dropdown.matches(':hover') && !companyDropdown.matches(':hover')) {
            dropdown.style.display = 'none';
        }
    }, 100);  // Timeout to ensure the mouseover event on the dropdown itself is registered
});

dropdown.addEventListener("mouseout", () => {
    setTimeout(() => {
        if (!dropdown.matches(':hover') && !featuresDropdown.matches(':hover') && !companyDropdown.matches(':hover')) {
            dropdown.style.display = 'none';
        }
    }, 100);  // Timeout to ensure the mouseover event on the dropdown itself is registered
});

dropdown.addEventListener("mouseover", () => {
    dropdown.style.display = 'block';  // Keep the dropdown visible while hovering over it
});

現場演示

您可以在此處查看 Snap Website 專案的現場示範。

結論

建立 Snap 網站是一次寶貴的學習經歷，它讓我增強了創建響應式和互動式網頁的技能。這個專案是現代網頁設計和開發的一個很好的例子，我希望它能激勵您創建自己的響應式網站。快樂編碼！

製作人員

這個專案是我在 Web 開發方面持續學習之旅的一部分。

作者

  • 阿布舍克·古賈爾
    • GitHub 簡介

以上是建立一個 Snap 網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css html for while Directory using JS this github
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：使用 Zustand 簡化 React Native 中的狀態管理下一篇：使用 Zustand 簡化 React Native 中的狀態管理

相關文章

看更多