大一学生HTML个人网页作业作品——火影忍者动漫7页面带特效带轮播(HTML+CSS+JavaScript)

最新推荐文章于 2024-08-23 10:53:05 发布

web网站建设

最新推荐文章于 2024-08-23 10:53:05 发布

阅读量239

点赞数 5

分类专栏：网页设计与制作文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_38512571/article/details/127582847

版权

网页设计与制作专栏收录该内容

1187 篇文章 97 订阅

订阅专栏

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码：【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

一、网页介绍📖

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 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>动漫--火影忍者</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="index_list">
        <ul>
            <li> <a href="index.html">首页</a> </li>
            <li> <a href="jingli.html"> 剧情简介</a> </li>
            <li> <a href="zuopin.html">火影疾风传</a> </li>
            <li> <a href="hudong.html">火影新世代</a> </li>
            <li> <a href="huojiang.html"> 历代火影</a> </li>
            <li> <a href="pinjia.html"> 名字由来</a> </li>
            <li> <a href="login.html">登录</a> </li>
        </ul>
    </div>
    <div class="cleaner"></div>
    <div id="container">
        <div class="dm">
            <!-- 代码 开始 -->
            <div id="yc-mod-slider">
                <div class="wrapper">
                    <div id="slideshow" class="box_skitter fn-clear">
                        <ul>
                            <li> <img class="cubeRandom" src="images/dm1.jpg" /></li>
                            <li> <img class="cubeRandom" src="images/dm2.jpg" /></li>
                            <li> <img class="cubeRandom" src="images/dm3.jpg" /></li>
                        </ul>
                    </div>
                    <script type="text/javascript" src="js/slideshow.js"></script>
                </div>
            </div>
            <!-- 代码 结束 -->
        </div>
        <div class=" clear"></div>
        <div class="index_main">
            <h1>Studio Pierrot </h1>
            <a href="javascript:;">电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》自2007年2月开始播出，共500话；累计全720话。</a>
            <p>
                <img src="images/1.jpg">


            </p>

        </div>
        <div class="share">

            <div class="cleaner"></div>
        </div>
        <div id="footer"> Copyright © 动漫--火影忍者</div>
    </div>
    <!-- End Of Container -->
</body>

</html>

