HTML静态网页成品作业(HTML+CSS+JS)—— 明星EXO介绍网页(5个页面)(table布局)

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,使用Javacsript代码实现首页图片轮播切换,table 切换,共有10个页面

二、作品演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>EXO</title>
		<audio src="./media/1.mp3" autoplay loop></audio>
		<link rel="stylesheet" href="./css/1.css">

	</head>
	<body>
		<table border="0" width="1000" cellspacing="0" cellpadding="0" class="main_table">
			<tr>
				<td align="center">
					<table border="0" width="1000" cellspacing="0" cellpadding="0">
						<tr>
							<td bgcolor="#8fceef" height="100" align="center" class="top_zhuti">
								EXO主题网
							</td>
						</tr>
					</table>
					<table border="0" width="1000" cellspacing="0" cellpadding="0">
						<tr>
							<td background="images/navbg.jpg" align="center" height="38" style="font-size: 14px"
								class="nav">
								<a href="index.html">网站首页</a>
								<a href="about.html">团队简介</a>
								<a href="chengyuan.html">成员介绍</a>
								<a href="huodong.html">社会活动</a>
								<a href="jingli.html">演艺经历</a>
								<a href="shipin.html">相关视频</a>
								<a href="tuanyuan.html">团员经历</a>
								<a href="xinwen.html">新闻消息</a>
								<a href="zhuanji.html">专辑列表</a>
							</td>
						</tr>
					</table>
					<table border="0" width="1000" cellspacing="0" cellpadding="0">
						<tr>
							<td style="padding-top: 5px; padding-bottom: 5px" height="300">
								<img id="banner_img1"  src="./images/banner1.jpg" alt="" width="1000" height="300" class="banner_img active">
								<img src="./images/banner2.jpg" alt="" width="1000" height="300"
									class="banner_img  " id="banner_img2">
								<img src="./images/banner3.jpg" alt="" width="1000" height="300"
									class="banner_img  " id="banner_img3">
								<img src="./images/banner4.jpg" alt="" width="1000" height="300"
									class="banner_img  " id="banner_img4">
							</td>
						</tr>
					</table>
					<table border="0" width="1000" cellspacing="0" cellpadding="0">
						<tr>
							<td align="left" width="225" valign="top">
												<table border="0" width="215" cellspacing="1" cellpadding="0" bgcolor="#CCCCCC">
													<tr>
														<td bgcolor="#FFFFFF">
									<h3 class="tit_h2">在线留言</h3>
								
														<table border="0" width="208" cellspacing="0" cellpadding="0">
													<tr>
														<td style="padding-left: 30px" background="images/publeftnavbg.jpg" align="left" height="32">
															
															
															<a href="liuyan.html">前往留言</a>
														</td>
													</tr>
												 
													<tr>
														<td height="5"></td>
													</tr>
											 
													 
													</table>
														</td>
													</tr>
												</table>
								<table border="0" width="215" cellspacing="1" cellpadding="0" bgcolor="#CCCCCC">
									<tr>
										<td bgcolor="#FFFFFF">
											<h3 class="tit_h2">成员列表</h3>

											<table border="0" width="208" cellspacing="0" cellpadding="0">
												<tr>
													<td style="padding-left: 30px" background="images/publeftnavbg.jpg"
														align="left" height="32">金珉锡</td>
												</tr>
												<tr>
													<td height="5"></td>
												</tr>
												<tr>
													<td style="padding-left: 30px" background="images/publeftnavbg.jpg"
														align="left" height="32">金俊勉</td>
												</tr>
												<tr>
													<td height="5"></td>
												</tr>
												<tr>
													<td style="padding-left: 30px" background="images/publeftnavbg.jpg"
														align="left" height="32">边伯贤</td>
												</tr>
												<tr>
													<td height="5"></td>
												</tr>
												<tr>
													<td style="padding-left: 30px" background="images/publeftnavbg.jpg"
														align="left" height="32">金钟大</td>
												</tr>
												<tr>
													<td height="5"></td>
												</tr>
												<tr>
													<td style="padding-left: 30px" background="images/publeftnavbg.jpg"
														align="left" height="32">朴灿烈</td>
												</tr>
												<tr>
													<td height="5"></td>
												</tr>
												<tr>
													<td style="padding-left: 30px" background="images/publeftnavbg.jpg"
														align="left" height="32">都敬秀</td>
												</tr>
												<tr>
													<td style="padding-left: 30px" background="images/publeftnavbg.jpg"
														align="left" height="32">金钟仁</td>
												</tr>
												<tr>
													<td style="padding-left: 30px" background="images/publeftnavbg.jpg"
														align="left" height="32">吴世勋</td>
												</tr>
												<tr>
													<td style="padding-left: 30px" background="images/publeftnavbg.jpg"
														align="left" height="32">张艺兴</td>
												</tr>
												<tr>
													<td height="5"></td>
												</tr>
											</table>
										</td>
									</tr>
								</table>
							</td>
							<td align="left" width="775" valign="top">

								<table border="0" width="775" cellspacing="1" cellpadding="0" bgcolor="#CCCCCC">
									<tr>
										<td bgcolor="#FFFFFF" valign="top">
											<h2 class="tit_h2">简介</h2>
											<table border="0" width="100%" cellspacing="0" cellpadding="0">
												<tr>
													<td style="line-height: 1.8; font-size: 14px; padding: 10px"
														align="left" width="198"><img border="0" src="images/about.jpg"
															width="198" height="232"></td>
													<td style="line-height: 1.8; font-size: 14px; padding: 10px"
														align="left">
														&nbsp;&nbsp;&nbsp;201248日,一个名为EXO的新人团体横空出世,以独特的团体概念受到大众的强力支持。专辑主打歌《MAMA》以雄壮的音乐凸显了EXO-K、EXO-M极具魅力的嗓音。另外,歌词感性的表达了人们在现实与数字(遐想)世界之间的挣扎,对(人与人)缺乏沟通的遗憾,以及渴望找寻纯真爱情的心情,使歌曲完成度更上一层楼
														,EXO作为“群舞”的代表偶像组合,能够在表现激烈的舞蹈动作同时,还可以保持整齐的队形</td>
												</tr>
											</table>
										</td>
									</tr>
								</table>
								<table border="0" width="100%" cellspacing="0" cellpadding="0">
									<tr>
										<td>&nbsp;</td>
									</tr>
								</table>
								<table border="0" width="775" cellspacing="1" cellpadding="0" bgcolor="#CCCCCC">
									<tr>
										<td bgcolor="#FFFFFF" valign="top">
											<h2 class="tit_h2">&nbsp;</h2>
											<table border="0" width="773" cellspacing="0" cellpadding="0">
												<tr>
													<td style="line-height: 1.8; font-size: 14px; padding: 10px"
														align="center" width="193"><a href="#">
															<IMG src="images/js1.jpg" width="170" height="185"
																border="0"></a></td>
													<td style="line-height: 1.8; font-size: 14px; padding: 10px"
														align="center" width="193"><a href="#">
															<IMG src="images/js2.jpg" width="170"  height="185"
																border="0"></a></td>
													<td style="line-height: 1.8; font-size: 14px; padding: 10px"
														align="center" width="193"><a href="#">
															<IMG src="images/js3.jpg" width="170"  height="185"
																border="0"></a></td>
													<td style="line-height: 1.8; font-size: 14px; padding: 10px"
														align="center" width="194"><a href="#">
															<IMG src="images/js4.jpg" width="170"  height="185"
																border="0"></a></td>
												</tr>
											</table>
										</td>
									</tr>
								</table>

							</td>
						</tr>
					</table>
					<table border="0" width="1000" cellspacing="0" cellpadding="0">
						<tr>
							<td>&nbsp;</td>
						</tr>
					</table>

					<table border="0" width="1000" cellspacing="0" cellpadding="0">
						<tr>
							<td style="color: #FFFFFF" background="images/footbg.jpg" align="center" height="87">
								<p>版权所有© EXO </p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>

	<script src="./js/1.js"></script>
	</body>
