开发者们大家好！我很高兴向大家展示我的最新项目：Snap 网站。该项目非常适合那些想要使用 HTML、CSS 和 JavaScript 构建具有直观设计和交互功能的现代响应式网站的人。这是增强前端开发技能同时创建具有视觉吸引力和实用性的网页的好方法。
Snap 网站 是一个单页网站，旨在以干净、专业的布局展示产品或服务。该项目演示了如何创建在任何设备上看起来都很棒的响应式交互式网页。
以下是项目结构的概述：
Snap-Website/ ├── index.html ├── style.css └── script.js
要开始该项目，请按照以下步骤操作：
克隆存储库：
git clone https://github.com/abhishekgurjar-in/Snap-Website.git
打开项目目录:
cd Snap-Website
运行项目:
index.html 文件定义 Snap 网站的结构，包括导航、内容部分和交互元素。这是一个片段：
<!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="建立一个 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>
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;
}
}
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 开发方面持续学习之旅的一部分。
以上是建立一个 Snap 网站的详细内容。更多信息请关注PHP中文网其他相关文章！
