web期末作业设计网页：动漫网站设计——长安三万里(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品动漫网页设计作业 web网页设计与开发 html实训大作业

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

本文详细介绍了如何使用HTML5和CSS3进行网站设计，包括网站布局选择、代码编写、图片处理和浏览器兼容性考虑。提供了HTML结构和CSS样式的代码示例，适合大学生网页设计作业需求。

摘要由CSDN通过智能技术生成

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, 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 name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/style.css">
    <style>

    </style>
</head>
<body>
    <div class="qb">
        <div class="header">
            <ul>
                <li class="active">
                    <a href="index.html">首页</a>
                </li>
                <li>
                    <a href="index01.html">剧情简介</a>
                </li>
                <li>
                    <a href="index02.html">角色介绍</a>
                </li>
                <li>
                    <a href="index03.html">幕后花絮</a>
                </li>
            </ul>
        </div>
        <div class="banner">
            <img src="./img/banner.webp" alt="">
        </div>
        <div class="nr">
            <h1>基本信息</h1>
            <p>《长安三万里》是由追光动画制作，谢君伟、邹靖执导，杨天翔、凌振赫、吴俊全、宣晓鸣等配音的历史动画电影，于2023年7月8日在中国内地上映。该片以盛唐为背景，讲述安史之乱后，整个长安因战争而陷入混乱，身处局势之中的高适回忆起自己与李白的过往的故事。</p>
            <img src="./img/banner1.webp" alt="">
        </div>
        <div class="footer">
            <span>长安三万里</span>
        </div>
    </div>
</body>
</html>

🏠CSS样式部分代码

* {
    margin: 0;
    padding: 0;
}
.qb {
    width: 1000px;
    margin: 0 auto;
}
.header {
    width: 1000px;
    height: 60px;
    background-color: #0099ff;
}
.header ul {
    width: 1000px;
    height: 60px;
}
.header ul li {
    float: left;
    width: 250px;
    height: 60px;
    text-align: center;
    cursor: pointer;
    list-style: none;
    line-height: 60px;
    text-decoration: none;
    background-color: #0099ff;
}
.header ul li.active {
    background-color: #3cb1ff;
}
.header ul li:hover {
    background-color: #3cb1ff;
}
.header ul li a {
    color: white;
    text-decoration: none;
}
.banner {
    width: 100%;
    height: 420px;
}
.banner img {
    width: 100%;
    height: 420px;
}
.nr {
    width: 100%;
    padding: 40px 30px;
    box-sizing: border-box;
    background-color: #e3f4ff;
}
.nr h1 {
    margin-bottom: 20px;
}
.nr p {
    text-indent: 2em;
    line-height: 30px;
}
.nr img {
    width: 100%;
    margin-top: 30px;
}
.footer {
    width: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: white;
    background-color: #0099ff;
}
.nr ul li {
    float: left;
    width: 220px;
    height: 280px;
    list-style: none;
    margin-right: 20px;
    margin-bottom: 10px;
}
.nr ul li:nth-child(4n) {
    margin-right: 0;
}
.nr ul li img {
    width: 100%;
    height: 280px;
    margin: 0;
}