web网页设计期末作业源代码,免费试用云主机vp,vps cdn加速,怎么用vps搭建网站,香港,云主机

🗣 Wd提问: web网页设计期末作业源代码

🤖 Ai回答:
以下是一个简单的网页设计期末作业的源代码示例，包含 HTML、CSS 和 JavaScript。这个示例展示了一个响应式网站的基本结构，包括导航栏、首页内容、关于我们页面和联系页面。

1、`index.html`（主页）
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
<link rel=stylesheet href=styles.css
</head
<body
<! 导航栏
<nav class=navbar
<div class=logoMy Website</div
<ul class=nav-links
<li<a href=home首页</a</li
<li<a href=about关于我们</a</li
<li<a href=contact联系我们</a</li
</ul
<div class=burger
<div class=line1</div
<div class=line2</div
<div class=line3</div
</div
</nav

<! 首页内容
<section id=home class=home
<h1Welcome to My Website</h1
<p这是一个简单的网页设计期末作业示例。</p
<button onclick=alert('欢迎访问！')了解更多</button
</section

<! 关于我们
<section id=about class=about
<h2关于我们</h2
<p我们的团队致力于提供高质量的网页设计服务。我们专注于用户体验和视觉效果，确保每个项目都能满足客户需求。</p
</section

<! 联系我们
<section id=contact class=contact
<h2联系我们</h2
<form action= method=post
<label for=name姓名：</label
<input type=text id=name name=name required

<label for=email邮箱：</label
<input type=email id=email name=email required

<label for=message消息：</label
<textarea id=message name=message rows=4 required</textarea

<button type=submit发送</button
</form
</section

<! 底部
<footer
<p© 2023 My Website、All rights reserved.</p
</footer

<script src=script.js</script
</body
</html

2、`styles.css`（样式文件）
css
/* 基本样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

body {
background-color: f4f4f4;
}

/* 导航栏样式 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: 333;
color: white;
padding: 15px;
position: sticky;
top: 0;
z-index: 999;
}

.logo {
font-size: 24px;
font-weight: bold;
}

.nav-links {
list-style: none;
display: flex;
}

.nav-links li {
padding: 0 15px;
}

.nav-links a {
color: white;
text-decoration: none;
transition: color 0.3s ease;
}

.nav-links a:hover {
color: ffcc00;
}

.burger {
display: none;
cursor: pointer;
}

.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}

/* 响应式导航栏 */
@media (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
position: absolute;
top: 80px;
left: 0;
background-color: 333;
width: 100%;
height: 100vh;
text-align: center;
padding-top: 30px;
}

.nav-links li {
padding: 15px;
margin: 0;
}

.nav-links a {
font-size: 20px;
}

.burger {
display: block;
}
}

/* 页面内容样式 */
.home, .about, .contact {
padding: 50px 100px;
text-align: center;
}

.home h1 {
font-size: 36px;
margin-bottom: 20px;
}

.about h2, .contact h2 {
font-size: 30px;
margin-bottom: 20px;
}

.contact form {
max-width: 400px;
margin: 0 auto;
}

.contact label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

.contact input, .contact textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid ccc;
border-radius: 5px;
}

.contact button {
padding: 10px 20px;
background-color: 007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.contact button:hover {
background-color: 0056b3;
}

/* 底部样式 */
footer {
background-color: 333;
color: white;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}

3、`script.js`（JavaScript 文件）
javascript
// 响应式导航栏菜单按钮功能
const burger = document.querySelector('.burger');
const navLinks = document.querySelector('.nav-links');

burger.addEventListener('click', () = {
navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
});

4、文件结构

project/
├── index.html
├── styles.css
└── script.js

功能说明：
1、导航栏：包含一个响应式菜单按钮，适用于小屏幕设备。
2、首页内容：显示欢迎信息，并有一个按钮弹出提示框。
3、关于我们：简单介绍团队或公司。
4、联系我们：包含一个表单，用户可以填写姓名、邮箱和消息并提交。
5、底部：显示版权声明。

如何运行：
1、将上述代码分别保存为 `index.html`、`styles.css` 和 `script.js`。
2、将这三个文件放在同一个文件夹中。
3、使用浏览器打开 `index.html` 文件即可查看效果。

希望这个示例对你有帮助！如果有任何问题，请随时提问。

Ai作答

📣 商家广告：