Web大学生网页作业成品——明星EXO介绍网页设计与实现(HTML+CSS)(10个页面)(TABLE布局)

news2024/11/28 12:56:19

🎉🎉🎉 常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,画面精明,排版整洁,内容丰富,主题鲜明,非常适合初学者学习使用。🎉🎉🎉

文章目录

  • 一、作品介绍 🔥
  • 二、作品演示 ☁️
  • 三、代码目录 🏠
  • 四、网站代码 👿
    • 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、看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙3、源码获取公众号,点点下方公众号进行获取吧! 网页搜索编号:E0168

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LED 数码显示管的结构

LED 数码显示管是一种常用的字符显示器件,能与 CMOS、TTL 等集成电路直接配合,作静态、动态扫描显示之用。图12-33(a)是LED数码显示管的实物图&#xff0c;图 12-33(b)是LED数码显示管的内部结构。它实际上是由8个发光二极管构成的&#xff0c;其中7个发光二极管排列成“8”字形…

【线性表】内容总结

1.单链表&#xff0c;循环链表&#xff0c;双向链表的循环效率 2.顺序表和链表的比较 1.什么是存储密度 1.定义&#xff1a; 存储密度是指结点数据本身所占的存储量和整个结点结构中所占的存储量 之比&#xff0c;即: 2.实例 比如在32位系统上&#xff0c;一个12字节的结…

保姆级Python与PyCharm安装教程

本文演示所用的所用的所有工具包都已经打包好了&#xff0c;【点击这里】即可获得 一、简介 Python是一种广泛使用的高级编程语言&#xff0c;因其简洁的语法和丰富的库支持&#xff0c;在数据科学、Web开发、人工智能等领域广受欢迎。PyCharm是由JetBrains开发的一款针对Pyt…

一篇文章带你了解归并排序-分治法

文章目录 两个有序数组排序一个局部有序数组排序分治法归并排序 两个有序数组排序 先来一个场景假设&#xff0c;先有两个有序数组{1,3,5,9}、{2,4,6,8}&#xff0c;要求合并成一个有序数组。 我们先上一段简单的处理代码 public static int[] merge(int[] leftArr, int[] righ…

Redis后台线程之非阻塞删除

当Redis执行删除命令的时候&#xff0c;如果被删除的对象是列表、集合、散列类型&#xff0c;因为这些数据类型包含的元素存放在不同的内存块中&#xff0c;redis需要遍历所有元素来释放其对应的内存块空间&#xff0c;这个耗时操作可能导致redis阻塞&#xff0c;redis4提供的U…

[数据集][目标检测]agvs仓储机器人检测数据集VOC+YOLO格式967张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;967 标注数量(xml文件个数)&#xff1a;967 标注数量(txt文件个数)&#xff1a;967 标注类别…

API接口安全101:基础概念与最佳实践

文章目录 API定义协议架构风格描述语言 Webservicewsdl介绍复现 SOAPswagger介绍指纹查找利用存在目录复现 HTTPWebpack介绍复现 在当今数字化时代,API接口已成为现代软件架构中不可或缺的组成部分。它们连接着各种应用程序和服务,促进了数据交换和功能集成。然而,随着API的普及…

【PyTorch】神经网络的基本骨架-nn.Module的使用以及convolution-layers卷积层介绍

前提文章目录 【PyTorch】深度学习PyTorch环境配置及安装【详细清晰】 【PyTorch】深度学习PyTorch加载数据 【PyTorch】关于Tensorboard的简单使用 【PyTorch】关于Transforms的简单使用 【PyTorch】关于torchvision中的数据集以及dataloader的使用 文章目录 前提文章目录nn.…

从易车“超级818冠军之夜” 看如何借势体育营销点燃汽车消费热潮

编辑 | 魏力 发布 | 大力财经 导语&#xff1a;这个8月&#xff0c;是属于奥运的8月。 巴黎奥运会虽圆满落幕&#xff0c;但属于奥运健儿们的热度还在持续。在这股奥运热潮的带动下&#xff0c;全民运动热情持续释放&#xff0c;同时也激发出巨大的消费潜力。 赛场外&#…

Go 1.23中值得关注的几个变化

