主页页面（可复制源码）
1. HTML (index.html)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>主页</title>
</head>
<body>
<header>
<div class="logo">我的网站</div>
<nav>
<ul>
<!-- 导航项目将通过 JavaScript 动态生成 -->
</ul>
</nav>
</header>
<div class="hero">
<h1>欢迎来到我的网站</h1>
<p>这里是您获取精彩内容的地方</p>
<button id="learnMoreButton">了解更多</button>
</div>
<section class="features">
<h2>我们的服务</h2>
<div class="feature">
<h3>服务 1</h3>
<p>描述服务 1 的内容。</p>
</div>
<div class="feature">
<h3>服务 2</h3>
<p>描述服务 2 的内容。</p>
</div>
<div class="feature">
<h3>服务 3</h3>
<p>描述服务 3 的内容。</p>
</div>
</section>
<footer>
<p>© 2023 我的公司 - 保留所有权利</p>
</footer>
<script src="script.js"></script>
</body>
</html>
2. CSS (styles.css)
body {
margin: 0;
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #e3f2fd, #fbc7bb);
}
header {
background: radial-gradient(ellipse at bottom, #c08ae4 0%, #d22727 100%) fixed; color: white;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo {
font-size: 24px;
font-weight: bold;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
.hero {
text-align: center;
padding: 100px 20px;
background: url('../loginBig/login2/img/3.png') no-repeat center center/cover; /* 使用背景图像 */
color: white;
}
.hero h1 {
font-size: 36px;
}
.hero button {
padding: 10px 20px;
background-color: #c62119;
color: white;
border: none;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s; /* 添加变换效果 */
}
.hero button:hover {
background-color: #7a2100;
transform: scale(1.05); /* 鼠标悬停变大 */
}
.features {
padding: 20px;
text-align: center;
}
.features h2 {
margin-bottom: 30px;
}
.feature {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background: white;
display: inline-block;
width: 30%;
}
footer {
background-color: #333333;
color: white;
text-align: center;
padding: 15px 0;
position: relative;
bottom: 0;
width: 100%;
}
/* 添加媒体查询以实现响应式设计 */
@media (max-width: 768px) {
nav ul li {
display: block;
margin: 10px 0;
}
.feature {
width: 80%;
margin: 10px auto;
}
.features {
display: flex;
flex-direction: column;
align-items: center;
}
}
3. JavaScript (script.js)
// 导航项目数据
const navItems = [
{ name: '首页', url: '#' },
{ name: '关于我们', url: '#' },
{ name: '服务', url: '#' },
{ name: '联系方式', url: '#' },
];
// 生成导航项
const navList = document.querySelector('nav ul');
navItems.forEach(item => {
const li = document.createElement('li');
li.innerHTML = `<a href="${item.url}">${item.name}</a>`;
navList.appendChild(li);
});
// 点击了解更多按钮的事件处理
document.getElementById('learnMoreButton').addEventListener('click', function() {
alert('这里是了解更多的内容!');
});
// 为功能模块添加逐渐显示的效果
document.addEventListener('DOMContentLoaded', function() {
const features = document.querySelectorAll('.feature');
features.forEach((feature, index) => {
feature.style.opacity = 0;
feature.style.transition = 'opacity 0.5s ease-in-out';
setTimeout(() => {
feature.style.opacity = 1;
}, index * 300); // 每个功能模块延迟加载
});
});
原文地址：https://blog.csdn.net/wxdzuishaui/article/details/143693124
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！