web期末作业设计网页：动漫网站设计——大鱼海棠(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品动漫网页设计作业 web网页设计与开发 html实训大作业_动态网页设计作业成品-程序员宅基地

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。

作品目录

一、网站介绍

二、网站效果

1.图片演示

三、网站代码

二、网站介绍

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中：
(1)html文件包含：其中index.html是首页、其他html为二级页面；
(2) css文件包含：css全部页面样式；
(3) js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。

三、网站效果

四、代码展示

代码说明：以下仅展示部分代码供参考~

HTML结构部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <title>网站首页</title>
    <style>

    </style>
</head>
<body>
    <div class="qb">
        <!-- 导航栏 -->
        <div class="qb_1">
            <ul>
                <li><a href="index.html" class="active">网站首页</a></li>
                <li><a href="index01.html">剧情介绍</a></li>
                <li><a href="index02.html">角色介绍</a></li>
                <li><a href="index03.html">影视原声</a></li>
                <li><a href="index04.html">幕后制作</a></li>
                <li><a href="index05.html">制作发行</a></li>
                <li><a href="index06.html">影片评价</a></li>
                <li><a href="index07.html">精选影评</a></li>
                <li><a href="index08.html">经典语录</a></li>
                <li><a href="index09.html">心得体会</a></li>
                <li><a href="index10.html">在线登陆</a></li>
                <li><a href="index11.html">在线注册</a></li>
            </ul>
        </div>
        <!-- 内容区域 -->
        <div class="qb_2">
            <!-- 大图 -->
            <div class="qb_3">
                <img src="./images/banner4.webp" alt="">
            </div>
            <!-- 基本信息 -->
            <div class="qb_4">
                <h1>基本信息</h1>
                <div class="qb_4_1">
                    <p>《大鱼海棠》是由彼岸天文化有限公司、北京光线影业有限公司、霍尔果斯彩条屋影业有限公司联合出品，由梁旋、张春联合执导，季冠霖、苏尚卿、许魏洲、金士杰、潘淑兰等参与配音的动画电影。该片讲述了掌管海棠花生长的少女椿，为报恩而努力复活人类男孩“鲲”的灵魂，成长为比鲸更巨大的鱼并回归大海，但这一过程却不断地违背“神”的世界规律而引发种种灾难，彼此纠缠的命运斗争故事。该片于2016年7月8日在中国大陆上映。</p>
                    <ul>
                        <li class="qq">
                            <img src="./images/zs1.png" alt="">
                        </li>
                        <li class="qq">
                            <img src="./images/zs2.jpg" alt="">
                        </li>
                        <li class="qq">
                            <img src="./images/zs3.jfif" alt="">
                        </li>
                        <li class="qq">
                            <img src="./images/zs4.jpg" alt="">
                        </li>
                    </ul>
                </div>
            </div>

CSS样式部分代码

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #e2bceb;
}
.qb {
    width: 1200px;
    margin: 0 auto;
    background-color: white;
}
.qb_1 {
    width: 100%;
    height: 100px;
    background-color: #be5d92;
}
.qb_1 ul li {
    float: left;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    list-style: none;
}
.qb_1 ul li a {
    color: white;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 25px;
    text-decoration: none;
}
.qb_1 ul li a.active {
    color: #be5d92;
    font-weight: bold;
    background-color: #ffffff;
}
.qb_1 ul li a:hover {
    color: #be5d92;
    font-weight: bold;
    background-color: #ffffff;
}
.qb_2 {
    padding: 20px 20px;
}
.qb_3 img {
    width: 100%;
}
.qb_4 {
    margin: 20px 0;
}
.qb_4 h1 {
    color: white;
    font-size: 24px;
    font-weight: 400;
    padding: 10px 20px;
    border-radius: 40px;
    display: inline-block;
    background-color: #be5d92;
}
.qb_4_1 p {
    margin-bottom: 30px;
}
.qb_4_1 ul li {
    float: left;
    list-style: none;
    width: 266px;
    height: 500px;
    border-radius: 5px;
    margin-right: 12px;
    text-align: center;
}
.qb_4_1 ul li:last-child {
    margin-right: 0;
}
.qb_4_1 ul li img {
    float: left;
    width: 266px;
    height: 500px;
    text-align: center;
}
.qb_4_1 {
    float: left;
    padding: 30px;
    margin-top: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    color: white;
    text-indent: 2em;
    background-color: #be5d92;
}
.bt {
    color: white;
    font-size: 24px;
    font-weight: 400;
    padding: 10px 20px;
    border-radius: 40px;
    display: inline-block;
    background-color: #be5d92;
}
.qb_5 {
    margin-top: 40px;
}
.qb_5 ul li {
    float: left;
    width: 570px;
    height: 300px;
    list-style: none;
    margin: 20px 0;
}
.qb_5 ul li video {
    width: 570px;
    height: 300px;
    object-fit: cover;
}
.qb_5 ul li:nth-child(1) {
    margin-right: 20px;
}
.qb_6 {
    margin-top: 40px;
}
.qb_6 ul {
    margin: 20px 0;
}
.qb_6 ul li {
    float: left;
    width: 281px;
    height: 150px;
    list-style: none;
    margin-right: 12px;
    text-align: center;
}
.qb_6 ul li:last-child {
    margin-right: 0;
}
.qb_6 ul li img {
    width: 281px;
    height: 150px;
}
.qq {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.qq img {
    width: 100%;
    height: 100%;
    transition: all 0.5s;
    cursor: pointer;
}
.qq img:hover {
    transform: scale(1.1);
}
.qb_7 {
    width: 100%;
    color: white;
    text-align: center;
    height: 60px;
    line-height: 60px;
    background-color: #be5d92;
}

五、更多源码

1.如果我的博客对你有帮助 请 “点赞” “️评论” “收藏” 一键三连哦！

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

3.以上内容技术相关问题欢迎一起交流学习

本文链接：https://blog.csdn.net/m0_62153875/article/details/131998689

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Web前端自定义View详解，css3 文字流光渐变背景模糊边框两边伸展，714页PDF的鸿蒙学习笔记,-程序员宅基地

文章浏览阅读930次，点赞21次，收藏12次。ty3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算**-webkit-background-clip：裁剪背景图像,使用文字作为裁剪区域向外裁剪，此时文字颜色仍覆盖背景图。-webkit-text-fill-color：设置字体颜色。background-size：背景图长度。background-image:使用css3的渐变绘制图像，从左到右。

SIM800 发送http请求AT指令_at+httpread 长度-程序员宅基地

文章浏览阅读6.5k次。AT指令步骤AT+SAPBR=3,1,"APN","CMNET" //我也不知道为什么要这样（我是移动卡）AT+SAPBR=1,1AT+HTTPINIT //http初始化准备AT+HTTPPARA="CID",1AT+HTTPPARA="URL","http://2o23854k96.iask.in:49512" //改成你的域名我这里用了花生壳AT+HTTPP..._at+httpread 长度

《电商法》将至：朋友圈的微商们该何去何从？-程序员宅基地

文章浏览阅读224次。也是时候为互联网祛魅了，说到底它只是一种工具而已，是中性的，不应该像真理一样，是一种不容置疑的信仰。《电商法》将至：朋友圈的微商们该何去何从？历时五年，经过三次征求意见、四次审议的电子商务法将于2019年1月1日起正式实施。此次立法在电商经营资质、纳税、处罚标准等方面作出了明确规定，同时也对电子商务平台经营者的责任和义务进行了界定。《电商法》要求被定义为电子商务经营者的从业者必须进行正规登...

Linux中如何安装特定的gcc版本_linux gfortran9安装指定版本-程序员宅基地

文章浏览阅读5.7k次。Linux允许多个版本的gcc共存，当你需要安装多个版本的gcc的时候，比如同时安装gcc-7和gcc-8，你可以通过update-alternatives来重定位你想使用的gcc版本。sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-7 700 --slave /usr/bin/g++ g++ /usr/bin/g++-7sudo update-alternatives --install /usr/bin/gcc.._linux gfortran9安装指定版本

Align before Fuse: Vision and Language Representation Learning with Momentum Distillation-程序员宅基地

文章浏览阅读772次，点赞14次，收藏10次。在本文中，我们引入了一种对比度损失来对齐图像和文本的表征，然后通过跨通道注意来融合它们(ALBEF)，从而使视觉和语言表征学习更扎根。与现有的大多数方法不同，我们的方法不需要边界框注释，也不需要高分辨率图像。为了改进对噪声网络数据的学习，我们提出了动量蒸馏，这是一种自训练方法，它从动量模型产生的伪目标中学习。我们从互信息最大化的角度对ALBEF进行了理论分析，表明不同的训练任务可以解释为为图像-文本对生成视图的不同方式。

Nagios 监控服务器部署_nagios监控部署-程序员宅基地

文章浏览阅读628次。【 Nagios 安装配置】安装参考：Nagios Core - Installing Nagios Core From Source# 设置SELINUXsed -i 's/SELINUX=.*/SELINUX=disabled/g' /etc/selinux/configsetenforce 0# 安装必要包yum install -y gcc glibc glibc..._nagios监控部署

随便推点

odoo14 | widget将勾选块变成开关按钮_odoo widget 开关-程序员宅基地

文章浏览阅读526次。在odoo中将布尔勾选框变成一个随时可以开关的按钮。升级模块即可看到效果，该按钮的操作不受只读影响。只需要在xml中对应的字段后面加上小组件。_odoo widget 开关

PADS一键删除所有胶粘过孔_pads怎么取消胶粘-程序员宅基地

文章浏览阅读259次。PADS一键删除胶粘过孔_pads怎么取消胶粘

Activity背景透明-程序员宅基地

文章浏览阅读505次。Theme.Translucent.NoTitleBar.Fullscreen当指定Activity 样式 Them.Dialog 时候又不允许用XML 设置 Activity 的背景颜色的时候用代码 this.getWindow().getDecorView().setBackgroundColor(Color.TRANSPARENT); 主意：代码写在 setContView()_activity背景透明

项目笔记（一）_如何做项目笔记图片-程序员宅基地

文章浏览阅读561次。有关于使用matlab进行基础的文件读入输出，字符串处理_如何做项目笔记图片

C/C++编程：long long类型_longlong c-程序员宅基地

文章浏览阅读1.2w次，点赞3次，收藏7次。数据类型long long是C++11中重新定义的，标准规定它最小是64bit在这之前为了提供超过32bit的整数，各个开发环境（编译器）分别定义了各自的64bit整数类型。这会导致代码不兼容现在，C++11直接定义了long long类型我猜许多人应该使用过这个类型，当然在C++11之前，这种尝试会被编译器无情拒绝，自C++11之后就不会在发生这样地情况了。因此我认为：在C++11新特性中，long long一定是最容易被接受的一个。多数程序员看到它时甚至不会意识到这是一个新特性。相应的，C++1_longlong c

关于在 Notion 中使用 Markdown 语法_notion怎么写markdown-程序员宅基地

文章浏览阅读1.4k次。习惯使用的 Markdown 的伙伴们应该知道，当需要加粗字体时，会首先输入。，也就是先键入**，后面紧接着输入需要加粗的文字，最后键入**。但是在 Notion 中，这个就不太行了。同样，行内公式、行内代码高亮、斜体等都是这个规则。，然后在里面填内容。_notion怎么写markdown