如何使用 HTML、CSS 和 JavaScript 创建一个多功能网站

本文将详细介绍如何使用 HTML、CSS 和 JavaScript 创建一个具有以下功能的网站：

导航栏：包含 '首页'、'视频'、'图片'、'音乐'、'关于' 链接，宽度为 100%。
轮播图：展示五张图片，每张图片轮播三秒，用户可以点击切换到指定图片。
标签界面：高度为 100px，显示多个标签。
视频区：高度为 1500px，包含一个视频区标题和一个视频列表。
视频列表：每行显示 5 个视频。
输入文字栏：用户输入内容后发送到指定邮箱地址 2869563610@qq.com。
QQ 登录功能：使用 QQ 账号登录网站。

1. 编写 HTML 代码

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>多功能网站</title>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<nav>
<a href='#'>首页</a>
<a href='#'>视频</a>
<a href='#'>图片</a>
<a href='#'>音乐</a>
<a href='#'>关于</a>
</nav>

<div class='slider'>
<img src='img/1.jpg' class='active'>
<img src='img/2.jpg'>
<img src='img/3.jpg'>
<img src='img/4.jpg'>
<img src='img/5.jpg'>
<div class='dots'>
<span class='dot active' data-index='1'></span>
<span class='dot' data-index='2'></span>
<span class='dot' data-index='3'></span>
<span class='dot' data-index='4'></span>
<span class='dot' data-index='5'></span>
</div>
</div>

<div class='tags'>
标签1 | 标签2 | 标签3 | 标签4 | 标签5
</div>

<div class='video'>
<h2>视频区</h2>
<div class='video-list'>
<div class='video-item'>
<img src='img/1.jpg'>
<div class='title'>视频标题1</div>
</div>
<div class='video-item'>
<img src='img/2.jpg'>
<div class='title'>视频标题2</div>
</div>
<div class='video-item'>
<img src='img/3.jpg'>
<div class='title'>视频标题3</div>
</div>
<div class='video-item'>
<img src='img/4.jpg'>
<div class='title'>视频标题4</div>
</div>
<div class='video-item'>
<img src='img/5.jpg'>
<div class='title'>视频标题5</div>
</div>
<div class='video-item'>
<img src='img/6.jpg'>
<div class='title'>视频标题6</div>
</div>
<div class='video-item'>
<img src='img/7.jpg'>
<div class='title'>视频标题7</div>
</div>
<div class='video-item'>
<img src='img/8.jpg'>
<div class='title'>视频标题8</div>
</div>
<div class='video-item'>
<img src='img/9.jpg'>
<div class='title'>视频标题9</div>
</div>
<div class='video-item'>
<img src='img/10.jpg'>
<div class='title'>视频标题10</div>
</div>
</div>
</div>

<div class='input'>
<form>
<label for='name'>姓名：</label>
<input type='text' id='name' name='name'>
<label for='email'>邮箱：</label>
<input type='email' id='email' name='email'>
<label for='message'>留言：</label>
<textarea id='message' name='message'></textarea>
<button type='submit'>提交</button>
</form>
</div>

<p>使用QQ登录：</p>
<a href='https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=YOUR_APP_ID&redirect_uri=YOUR_REDIRECT_URI&scope=get_user_info&state=STATE'>
<img src='https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_5.png'>
</a>

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

2. 编写 CSS 代码

/* 样式表 */
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav
{
width: 100%;
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
nav a
{
color: #fff;
text-decoration: none;
padding: 0 20px;
}
nav a:hover
{
background-color: #fff;
color: #333;
}
.slider
{
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
.slider img
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
}
.slider img.active
{
display: block;
}
.slider .dots
{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.slider .dot
{
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #999;
margin: 0 5px;
cursor: pointer;
}
.slider .dot.active
{
background-color: #fff;
}
.tags
{
width: 100%;
height: 100px;
background-color: #eee;
padding: 10px;
box-sizing: border-box;
}
.video
{
width: 100%;
height: 1500px;
background-color: #fff;
padding: 10px;
box-sizing: border-box;
}
.video-list
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 10px;
}
.video-item
{
width: 18%;
margin-bottom: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
}
.video-item img
{
width: 100%;
height: 120px;
object-fit: cover;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.video-item .title
{
padding: 5px;
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: #333;
color: #fff;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.input
{
width: 100%;
height: 100px;
background-color: #eee;
padding: 10px;
box-sizing: border-box;
}
.input label
{
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.input input
{
width: 100%;
height: 30px;
padding: 5px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,.3);
}
.input textarea
{
width: 100%;
height: 50px;
padding: 5px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,.3);
}
.input button
{
width: 100%;
height: 40px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.input button:hover
{
background-color: #fff;
color: #333;
}

3. 编写 JavaScript 代码

// 获取轮播图和点元素
const slider = document.querySelector('.slider');
const images = slider.querySelectorAll('img');
const dots = slider.querySelectorAll('.dot');

// 设置轮播图切换定时器
let index = 0;
const interval = setInterval(() => {
  images[index].classList.remove('active');
dots[index].classList.remove('active');
index = (index + 1) % images.length;
images[index].classList.add('active');
dots[index].classList.add('active');
}, 3000);

// 点击点切换图片
dots.forEach(dot => {
dot.addEventListener('click', () => {
  const currentIndex = index;
index = parseInt(dot.dataset.index) - 1;
images[currentIndex].classList.remove('active');
dots[currentIndex].classList.remove('active');
images[index].classList.add('active');
dots[index].classList.add('active');
clearInterval(interval);
interval = setInterval(() => {
  images[index].classList.remove('active');
dots[index].classList.remove('active');
index = (index + 1) % images.length;
images[index].classList.add('active');
dots[index].classList.add('active');
}, 3000);
});
});

4. QQ 互联开放平台注册应用

在 QQ 互联开放平台注册应用，获取 'APP ID' 和 '重定向 URI'，并将其替换到 HTML 代码中的相应位置。

5. 部署网站和配置 SMTP 服务器

在服务器上部署网站，并配置 SMTP 服务器和邮箱账号，以便收取用户在输入文字栏中输入的内容。

完成

至此，一个包含导航栏、轮播图、标签界面、视频区、视频列表、输入文字栏和 QQ 登录等功能的网站就完成了。用户可以通过导航栏浏览网站的各个页面，观看视频和留言等。