</html>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/683125.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

更新关于其宠物产品质量的电子学习课程

​我们受托更新关于其宠物产品质量的电子学习课程。我们决定采用流行的“Corporate Memphis”风格设计插图&#xff0c;这是一种适用于商业的友好卡通风格&#xff08;该名称来源于80年代因其亮丽的色彩和独特的项目方法而闻名的设计团体“Memphis”&#xff09;。我们选择“Co…

使用迁移助手 (SSMA for Oracle) 将Oracle19c数据库迁移到SQL Server2022

如何使用适用于 Oracle 的 SQL Server 迁移助手Microsoft SQL Server Migration Assistant for Oracle (SSMA for Oracle) 将 Oracle 数据库迁移到 SQL Server Microsoft SQL Server Migration Assistant (SSMA) for Oracle is a tool to automate migration from Oracle data…

python写脚本的时候获取设备,没有端口(COM3)

首先python 可以用一下代码 测试端口是不是存在 import serial.tools.list_portsports list(serial.tools.list_ports.comports()) if not ports:print("没有检测到可用的串口设备。") else:for port in ports:print(f"可用串口: {port.device}")如果提示…

C语言 | Leetcode C语言题解之第133题克隆图

题目&#xff1a; 题解&#xff1a; struct Node** visited; int* state; //数组存放结点状态 0&#xff1a;结点未创建 1&#xff1a;仅创建结点 2&#xff1a;结点已创建并已填入所有内容void bfs(struct Node* s) {if (visited[s->val] && state[s->val] 2…

