Bina Laman Web Snap-tutorial js-php.cn

Build a Snap Website

pengenalan

Helo, pembangun! Saya teruja untuk membentangkan projek terbaharu saya: Tapak Web Snap. Projek ini sesuai untuk mereka yang ingin membina tapak web yang moden dan responsif dengan reka bentuk intuitif dan ciri interaktif menggunakan HTML, CSS dan JavaScript. Ini cara yang bagus untuk meningkatkan kemahiran pembangunan bahagian hadapan anda sambil mencipta halaman web yang menarik dan berfungsi secara visual.

Gambaran Keseluruhan Projek

Tapak Web Snap ialah tapak web satu halaman yang direka untuk mempamerkan produk atau perkhidmatan dengan reka letak yang bersih dan profesional. Projek ini menunjukkan cara membuat halaman web responsif dan interaktif yang kelihatan hebat pada mana-mana peranti.

Ciri-ciri

Reka Bentuk Responsif: Tapak web responsif sepenuhnya, memastikan ia kelihatan hebat pada kedua-dua peranti desktop dan mudah alih.
Elemen Interaktif: Termasuk menu lungsur turun dan kesan tuding untuk meningkatkan interaksi pengguna.
Estetika Moden: Digayakan dengan rupa moden, menggunakan fon anggun dan prinsip reka bentuk minimalis.

Teknologi yang Digunakan

HTML: Menyediakan struktur untuk Tapak Web Snap.
CSS: Menggayakan tapak web untuk memastikan ia menarik secara visual dan mesra pengguna.
JavaScript: Menambahkan interaktiviti pada tapak web, seperti menu lungsur turun dan kesan tuding.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

Snap-Website/
├── index.html
├── style.css
└── script.js

Salin selepas log masuk

index.html: Mengandungi struktur HTML untuk Tapak Web Snap.
style.css: Termasuk gaya CSS untuk mencipta reka bentuk moden dan responsif.
script.js: Mengurus elemen interaktif seperti menu lungsur turun.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd Snap-Website
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam pelayar web untuk melihat Tapak Web Snap.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Teroka kandungan dengan berinteraksi dengan menu lungsur turun dan melayang di atas elemen.
Lihat reka bentuk responsif dengan mengubah saiz tetingkap penyemak imbas atau membuka tapak web pada peranti yang berbeza.

Penerangan Kod

HTML

Fail index.html mentakrifkan struktur Tapak Web Snap, termasuk navigasi, bahagian kandungan dan elemen interaktif. Berikut adalah coretan:

<!DOCTYPE html>
<html lang="en">
<head>
  <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>
</head>
<body>
  <div class="container">
    <nav>
      <div class="logo"><img src="./images/logo.svg" alt="Bina Laman Web 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>
</body>
</html>

Salin selepas log masuk

CSS

Fail style.css menggayakan Tapak Web Snap, menjadikannya menarik dan mudah digunakan. Di bawah ialah beberapa gaya utama:

* {
  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;
  }
}

Salin selepas log masuk

JavaScript

Fail script.js mengandungi logik untuk menu lungsur turun dan elemen interaktif. Berikut adalah coretan:

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
});

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung projek Tapak Web Snap di sini.

Kesimpulan

Membina Laman Web Snap ialah pengalaman pembelajaran yang berharga, membolehkan saya meningkatkan kemahiran saya dalam mencipta halaman web yang responsif dan interaktif. Projek ini ialah contoh hebat reka bentuk dan pembangunan web moden, dan saya harap ia memberi inspirasi kepada anda untuk mencipta tapak web responsif anda sendiri. Selamat mengekod!