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

news/2024/9/24 23:28:39/

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

文章目录

  • 一、作品介绍 🔥
  • 二、作品演示 ☁️
  • 三、代码目录 🏠
  • 四、网站代码 👿
    • HTML部分代码
  • 五、如何学习网页制作 ❤️
  • 六、源码获取 🏫


一、作品介绍 🔥

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

二、作品演示 ☁️

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

三、代码目录 🏠

在这里插入图片描述

四、网站代码 👿

HTML部分代码

<!DOCTYPE htmlPUBLIC "-//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.ppmy.cn/news/1513942.html

相关文章

Kafka主题(Topic/文件夹)的操作

Kafka主题&#xff08;Topic/文件夹&#xff09;的操作 1、Kafka主题&#xff08;Topic/文件夹&#xff09;2、Kafka主题&#xff08;Topic/文件夹&#xff09;的一些操作2.1、创建主题&#xff08;Topic/文件夹&#xff09;2.2、列出所有主题&#xff08;Topic/文件夹&#xf…

iOS 18 Beta 5:苹果的细腻之笔,绘制用户体验新画卷

在苹果的世界里&#xff0c;每一次系统更新都是对用户体验进行的一次精心雕琢。 随着iOS 18 Beta 5的上线&#xff0c;苹果带来了一系列令人耳目一新的功能&#xff0c;同时也在系统的每个细微之处展现了对完美的追求。 Safari浏览器的“干扰控制”功能 在今天信息充斥的数字…

数据结构-堆(二叉树的特殊)-第四天

数据结构的“堆”与内存管理的“堆”是同一个概念吗&#xff1f; 两者不是同一个概念&#xff0c;只是碰巧都叫“堆”。计算机系统内存中的堆是动态内存分配的一部分&#xff0c;程序在运行时可以使用它来存储数据。程序可以请求一定量的堆内存&#xff0c;用于存储如对象和数组…

观测云产品更新 | 异常追踪、数据保存策略、BPF 日志、管理优化等

观测云更新 Breaking Changes OpenAPI&#xff1a;【事件】未恢复事件数据源从 UE 变更为 E 。 新增功能 管理&#xff1a;新增 Client Token 统一管理入口&#xff0c;用户使用公网 DataWay 接入 RUM 应用时&#xff0c;可更换系统默认生成的 Token&#xff0c;使用自定义…

【oracle】工具访问oracle提示-IO 错误: Got minus one from a read call

问题描述&#xff1a; 使用工具访问数据库时&#xff0c;提示IO 错误: Got minus one from a read call&#xff0c;在服务器上检查数据库正常&#xff0c;监听正常&#xff0c;连接数合理&#xff0c;防火墙没限制。最后定位sqlnet.ora配置限制了客户端访问。 解决&#xf…

主成分分析|因子分析

在处理实际问题中&#xff0c;在很多情况下&#xff0c;不同指标之间可能存在一定的相关性&#xff0c;即变量反映样本的信息有一定重叠 由于指标较多再加上信息的重叠&#xff0c;势必增加了问题的复杂性 希望通过克服相关性、重叠性&#xff0c;用较少的变量代替原来较多的变…

ubuntu18.04更改系统语言及换源的方法步骤

ubuntu的虚拟机不知道第几次被玩崩溃了&#xff0c;无奈只好重装&#xff0c;这里记录下更改语言和换源的操作步骤。 一、更改系统语言为简体中文 1&#xff0c;点击虚拟机右上角的开始按钮&#xff0c;选择设置。 2&#xff0c;在左侧选项中选择Region & Language,再选择…

docker安装mysql使用宿主机网络

在Docker中安装MySQL并使用宿主机网络&#xff0c;意味着你将不会使用Docker的默认网络桥接&#xff0c;而是让MySQL容器直接使用宿主机的网络接口。这样做通常是为了方便从宿主机或其他网络中的机器访问MySQL服务。 以下是在Docker中使用宿主机网络安装MySQL的步骤&#xff1a…