【亚马逊云科技 CSDN 联合巨献】 「对话AI 构建者:从基础到应用的 LLM 全景培训」 限时免费!

&#x1f680;&#x1f31f;【亚马逊云科技 & CSDN 联合巨献】 &#x1f4da;「对话AI 构建者&#xff1a;从基础到应用的 LLM 全景培训」&#x1f525; 限时免费&#xff01; &#x1f4c6; 抓紧时间&#xff01;6月7日前注册&#xff0c;原价 399&#xff0c;现在仅需 0…

【DevOps】网站安全案例分析:真实事件中的经验与教训

目录 一、常见的网站安全事故案例 1. Equifax 数据泄露事件&#xff08;2017年&#xff09; 2. WannaCry 勒索软件攻击事件&#xff08;2017年&#xff09; 3. GitHub DDoS 攻击事件&#xff08;2018年&#xff09; 二、网站安全事件的一般分析方法 1、事件背景调查 2、…

[WWW2024]轻量数据依赖的异常检测重训练方法LARA

开篇 近日&#xff0c;由阿里云计算平台大数据基础工程技术团队主导&#xff0c;与浙江大学合作的论文《LARA: ALight and Anti-overfitting Retraining Approach for Unsupervised Time Series Anomaly Detection 》被WWW2024收录&#xff0c;该方法解决了云服务正常模式随时…

“网络战时代的国家安全:策略、技术和国际合作“

网络战时代&#xff0c;国家安全面临着前所未有的挑战&#xff0c;这要求国家在策略、技术和国际合作方面采取更为综合和先进的应对措施。以下几点概述了这一领域的关键要素&#xff1a; 策略层面&#xff1a; 1. 建立全面的网络战战略&#xff1a;国家需要一个清晰、前瞻性…

C# 判断字符串不等于空的示例

在C#中&#xff0c;要判断一个字符串是否不等于空&#xff08;即它既不是null也不是空字符串""&#xff09;&#xff0c;方法有如下几种&#xff0c;如下。 方法1 使用逻辑运算符和string.IsNullOrEmpty方法 string myString "123"; // 假设要检查的字…

WPF Treeview控件开虚拟化后定位节点

不开虚拟化&#xff0c;可以用下面的方法直接定位 <Window x:Class"WpfApplication2.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"Title"Main…