2.CSS样式代码 🏠



 html {
     background: #000;
     ;
 }

 body {
     margin: 0;
     padding: 0;
     font-family: Tahoma, "Trebuchet MS", Verdana;
     font-size: 12px;
     line-height: 1.5em;
     width: 100%;
     display: table;
     background: url(../images/bj.jpg) center top no-repeat fixed #000;
 }

 a:link,
 a:visited {
     color: #87430c;
     text-decoration: none;
 }

 a:active,
 a:hover {
     color: #FFFF00;
 }

 p {
     font-family: Tahoma, "Trebuchet MS", Verdana;
     font-size: 14px;
     color: #222;
     line-height: 24px;
     text-align: justify;
 }

 h1 {
     font-family: Tahoma, "Trebuchet MS", Verdana;
     font-size: 25px;
     color: #333;
     font-weight: normal;
     margin: 0 0 15px 0;
 }

 h2 {
     font-family: "Times New Roman", Times, serif;
     font-size: 14px;
     color: #111;
     margin: 0 0 10px 0;
 }

 h3 {
     font-family: Tahoma;
     font-size: 13px;
     color: #111;
     font-weight: normal;
     margin: 0 0 3px 0;
 }

 .title_left {
     float: left;
     width: 333px;
     height: 46px;
 }

 .title_right {
     float: right;
     width: 165px;
     height: 40px;
     color: #d89300;
     font-family: Tahoma;
     font-size: 28px;
     margin: 0;
     padding: 6px 0 0 0;
 }

 .title_left h1 {
     float: left;
     display: block;
     font-family: Tahoma;
     font-size: 25px;
     color: #e17638;
     font-weight: normal;
     margin: 0 0 2px 0;
 }

 .title_left h3 {
     font-family: Tahoma;
     font-size: 20px;
     color: #fff;
     font-weight: normal;
     display: block;
     float: right;
 }

 .gallery ul {
     margin-left: -40px;
 }

 .gallery li {
     float: left;
     margin: 5px;
     list-style-type: none;
 }

 .gallery li img {
     width: 75px;
     height: 75px;
 }

 li {
     list-style-type: none;
 }

 #container {
     width: 950px;
     padding: 30px;
     margin: 10px auto;
     background-color: rgba(255, 255, 255, 0.7);
     -moz-border-radius: 20px;
     border-radius: 20px;
     min-height: 600px;
     margin-bottom: 50px;
 }

 .index_main {
     width: 700px;
     height: auto;
     margin: auto;
     padding: 50px 0px;
     text-align: center;
 }

 .index_main h1 {
     color: #fff;
     font-size: 111px;
     text-align: center;
     line-height: 136px;
     font-weight: normal;
 }

 .index_list {
     width: 960px;
     margin: auto;
     min-height: 80px;
     padding-top: 20px;
 }

 .index_list ul {}

 .index_list li {
     height: 50px;
     margin: 15px;
     float: left;
 }

 .index_list li a {
     color: #fff;
     font-size: 22px;
     text-align: center;
     line-height: 36px;
 }

 .index_list li a:hover {
     color: #990;
 }

 .share {
     width: 220px;
     height: 50px;
     margin: auto;
 }

 .share li {
     float: left;
     margin: 2px;
 }

 .share li img {
     width: 30px;
     height: 30px;
 }

 .Language {
     width: 860px;
     margin: auto;
 }

 .Language ul {
     width: 700px;
 }

 .Language li {
     width: 380px;
     height: 100px;
     margin: 15px;
 }

 .Language img {
     width: 90px;
     height: 66px;
     float: left;
 }

 .Language li p {
     font-size: 22px;
     text-align: left;
     line-height: 66px;
     width: 600px;
 }

 .Contact_input {
     width: 500px;
     float: left;
     margin: 5px;
     font-size: 20px;
     color: #444;
     line-height: 26px;
 }

 .Contact_input p {
     font-size: 20px;
     color: #444;
     line-height: 26px;
     text-indent: 0em;
 }

 .c_input {
     width: 300px;
     height: 25px;
 }

 .c_text {
     width: 300px;
     height: 100px;
 }

 .SUB {
     width: 120px;
     height: 35px;
     text-align: center;
     background-color: #333;
     -moz-border-radius: 5px;
     border-radius: 5px;
     margin-top: 10px;
 }

 .SUB a {
     color: #FFF;
     line-height: 35px;
     font-size: 18px;
 }

 .SUB:hover {
     width: 120px;
     height: 35px;
     text-align: center;
     background-color: #800;
     -moz-border-radius: 5px;
     border-radius: 5px;
 }

 .xinshang {
     width: 960px;
     line-height: 55px;
 }

 .xinshang ul {
     margin-left: -40px;
 }

 .xinshang li {
     width: 280px;
     height: 180px;
     -moz-border-radius: 40px;
     border-radius: 40px;
     overflow: hidden;
     float: left;
     margin: 5px;
     list-style-type: none;
     border: 5px solid #ccc;
 }

 .xinshang li:hover {
     border: 5px solid #fff;
 }

 .xinshang li img {
     width: 280px;
     height: 180px;
 }

 .Restaurant {
     width: 960px;
 }

 .Restaurant ul {
     margin-left: -40px;
 }

 .Restaurant li {
     width: 170px;
     height: 100px;
     -moz-border-radius: 10px;
     border-radius: 10px;
     overflow: hidden;
     float: left;
     margin: 5px;
     list-style-type: none;
     border: 2px solid #ccc;
 }

 .Restaurant li:hover {
     border: 2px solid #fff;
 }

 .Restaurant li img {
     width: 180px;
     height: 100px;
 }

 .Hotel {
     width: 960px;
     border-top: 1px dashed #ddd;
 }

 .Hotel ul {
     margin-left: -40px;
 }

 .Hotel li {
     width: 220px;
     height: 140px;
     -moz-border-radius: 10px;
     border-radius: 10px;
     overflow: hidden;
     float: left;
     margin: 5px;
     list-style-type: none;
     border: 2px solid #ccc;
 }

 .Hotel li:hover {
     border: 2px solid #4b75dd;
 }

 .Hotel li img {
     width: 220px;
     height: 140px;
 }

 .left_main {
     width: 800px;
     padding: 10px;
     height: auto;
     float: left;
 }

 .left_main p {
     font-size: 14px;
     line-height: 22px;
     color: #333;
     text-indent: 2em;
 }

 .youji_main {
     width: 920px;
     padding: 10px;
     height: auto;
     float: left;
 }

 .youji_main p {
     font-size: 14px;
     line-height: 22px;
     color: #333;
     text-indent: 2em;
 }

 .fl {
     float: left;
 }

 .fr {
     float: right;
 }

 .3_col_middle img {
     float: left;
     border: none;
 }

 .3_col_middle img.img_middle {
     margin: 0 8px;
 }

 .more {
     float: right;
     color: #777;
     font-size: 11px;
     margin: 0 10px 0px 0;
 }

 .more a {
     text-decoration: none;
     color: #777;
 }

 .more a:hover {
     text-decoration: underline;
 }

 .more_2 {
     float: left;
     color: #b0b0b0;
     font-size: 10px;
     margin: 0 10px 10px 0;
     background: url(../images/more.png) no-repeat;
     padding: 0 0 0 10px;
     background-position: 0 7px;
 }

 .more_2 a {
     text-decoration: none;
     color: #777;
 }

 .more_2 a:hover,
 .more_2:hover {
     text-decoration: underline;
 }

 #footer {
     width: 100%;
     color: #555;
     margin: 0;
     padding: 10px 0;
     text-align: center;
 }

 .cleaner {
     clear: both;
     height: 0;
     margin: 0;
     padding: 0;
 }

 /* -------------------zhuce login css -------------------------------*/

 .zhuce {
     width: 300px;
     height: auto;
     float: left;
     padding: 10px;
     font-size: 16px;
     border-top: 2px solid #963;
 }

 .zhuce_info {
     width: 280px;
     height: 30px;
     margin: 5px auto;
 }

 .zhuce_info input {
     width: 180px;
     height: 20px;
     float: right;
 }

 .subout {
     width: 220px;
     height: 30px;
     margin: 5px auto
 }

 .sub {
     width: 60px;
     height: 20px;
     margin: 5px;
     margin-left: 30px;
     color: #111;
     padding: 2px;
     float: left;
     text-align: center;
     border: 2px solid #555;
     background-color: #ddd;
 }

 .sub:hover {
     background-color: #fff;
 }

 .sub a {
     font-size: 16px;
     line-height: 20px;
     color: #111;
 }

 .sub a:hover {
     color: #800;
     text-decoration: none;
 }

 /* -------------------index lunbo css -------------------------------*/

 .dm {
     width: 950px;
     height: 380px;
     margin: auto;
     -moz-border-radius: 30px;
     border-radius: 30px;
     overflow: hidden;
     margin-bottom: 20px;
 }

 .fn-clear {
     zoom: 1;
 }

 .box_skitter {
     position: relative;
     background: none;
 }

 .box_skitter ul {
     display: none;
 }

 .box_skitter .container_skitter {
     overflow: hidden;
     position: relative;
 }

 .box_skitter .image {
     overflow: hidden;
 }

 .box_skitter .image img {
     width: 950px;
     height: 380px;
     display: none;
 }

 .box_skitter .box_clone {
     position: absolute;
     top: 0;
     left: 0;
     width: 100px;
     overflow: hidden;
     display: none;
     z-index: 20;
 }

 .box_skitter .box_clone img {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 20;
 }

 .box_skitter .prev_button {
     position: absolute;
     top: 30%;
     left: 30px;
     z-index: 100;
     width: 69px;
     height: 124px;
     overflow: hidden;
     text-indent: -9999em;
     margin-top: -5px;
     background: url(../images/prev.png) no-repeat left top !important;
 }

 .box_skitter .next_button {
     position: absolute;
     top: 30%;
     right: 50px;
     z-index: 100;
     width: 69px;
     height: 124px;
     overflow: hidden;
     text-indent: -9999em;
     margin-top: -5px;
     background: url(../images/next.png) no-repeat left top !important;
 }

 .box_skitter .label_skitter {
     z-index: 150;
     position: absolute;
     display: none;
 }

 .loading {
     position: absolute;
     top: 50%;
     right: 50%;
     z-index: 10000;
     margin: -16px -16px;
     color: #fff;
     text-indent: -9999em;
     overflow: hidden;
     background: url(../images/ajax-loader.gif) no-repeat left top;
     width: 31px;
     height: 31px;
 }

 #slideshow {
     width: 950px;
     height: 380px;
 }

 #slideshow ul {
     display: none;
 }

 #content_area #zp {
     width: 900px;
     margin-right: auto;
     margin-left: auto;
     text-align: center;
 }

 #content_area #zp p {
     text-align: center;
 }

三、个人总结😊

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

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

四、更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

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

3.以上内容技术相关问题😈欢迎一起交流学习🔥 在这里插入图片描述

web网站建设

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
大一学生HTML个人网页作业作品——火影忍者动漫7页面带特效带轮播(HTML+CSS+JavaScript)

⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
复制链接

扫一扫