距离上一次Go 1.22版本发布[1]又过去六个月了&#xff0c;我们如期迎来了Go 1.23版本的发布](https://mp.weixin.qq.com/s/IpDUOe0AUDKW2PYCWmvLYw)。 对于Go项目乃至整个Go社区而言&#xff0c;这个版本还有一点额外的意义&#xff0c;那就是这是Russ Cox[2]作为Tech lead&…

nginx 日志格式化,每日分割文件(已亲测)

首先nginx版本是1.23.4&#xff0c;在安装目录的conf文件夹下&#xff0c;配置nginx.conf。配置如下&#xff1a; logformat 代表日志格式设置 frmain 代表日志配置别名 map 行代表设置每日切割文件格式 需要在配置文件location指定访问的路径下&#xff0c;配置日志输出路径…

AI自动生成PPT怎么用?5大AI生成PPT技巧教会你

处暑悄然而至&#xff0c;标志着炎热夏季的逐渐远去&#xff0c;自然界的万物开始步入收获与沉淀的季节。值此节气更迭之际&#xff0c;何不借助现代科技的力量&#xff0c;用一份精美的PPT来宣传处暑的独特魅力&#xff1f; 无需繁琐制作&#xff0c;AI生成PPT免费工具就能助…

C学习(数据结构)-->实现链式结构二叉树

目录 一、链式二叉树结构 二、实现 1、申请新结点 2、前、中、后序遍历 1&#xff09;前序遍历 例&#xff1a; 2&#xff09;中序遍历 3&#xff09;后序遍历 3、结点个数 1&#xff09;二叉树结点个数 例&#xff1a;​编辑 2&#xff09;二叉树叶子结点个数 3&…

C++入门基础知识27

成长路上不孤单&#x1f60a;【14后小学生一枚&#xff0c;C爱好者&#xff0c;持续分享所学&#xff0c;如有需要欢迎收藏转发&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#xff08;&#xff01;&#xff01;&#xff01…

工厂老板、设计师怎么选通风采光天窗?重点关注哪些方面?

选通风采光天窗首先看预算与通风采光需求&#xff0c;然后看品牌和售后&#xff0c;选购过程中重点关注天窗的型号、规格尺寸、材料配置、外观造型及颜色。一、预算与通风采光需求 通风采光天窗已成为厂房建筑上必备的屋顶设备&#xff0c;现目前天窗的型号多样&#xff0c;价位…

原神4.8版本重点培养和抽到角色数据表:修改了添加倒计时.隐藏了抽到角色数据表删除按钮、备注列和选择列

<!DOCTYPE html> <html lang"zh-cn"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>原神4.8版本抽到角色和重点培养数据表</title…

七牛云 CDN 视频瘦身,为视频分发「减负增效」

随着智能设备的普及&#xff0c;以及各种以分享视频为主的平台的兴起&#xff0c;人们记录生活、分享故事的方式不再局限于文字和图片&#xff0c;而是越来越多地通过视频来表达。视频也不再需要复杂的制作过程&#xff0c;变得随手可得。 然而&#xff0c;视频在互联网上的爆炸…

mac os 外接设备使用win习惯快捷键

目录 1. 简单映射版本&#xff08;常用快捷键&#xff09;2. 如果想追求完全的win匹配3. 关于外接鼠标滚动设置 1. 简单映射版本&#xff08;常用快捷键&#xff09; 就把ctrl和Command键互换一下就行 点击设置-键盘-键盘快捷键 然后在修饰键中&#xff0c;将control和comm…

怎么恢复电脑删除的文件?全面指南助你找回宝贵数据

在数字化时代&#xff0c;电脑中的文件承载着我们的工作成果、学习资料、珍贵照片以及无数回忆。然而&#xff0c;不小心删除重要文件的情况时有发生&#xff0c;让人心急如焚。别担心&#xff0c;本文将为你提供一份全面的指南&#xff0c;教你如何恢复电脑中删除的文件&#…

虚幻5|AI视力系统,听力系统,预测系统(2)听力系统

虚幻5|AI视力系统&#xff0c;听力系统&#xff0c;预测系统&#xff08;1&#xff09;视力系统-CSDN博客 一&#xff0c;把之前的听力系统&#xff0c;折叠成函数&#xff0c;复制粘贴一份改名为听力系统 1.小个体修改如下&#xff0c;把之前的视力系统改成听力系统 2.整体修…