电脑在线怎么改图片格式?3步改图片格式的操作步骤

在日常生活和工作中经常会因为不同的用途&#xff0c;需要使用不同格式的图片&#xff0c;那么如果遇到图片格式问题时&#xff0c;有什么方法能够快速在线转图片格式呢&#xff1f; 想要快速将图片格式转换成自己需要使用的格式&#xff0c;比较简单的一种方法可以使用网上的…

使用 Django 和 MQTT 构建实时数据传输应用

文章目录 什么是 MQTT&#xff1f;Django 中的 MQTT结论 在现代的 Web 应用程序开发中&#xff0c;实时数据传输变得越来越重要。MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级的发布/订阅消息传输协议&#xff0c;而 Django 是一个流行的 Pyt…

66、API攻防——接口安全阿里云KEYPostmanDVWS

文章目录 一、工具使用——Postman自动化测试二、安全问题——Dvws泄露&鉴权&XXE三、安全问题——阿里KEY信息泄露利用 dvws-node 一、工具使用——Postman自动化测试 二、安全问题——Dvws泄露&鉴权&XXE 路径中出现/api/&#xff0c;一般都是接口。 请求包是…

Jail管理器AppJail的使用@FreeBSD

Jail的简介 Jail是FreeBSD操作系统中一个功能强大的安全机制&#xff0c;自FreeBSD 4.X版本起便投入使用&#xff0c;并且随着系统的发展&#xff0c;其功能、效率、稳定性和安全性得到了持续的强化。 Jail基于chroot的概念&#xff0c;通过更改一系列程序的根目录&#xff0…

【面试题】创建两个线程交替打印100以内数字(一个打印偶数一个打印奇数)

阅读导航 一、问题概述二、解决思路三、代码实现四、代码优化 一、问题概述 面试官&#xff1a;C多线程了解吗&#xff1f;你给我写一下&#xff0c;起两个线程交替打印0~100的奇偶数。就是有两个线程&#xff0c;一个线程打印奇数另一个打印偶数&#xff0c;它们交替输出&…

rust学习(字节数组转string)

最新在写数据传输相关的操作&#xff0c;发现string一个有趣的现象&#xff0c;代码如下&#xff1a; fn main() {let mut data:[u8;32] [0;32];data[0] a as u8;let my_str1 String::from_utf8_lossy(&data);let my_str my_str1.trim();println!("my_str len is…

用框架思维学Java:集合概览

集合这个词&#xff0c;耳熟能详&#xff0c;从小学一年级开始&#xff0c;每天早上做操时都会听到这两个字&#xff1a; 高中数学又学习到了新的集合&#xff1a; 那么Java中的集合是什么呢&#xff1f; 一&#xff0c;前言 1&#xff0c;什么是Java集合 数学集合是Java集…

模式识别涉及的常用算法

一、线性回归 1.算法执行流程&#xff1a; 算法的执行流程可以简述如下&#xff1a; 导入必要的库&#xff1a; 导入NumPy库&#xff0c;用于数值计算。导入Matplotlib库&#xff0c;用于数据可视化。导入Pandas库&#xff0c;用于数据处理&#xff08;尽管在这个例子中&#…

【Git】Git 的初识和安装

一、提出问题 不知道你工作或学习时&#xff0c;有没有遇到这样的情况&#xff1a;在编写各种文档时&#xff0c;为了防止文档丢失&#xff0c;更改失误&#xff0c;失误后能恢复到原来的版本&#xff0c;不得不复制出⼀个副本&#xff0c;比如&#xff1a; 设计文档v1设计文…

Python字符串操作详解(超详细)

Python字符串操作详解 目录 Python字符串操作详解一. 字符串创建二. 字符串拼接1. 使用 运算符2. 使用 .join() 方法 三. 字符串索引和切片1. 字符串索引2. 字符串切片3. 字符串长度和负索引4. 字符串不可变性 四. 字符串长度五. 字符串转换六. 查找子字符串七. 字符串替换八.…