- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

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

IT司马青衫发表于 2022/08/11 00:20:57 2022/08/11

【摘要】 HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】@TOC...

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

@TOC

一、网页介绍📖

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.以上内容技术相关问题😈欢迎一起交流学习🔥!

💂【获取方式】

gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

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

一、网页介绍📖

一、网页效果🌌

二、代码展示😈

1.HTML代码结构 🧱

2.CSS样式代码 🏠

三、个人总结😊

四、更多干货🚀

💂【获取方式】

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

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

一、网页介绍📖

一、网页效果🌌

二、代码展示😈

1.HTML代码结构 🧱

2.CSS样式代码 🏠

三、个人总结😊

四、更多干货🚀

💂【获取方式】

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品