云风网
云风笔记
云风知识库
一、新建html文件
选中添加index.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>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0; /* 添加背景色 */
}
nav {
background-color: #333;
padding: 10px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0; /* 添加 margin: 0 */
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
main {
padding: 20px; /* 添加内边距 */
}
h1 {
color: #333; /* 添加标题颜色 */
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>欢迎来到我的官方网站</h1>
<p>这里是网站的主要内容区域。如果您能看到这段文字，说明页面已正确加载。</p>
</section>
<!-- 其他部分可以根据需要添加 -->
</main>
<footer>
<p>© 2023 我的官方网站。保留所有权利。</p>
</footer>
</body>
</html>
二、运行index.html
目前生成基本页面，点击菜单路由切换，但是内容不变，继续改造。
三、点击菜单显示不同内容
自动创建index.js,并编写代码
index.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>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
nav {
background-color: #333;
padding: 10px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
}
nav ul li {
position: relative;
}
nav ul li a {
color: white;
text-decoration: none;
padding: 10px 15px;
display: block;
transition: all 0.3s ease;
}
nav ul li a:hover,
nav ul li a.active {
background-color: #555;
color: #ffd700;
}
nav ul li a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #ffd700;
transition: width 0.3s ease;
}
nav ul li a:hover::after,
nav ul li a.active::after {
width: 100%;
}
main {
padding: 20px;
}
h1 {
color: #333;
}
.content-section {
display: none;
}
.content-section.active {
display: block;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home" class="nav-link active">首页</a></li>
<li><a href="#about" class="nav-link">关于我们</a></li>
<li><a href="#services" class="nav-link">服务</a></li>
<li><a href="#contact" class="nav-link">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section id="home" class="content-section active">
<h1>欢迎来到我的官方网站</h1>
<p>这里是网站的主页内容。我们提供优质的服务和产品。</p>
</section>
<section id="about" class="content-section">
<h1>关于我们</h1>
<p>我们是一家致力于创新和卓越的公司，拥有多年的行业经验。</p>
</section>
<section id="services" class="content-section">
<h1>我们的服务</h1>
<ul>
<li>网站开发</li>
<li>移动应用程序开发</li>
<li>UI/UX 设计</li>
<li>数字营销</li>
</ul>
</section>
<section id="contact" class="content-section">
<h1>联系我们</h1>
<p>电话：123-456-7890</p>
<p>邮箱：info@example.com</p>
<p>地址：中国北京市朝阳区123号</p>
</section>
</main>
<footer>
<p>© 2023 我的官方网站。保留所有权利。</p>
</footer>
<script src="index.js"></script>
</body>
</html>
index.js内容如下：
document.addEventListener('DOMContentLoaded', function() {
const navLinks = document.querySelectorAll('.nav-link');
const contentSections = document.querySelectorAll('.content-section');
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href').substring(1);
// 移除所有导航链接的 active 类
navLinks.forEach(navLink => {
navLink.classList.remove('active');
});
// 为当前点击的链接添加 active 类
this.classList.add('active');
contentSections.forEach(section => {
if (section.id === targetId) {
section.classList.add('active');
} else {
section.classList.remove('active');
}
});
});
});
});
再次运行index.html
四、优化菜单样式，兼容移动端
五、优化底部
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
nav {
background-color: #333;
padding: 10px 0;
}
.nav-container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
nav ul li {
position: relative;
margin: 0 10px;
}
nav ul li a {
color: white;
text-decoration: none;
padding: 10px 15px;
display: block;
transition: all 0.3s ease;
}
nav ul li a:hover,
nav ul li a.active {
background-color: #555;
color: #ffd700;
}
nav ul li a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #ffd700;
transition: width 0.3s ease;
}
nav ul li a:hover::after,
nav ul li a.active::after {
width: 100%;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
overflow-y: auto;
}
h1 {
color: #333;
}
.content-section {
display: none;
}
.content-section.active {
display: block;
}
@media (max-width: 600px) {
nav ul {
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 5px 0;
}
nav ul li a {
padding: 10px 20px;
}
}
/* 保留之前的样式，并在文件末尾添加以下内容 */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.page-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
max-width: 800px;
margin: 0 auto;
padding: 20px;
overflow-y: auto;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
width: 100%;
}
/* 修改现有的 main 样式 */
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
flex: 1;
overflow-y: auto;
}
/* 添加滚动条样式（可选） */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
这样一个简单的官网结构就出来了，后续根据个人需求进行改进，全程没有写过一行代码，配置提示要求即可
