HTML+CSS+JS网页设计期末课程大作业——海贼王(8个页面)动漫网页设计

news2024/11/18 0:44:13

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。


精彩专栏推荐👇🏻👇🏻👇🏻👇🏻

【作者主页——获取更多优质源码】
【web前端期末大作业——毕设项目精品实战案例(1000套)】


文章目录

  • 一、网页介绍
  • 一、网页效果
  • 二、代码展示
    • 1.HTML代码
    • 2.CSS代码
  • 三、个人总结
  • 四、更多干货

一、网页介绍

1 网页简介:此作品为学生个人主页网页设计题材,HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码,这是一个不错的网页制作,画面精明,代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。

3.知识应用:技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了Logo(源文件)所需的知识点。


一、网页效果

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


二、代码展示


1.HTML代码

代码如下(示例):以下仅展示部分代码供参考~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海贼王</title>
    <style type="text/css">
    @import"修饰.css";
    </style>
</head>
<body>
    <p style="text-align: center;">
        <img src="素材/顶部长图.jpg" width="80%" height="300px"  border="1">
    </p>
    <table style="color: white;" width = "80%" height = "50%" border = "1" cellspacing = "0"  align = "center" >
        <tr>
		    <th bgcolor="DarkRed">
                <a href="网站首页.html " style="color: white;" class="abc">网站首页</a>
            </th>
            <th bgcolor="DarkRed">
                <a href="TV版目录.html " style="color: white;" class="abc">TV版目录</a>
            </th>
            <th bgcolor="DarkRed">
                <a href="角色资料.html " style="color: white;" class="abc">角色资料</a>
            </th>
            <th bgcolor="DarkRed">
                <a href="精选壁纸.html " style="color: white;" class="abc">精选壁纸</a>
            </th>
			<th bgcolor="DarkRed">
                <a href="衍生作品.html " style="color: white;" class="abc">衍生作品</a>
            </th>
            <th bgcolor="DarkRed">
                <a href="果实大全.html " style="color: white;" class="abc">果实大全</a>
            </th>
			<th bgcolor="DarkRed">
                <a href="海贼论坛.html " style="color: white;" class="abc">海贼论坛</a>
            </th>
            <th bgcolor="DarkRed">
                <a href="关于我们.html " style="color: white;" class="abc">关于我们</a>
            </th>
         </tr>
   </table>
         <div class="div11"><font color="white" size="7">海贼王</font></div>

         <p class="p" style="font-size: 20px; color:white">
            <img src="素材/首页.jpg" width = "30%" height = "50%" class="img"></img>
            &nbsp;&nbsp;基本简介
            <br></br>
            &nbsp;&nbsp;&nbsp;&nbsp;《海贼王》是日本漫画家尾田荣一郎的作品,描述的是一个名叫路飞的少年想成为海贼王,
            因误食了香克斯收藏的恶魔果实,变成了橡胶人的故事。恶魔果实使路飞永远不能游泳,
            但他始终没有改变成为海贼王的理想“找到传说中哥尔•D•罗杰的秘宝,并且成为海贼王”开始了冒险之旅。
            <br></br><br></br>
            &nbsp;&nbsp;剧情简介
            <br></br>
            &nbsp;&nbsp;&nbsp;&nbsp;财富、名声、权力,曾经拥有世界上一切的“海贼王”哥尔·D·罗杰,在临死前留下了一句话,
            让全世界的人们,趋之若鹜,奔向大海:“想要我的财宝吗?想要的话可以给你,去伟大的航道找吧!
            我把一切都放在那里了!”于是所有的人们开始起航,趋之若鹜的奔向大海,世界迎来了“大海贼时代”
         </p> 
         <div class="div12"></div>
    
    <br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br>
    <br></br><br></br><br></br>

    <div class="div12"><font color="white" size="7">原声资料</font></div>
    <br></br><br></br>
    <div class="div12"><font color="white" size="5">OP 片头曲</font></div>
    <br></br>
    <table style="color: white;" width = "80%" height = "50%" border = "1" cellspacing = "0"  align = "center" >
        <tr>
		    <th bgcolor="DarkRed">序号</th>
			<th bgcolor="DarkRed">集数</th>
			<th bgcolor="DarkRed">歌名</th>
			<th bgcolor="DarkRed">主唱</th>
		 </tr>
        
         <tr>
		    <td>OP1</td>
			<td>1~47</td>
			<td>ウィーアー!(WE ARE!)</td>
            <td>北谷洋</td>
        </tr>

        <tr>
		    <td>OP2</td>
			<td>48~115</td>
			<td>Believe</td>
            <td>Folder5</td>
        </tr>

        <tr>
		    <td>OP3</td>
			<td>116~168</td>
			<td>ヒカリヘ(向着阳光)</td>
            <td>The Babystars</td>
        </tr>

        <tr>
		    <td>OP4</td>
			<td>169~206</td>
			<td>BON VOYAGE!(一路顺风)</td>
            <td>BON-BON BLANCO </td>
        </tr>

        <tr>
		    <td>OP5</td>
			<td>207~263</td>
			<td>ココロのちず (心之航海图)</td>
            <td>BOYSTYLE </td>
        </tr>

        <tr>
		    <td>OP6</td>
			<td>264~278</td>
			<td>BRAND NEW WORLD</td>
            <td>D-51 </td>
        </tr>

        <tr>
		    <td>OP7</td>
			<td>279~283</td>
			<td>ウィーアー!(WE ARE!)</td>
            <td>7人の麦わら海贼団</td>
        </tr>

        <tr>
		    <td>OP8</td>
			<td>284~325</td>
			<td>Crazy Rainbow</td>
            <td>タッキー&翼</td>
        </tr>

        <tr>
		    <td>OP9</td>
			<td>326~372</td>
			<td>Jungle P</td>
            <td>5050</td>
        </tr>
    
        <tr>
		    <td>OP10</td>
			<td>373~394</td>
			<td>ウィーアー!(WE ARE!)</td>
            <td>东方神起</td>
        </tr>
       
        <tr>
		    <td>OP11</td>
			<td>395~425</td>
			<td>share the world</td>
            <td>东方神起</td>
        </tr>
         
        <tr>
		    <td>OP12</td>
			<td>426~458</td>
			<td>风をさがして(寻找风)</td>
            <td>矢口真里とストローハット</td>
        </tr>
    
    
    </table>
    <br></br><br></br>
    <br></br><br></br>


    <div class="div12"><font color="white" size="5">ED 片尾曲</font></div>
    <br></br>
    <table style="color: white;" width = "80%" height = "50%" border = "1" cellspacing = "0"  align = "center" >
        <tr>
		    <th bgcolor="DarkRed">序号</th>
			<th bgcolor="DarkRed">集数</th>
			<th bgcolor="DarkRed">歌名</th>
			<th bgcolor="DarkRed">主唱</th>
		 </tr>
        
         <tr>
		    <td>ED1</td>
			<td>1~30</td>
			<td>Memories</td>
            <td>大槻真希</td>
        </tr>

        <tr>
		    <td>ED2</td>
			<td>31~63</td>
			<td>RUN! RUN! RUN!</td>
            <td>大槻真希</td>
        </tr>

        <tr>
		    <td>ED3</td>
			<td>64~73</td>
			<td>私がいるよ(I'm Right Here!)</td>
            <td>TOMATO CUBE</td>
        </tr>

        <tr>
		    <td>ED4</td>
			<td>74~81</td>
			<td>しょうちのすけ (That's a fact!)</td>
            <td>推定少女</td>
        </tr>

        <tr>
		    <td>ED5</td>
			<td>82~94</td>
			<td>BEFORE DAWN</td>
            <td>AI-SACHI</td>
        </tr>

        <tr>
		    <td>ED6</td>
			<td>95~106</td>
			<td>Fish</td>
            <td>The Kaleidoscope</td>
        </tr>

        <tr>
		    <td>ED7</td>
			<td>107~118</td>
			<td>GLORY-君がいるから(因为有你)</td>
            <td>上原多香子</td>
        </tr>

        <tr>
		    <td>ED8</td>
			<td>119~127
                129~132</td>
			<td>Shining Ray</td>
            <td>Janne Da Arc</td>
        </tr>

        <tr>
		    <td>ED9</td>
			<td>133~156</td>
			<td>Free Will</td>
            <td>Ruppina</td>
        </tr>
    
        <tr>
		    <td>ED10</td>
			<td>157~168</td>
			<td>Faith</td>
            <td>Ruppina</td>
        </tr>
       
        <tr>
		    <td>ED11</td>
			<td>169~181</td>
			<td>A to Z ~ONE PIECE Edition~</td>
            <td>ZZ</td>
        </tr>
    </table>

    <br></br><br></br>
    <br></br><br></br>
    <br></br><br></br>


    </body>
    </html>



2.CSS代码

.div11
{
    position: absolute;
    left: 160px;
    top: 390px;
}

.div12
{
    position: absolute;
    left: 160px;
}


.div21
{
    position: absolute;
    left: 160px;
}

.img21
{
    position: absolute;
    left: 160px;
    top: 800px;
}

.p3 {
    width: 1240px;
    height: 800px;
    position: absolute;
    left: 140px;
    top: 440px;
}
.img3 {
       float:left;
       margin:0px 0px 15px 20px;
}

.p32 {
    width: 1240px;
    height: 800px;
    position: absolute;
    left: 140px;
    top: 900px;
}
.img32 {
       float:left;
       margin:0px 0px 15px 20px;
}

.p33 {
    width: 1240px;
    height: 800px;
    position: absolute;
    left: 140px;
    top: 1360px;
}
.img33 {
       float:left;
       margin:0px 0px 15px 20px;
}

.p34 {
    width: 1240px;
    height: 800px;
    position: absolute;
    left: 140px;
    top: 1820px;
}
.img34 {
       float:left;
       margin:0px 0px 15px 20px;
}

.p35 {
    width: 1240px;
    height: 800px;
    position: absolute;
    left: 140px;
    top: 2280px;
}
.img35 {
       float:left;
       margin:0px 0px 15px 20px;
}

.p36 {
    width: 1240px;
    height: 800px;
    position: absolute;
    left: 140px;
    top: 2740px;
}
.img36 {
       float:left;
       margin:0px 0px 15px 20px;
}

.a31
{
    position: absolute;
    left: 160px;
    top: 3220px;
    text-decoration: none;
}

.p37 {
    width: 1240px;
    height: 800px;
    position: absolute;
    left: 140px;
    top: 3250px;
}

.p4
{
    position: absolute;
    left: 160px;
}




三、个人总结

一套合格的网页应该包含(具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分;
  2. 所有页面相互超链接,可到三级页面,有5-10个页面组成;
  3. 页面样式风格统一布局显示正常,不错乱,使用Div+Css技术;
  4. 菜单美观、醒目,二级菜单可正常弹出与跳转;
  5. 要有JS特效,如定时切换和手动切换图片新闻;
  6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用;
  7. 页面清爽、美观、大方,不雷同。
  8. 网站前端程序不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货

1.看到这里了就 【点赞收藏博文】 三连支持下吧,你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】

2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

3.以上内容技术相关问题可以相互学习交流

在这里插入图片描述

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

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

相关文章

vector类的常用接口说明

目录 一、(constructor)构造函数声明 二、vector的迭代器 三、vector的增删改查 四、insert和erase&#xff0c;以及查找find&#xff08;find不属于vector&#xff0c;是stl提供的算法&#xff09; 五、三种遍历方式 六、源代码 vector是可变大小数组的序列容器 一、(c…

海豚调度器分布式部署

前置准备 服务器 node01,node02,node03三台服务器&#xff08;本教程服务器系统版本Linux version 3.10.0-1160.el7.x86_64&#xff09; node01作为master&#xff0c;api&#xff0c;alert节点&#xff0c;node02和node03作为worker节点 安装包下载 下载dolphinscheduler和…

RFID数据采集成为MES系统精准数据

随着信息化、自动化成为企业发展趋势&#xff0c;制造执行系统(MES)是连接计划层和现场控制层之间的纽带&#xff0c;成为企业制造战略重要技术手段。MES生产执行系统主要在生产过程层及管理层之间加强数据集成与分析的力度&#xff0c;拓展优化技术应用的范围&#xff0c;真正…

猿创征文|Python学习工具千千万,我心中的TOP10

前言&#xff1a; 大家好&#xff0c;我是是Dream呀&#xff0c;在我们平时的开发和生活中&#xff0c;每天都在使用、寻找、贡献、创作各类开发者工具&#xff0c;包括开源服务、付费软件、API等。好的工具可以极大帮助我们提升效率&#xff0c;服务业务。作为一名资深的Pytho…

MFC下拉框控件用法

目录 一、属性方式设置下拉框内容 1.Combo Box下拉框 2.Data属性 3.Type属性 4.Sort属性 二、初始化OnInitDialog设置下拉框内容 1.添加Combo Box下拉框变量 2.AddString方法添加选项 3.SetCurSel设置默认显示内容 4.InsertString方法插入内容 4.DeleteString删除指…

数据中心网络设计- 叶脊(Spine-Leaf)网络架构

大家好&#xff0c;我是技福的小咖老师。 随着业务形态的变化&#xff0c;数据中心网络的交换架构也在不断的发展。传统的三层网络结构应用广泛而且技术成熟&#xff0c;但随着技术的发展趋势&#xff0c;它的瓶颈也不断涌现&#xff0c;导致越来越多的网络工程师放弃这种结构…

[附源码]计算机毕业设计JAVA校园一卡通管理信息系统台

[附源码]计算机毕业设计JAVA校园一卡通管理信息系统台 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM…

C#上位机系列(5)—示波器二基础代码+线条绘制

本文是讲解C#.net平台的Winform框架下的第四个内容&#xff0c;手把手介绍上位机项目的创建方式以及一些写软件时常用的功能&#xff0c;讲解从零开始的每一个步骤。 接上一节的介绍&#xff0c;本次内容为上位机项目中示波功能代码的基本函数和画图功能。 目的是通过几行代码…

【联邦学习】联邦学习量化——non-iid数据集下的仿真

文章目录改进项目背景量化函数的改进non-iid数据集的设置Fedlab划分数据集的踩雷改进项目背景 在前面的项目中&#xff0c;虽然对联邦学习中&#xff0c;各个ue训练出来的模型上传的参数进行了量化&#xff0c;并仿真的相关结果。但是仍有一些俺不是非常符合场景的情况&#x…

《Hive性能调优实战》读书笔记

很不错的一本书。章节划分清晰明了&#xff0c;可根据个人需要读相应的章节。Hive各个方面的知识体系都有涉及。可作为工具书&#xff0c;常读常新&#xff0c;值得翻阅。 第2章 Hive问题排查与调优思路 优化方法 PL-SQL和T-SQL经验总结&#xff1a; 通过改写SQL&#xff0…

Hust计算机组成原理实验

文章目录logisim的使用1.添加门电路2.添加引脚3.添加导线4.添加文本5.测试电路补充工具实验一&#xff0c;运算器实验8位串行可控加减法器分析一位全加器八位串行加法器即可给出8位串行可控加减法器回答问题CLA74182&#xff08;先行进位加法器&#xff09;参数公式问题位快速加…

10个最常见的JavaScript问题

如今&#xff0c;JavaScript几乎是所有现代web应用程序的核心。这就是为什么JavaScript问题以及找出导致这些问题的错误是web开发人员的首要任务。 用于单页应用程序&#xff08;SPA&#xff09;开发、图形和动画以及服务器端JavaScript平台的强大的基于JavaScript的库和框架并…

opencv c++ 二值图像、阈值计算方法、全局阈值、自适应阈值

1、图像定义&#xff1a; 彩色图像 &#xff1a;三通道&#xff0c;像素值一般为0~255&#xff1b; 灰度图像&#xff1a;单通道&#xff0c;像素值一般为0~255&#xff1b; 二值图像&#xff1a;单通道&#xff0c;像素值一般为0&#xff08;黑色&#xff09;、255&#xff08…

Python计算器(包含机制转换)

实现思路&#xff1a; 要优先处理内层括号运算&#xff0d;&#xff0d;外层括号运算&#xff0d;&#xff0d;先乘除后加减的原则&#xff1a; 1、正则处理用户输入的字符串&#xff0c;然后对其进行判断&#xff0c;判断计算公式是否有括号&#xff0c;有就先将计算公式进行…

判断二叉树是否是平衡二叉树(c#)

问题描述 给定一棵二叉树&#xff0c;判断其是否为平衡二叉树。 示例 示例1 Input: root [3,9,20,null,null,15,7] Output: true 示例2 Input: root [1,2,2,3,3,null,null,4,4] Output: false 解决方案描述 二叉树的每个节点的左子节点和右子节点的高度差小于等于1&#x…

Windows和Linux混合系统通过AD域实现用户集中认证

一、Windows AD域 1、统一认证简介 管理的Linux服务器和Windows服务器如果很多,如果都用本地用户名管理,要管理和记住几十台甚至上百台服务器的不同账号不同密码,这是很难的。但是如果所有服务器账号密码都设置一样,那又完全没有安全性可言。 什么是服务器的集中认证(统…

数据结构(8)树形结构——B树、B+树(含完整建树过程)

目录 8.1.B树 8.1.1.概述 8.1.2.完整建树过程 8.2.B树 8.1.B树 8.1.1.概述 B树存在的意义&#xff1a; 二叉树在存储数据时可能出现向一边倾斜导致查询效率降低的情况&#xff0c;为了防止二叉树的倾斜&#xff0c;出现了平衡二叉树&#xff0c;通过旋转的方式保证二叉树…

[附源码]计算机毕业设计springboot校园商铺

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

[附源码]Python计算机毕业设计Django基于web的羽毛球管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

学生HTML个人网页作业作品 HTML+CSS+JavaScript环保页面设计与实现制作

&#x1f380; 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…