大二学生JavaScript实训大作业——动漫秦时明月7页期末网页制作 HTML+CSS+JavaScript 网页设计实例企业网站制作

最新推荐文章于 2024-06-15 12:38:19 发布

IT黑马程序员

最新推荐文章于 2024-06-15 12:38:19 发布

阅读量359

点赞数

分类专栏：学生网页设计作业文章标签：学生网页作业静态网页作业网页模版html javascript大作业学生个人网页制作

本文链接：https://blog.csdn.net/qq_38513433/article/details/127894862

版权

学生网页设计作业专栏收录该内容

2018 篇文章 134 订阅

订阅专栏

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

一、网页介绍📖

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 xmlns:style="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">

    <meta name="author" content="吴祖涛">
    <meta name="keywords" content="秦时明月,天行九歌,历史">
    <meta name="description" content="以动漫为主线、历史为辅线">
    <meta name="robots" content="index,follow">
    <style type="text/css">
        body {
            background-image:url('picture/bg5.png'),url('picture/bg_xx.gif');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
        }
    </style>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/js_zz.js"></script>
    <script type="text/javascript" src="js/js_zz.js"></script>
    <!--切换广告js-->
    <script>
        window.onload = function () {
            var dots = document.getElementById("dots").getElementsByTagName("li"); //获取"dot"数组
            var imgList = document.getElementById("imgList").getElementsByTagName("img"); //获取图像数组
            var back = document.getElementById("back"); //返回按钮
            var go = document.getElementById("go"); //前进按钮

            var dotslen = dots.length;
            var opacity = new Array(dotslen); //透明度,每个"图片"的透明度
            for (var i = 0; i < opacity.length; i++) //将透明度初始化为0
                opacity[i] = 0;

            var nowIndex = 0; //当前要轮播的图片下标
            var loop = null; //轮播计时器
            var loop0 = new Array(opacity.length); //over计时器
            var loop1 = new Array(opacity.length); //leave计时器

            changeImgeOver(dots[nowIndex], "初始"); //初始轮播nowIndex图片
            setDotOver(dots[nowIndex++]);
            GO(); //开始轮播

            /* 轮播方法 */
            function GO() {
                if (loop != null) {
                    clearInterval(loop); //清理之前残留的loop,以免出现bug
                }
                loop = setInterval(function () {
                    setDotLeave(dots[nowIndex - 1 >= 0 ? nowIndex - 1 : dotslen -
                        1]);
                    changeImgeLeave(dots[nowIndex - 1 >= 0 ? nowIndex - 1 : dotslen - 1],
                        "轮播减少"); //nowIndex之前的图片透明度减少
                    for (var i = 0; i < dotslen; i++) {
                        console.log(i + "透明度" + opacity[i]);
                    } //暗中观察
                    console.log("-------");
                    setDotOver(dots[nowIndex]);
                    changeImgeOver(dots[nowIndex], "轮播增加"); //轮播nowIndex图片

                    nowIndex = nowIndex >= dotslen - 1 ? 0 : nowIndex + 1; //轮播下一个图片
                }, 1000);
            }
            /* 设置每个"dot"的触摸事件 */
            for (var i = 0; i < 5; i++) {
                //  console.log(dots.indexOf(dots[i]));
                ! function (arg) {
                    dots[arg].addEventListener("mouseover", function () {
                        setDotLeave(dots[nowIndex - 1 >= 0 ? nowIndex - 1 : dotslen -
                            1]);
                        changeImgeLeave(dots[nowIndex - 1 >= 0 ? nowIndex - 1 : dotslen - 1], "鼠标点击后退");
                        //设置nowIndex - 1 >= 0 ? nowIndex - 1 : dotslen - 1图片透明度为0
                        clearInterval(loop); //暂停轮播loop以免出现bug
                        nowIndex = arg; //将当前轮播下标变成选择的"dot"下标
                        changeImgeOver(this, "鼠标放上增加"); //显示选择的轮播
                        setDotOver(this);
                        nowIndex = nowIndex == dotslen - 1 ? 0 : nowIndex + 1;
                    }); //放上去的事件
                    dots[arg].addEventListener("mouseout", function () {
                        setDotLeave(this);
                        GO(); //启动轮播loop
                    }); //移出来的事件
                }(i);
            }
            /* 设置后退按钮 */
            back.addEventListener("click", function () { //回退到nowindex下标之前二个

                setDotLeave(dots[nowIndex - 1 >= 0 ? nowIndex - 1 : dotslen -
                    1]); //设置nowIndex - 1 >= 0 ? nowIndex - 1 : dotslen - 1轮播原始化
                changeImgeLeave(dots[nowIndex - 1 >= 0 ? nowIndex - 1 : dotslen - 1], "鼠标点击前进");
                clearInterval(loop); //暂停轮播loop
                nowIndex = nowIndex - 2 >= 0 ? (nowIndex - 2) : (dotslen - (2 - nowIndex));
                // console.log("--------");
                console.log("回退到" + nowIndex);
                console.log("-------");
                setDotOver(dots[nowIndex]); //显示后退到的轮播图
                changeImgeOver(dots[nowIndex], "back按键");
                nowIndex = nowIndex >= dotslen - 1 ? 0 : nowIndex + 1; //设置轮播的下标
                setTimeout(() => { //隔500毫秒后启动轮播
                    GO();
                }, 500);
            });
            back.addEventListener("mouseover", function () { //放上去时的特效
                this.style.opacity = 0.5;
            });
            back.addEventListener("mouseleave", function () {
                this.style.opacity = 0.1;
            })

            /* 设置前进按钮 */
            go.addEventListener("click", function () { //其实就是无延时的GO了一下

                setDotLeave(dots[nowIndex - 1 >= 0 ? nowIndex - 1 : dotslen -
                    1]); //设置nowIndex - 1 >= 0 ? nowIndex - 1 : dotslen - 1轮播原始化
                changeImgeLeave(dots[nowIndex - 1 >= 0 ? nowIndex - 1 : dotslen - 1], "鼠标放上减少");
                clearInterval(loop); //暂停轮播loop
                console.log("前进到" + nowIndex);
                console.log("-------");
                setDotOver(dots[nowIndex]); //显示后退到的轮播图
                changeImgeOver(dots[nowIndex], "back按键");
                nowIndex = nowIndex >= dotslen - 1 ? 0 : nowIndex + 1; //设置轮播的下标
                setTimeout(() => { //隔500毫秒后启动轮播
                    GO();
                }, 500);;
            });
            go.addEventListener("mouseover", function () {
                this.style.opacity = 0.5;
            });
            go.addEventListener("mouseleave", function () {
                this.style.opacity = 0.1;
            })

            /* 给图片增加透明度的方法 */
            function changeImgeOver(Q, K) {
                var index = getIndex(dots, Q); //获取下标
                clearInterval(loop1[index]);
                loop0[index] = setInterval(changeOpacity0, 10); //开始增加透明度

                function changeOpacity0() {
                    if (opacity[index] >= 1) {
                        opacity[index] = 1; //
                        clearInterval(this); //如果透明度大于等于1停止增加透明度
                    } else {
                        opacity[index] += 0.02; //改变透明度
                        // console.log("这是" + K + "计时器" + index + "透明度" + opacity[index]); //暗中观察
                        imgList[index].style.opacity = opacity[index]; //设置图片透明度属性
                    }
                }
            }
            /* 给图片减少透明度的方法 */
            function changeImgeLeave(Q, K) {
                var index = getIndex(dots, Q); //获取下标
                clearInterval(loop0[index]); //停止增加透明度
                loop1[index] = setInterval(changeOpacity1, 10); //设置计时器开始减少透明度
                function changeOpacity1() {
                    if (opacity[index] <= 0) {
                        opacity[index] = 0;
                        clearInterval(this); //如果透明度少于等于0停止减少透明度
                    } else {
                        opacity[index] -= 0.02; //减少透明度
                        // console.log("这是" + K + "号计时器" + index + "透明度" + opacity[index]); //暗中观察
                        imgList[index].style.opacity = opacity[index]; //设置图片的透明度属性
                    }
                }
            }

            function getIndex(objArr, obj) { //获取obj在objarr的下标
                for (var i = 0; i < objArr.length; i++)
                    if (objArr[i] == obj)
                        return i;
            }

            function setDotOver(Q) { //设置"dot"的颜色
                Q.style.background = "#fff";
                Q.style.fontcolor = "#eee8aa";
            }

            function setDotLeave(Q) { //设置"dot"的颜色
                Q.style.background = "#b7b7b7";
                Q.style.fontcolor = "#fff";
            }
        }
    </script>
</head>

<body>

<!--页眉:logo-->
<div id="header-wrapper">
    <!--网站logo-->
    <header class="container" id="advaddr">
        <div id="logo">
            <a href=""></a>

        </div>

    </header>

</div>

<!--天下大势，浩浩荡荡，顺之者昌，逆之者亡！-->
<div class="container">
    <div id="tianxia">
        <img src="picture/logo4.png">
    </div>
</div>

<!--菜单导航-->
<div>
        <div id="nav2">
            <ul>
                <li><a href="" target="_blank">首页</a>
                <li><a href="tianxingjiuge.html" target="_blank">天行九歌</a>
                <li><a href="qinshimingyue.html" target="_blank">秦时明月</a>
                <li><a href="zhanguoqixiong.html" target="_blank">战国七雄</a>
                <li><a href="zhuzibaijia.html" target="_blank">诸子百家</a>
                <li><a href="end.html" target="_blank">成王败寇</a>
            </li></ul>
        </div>
</div>

<!--制作空白-->
<div id="caidan_tupianqiehuan_liubai"></div>

<!--内容-->
<div id="content-wrapper" class="container">

    <!--介绍天行九歌-->
    <aside>

    <section class="aside-section">
        <h2 id="title4">视频介绍</h2>
        <iframe src="player.html" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
    </section>

</aside><article>
        <h2 id="title1">动漫简介</h2>
        <section class="recommend">
            <h3>天行九歌</h3>
            <a href="#"><img src="picture/figure(54).jpg" alt="天行九歌"></a><div class="recommend-content">
            <p>《天行九歌》，是由中国3D动画《秦时明月》系列
                原制作团队杭州玄机科技信息技术有限公司打造的姐妹
                篇网络3D动画，两作在剧情上互通，但在品牌上各自独立。
            </p>
            <p>该动画以韩国公子韩非建立的“流沙”组织为主视角，展开六国
                对抗秦国的众生百态，使观众进入战国末年风起云涌、群雄并起、
                百家争鸣的大时代中的故事。
            </p>
        </div>
            <div class="cartmore"><a class="cart" href="tianxingjiuge.html">进入世界</a>
                </div>
        </section>
    </article>

    <!--介绍秦时明月-->
    <aside>
            <section class="aside-section">
                <iframe src="player.html" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
            </section>
        </aside><article>
            <section class="recommend">
        <h3>秦时明月</h3>
        <a href="#"><img src="picture/figure(14)1.jpg" alt="秦时明月"></a>
        <div class="recommend-content">
            <p>《秦时明月》系列是由中国杭州玄机科技信息技术有限公司制作的3D武侠动画系列，
                于2007年春节期间起在中国全国各地正式首映，网络上亦有授权播出。另有衍生出
                的仅在网络、不在电视播出的姐妹篇《天行九歌》等 [1]  目前动画已完结前5部，
                共175集。第6部《秦时明月之沧海横流》已上映序章。
            </p>
            <p>
                《秦时明月》系列是由中国杭州玄机科技信息技术有限公司制作的3D武侠动画系列
                ，于2007年春节期间起在中国全国各地正式首映，网络上亦有授权播出。另有衍生出
                的仅在网络、不在电视播出的姐妹篇《天行九歌》等 [1]  目前动画已完结前5部，共1
                75集。第6部《秦时明月之沧海横流》已上映序章。
            </p>
        </div>
        <div class="cartmore"><a class="cart" href="qinshimingyue.html">进入世界</a>
            </div>
    </section>
        </article>


    <!--连环滚动战国七雄-->
    <div class="pro_gd">
        <div id="marquee1" class="marqueeleft">
            <div class="mar_m clearfix">
                <ul id="marquee1_1">
                    <li>
                        <a class="pic" href=""><img src="picture/figure(1).jpg" alt="产品名称" title="齐国"></a>
                    </li>
                    <li>
                        <a class="pic" href=""><img src="picture/figure(9).jpg" alt="产品名称" title="楚国"></a>
                    </li>
                    <li>
                        <a class="pic" href=""><img src="picture/figure(19).jpg" alt="产品名称" title="燕国"></a>
                    </li>
                    <li>
                        <a class="pic" href=""><img src="picture/figure(15).jpg" alt="产品名称" title="赵国"></a>
                    </li>
                    <li>
                        <a class="pic" href=""><img src="picture/figure(14).jpg" alt="产品名称" title="韩国"></a>
                    </li>
                    <li>
                        <a class="pic" href=""><img src="picture/figure(42).jpg" alt="产品名称" title="魏国"></a>
                    </li>
                    <li>
                        <a class="pic" href=""><img src="picture/figure(49).jpg" alt="产品名称" title="秦国"></a>
                    </li>
                </ul>
                <ul id="marquee1_2"></ul>
            </div>
        </div>
        <script type="text/javascript">marqueeStart(1, "left");</script>
    </div>
    <!--介绍战国七雄-->
    <div id="zhanguoqixiong">
        <section class="recommend1">
            <h3>战国七雄</h3>
            <div class="recommend-content1">
            <p>战国七雄是中国古代战国时期七个较强的诸侯国的统称。春秋时
                期和战国时期无数次兼并战争使诸侯国的数量从数百减少到数十。
                到战国后期，仅剩下七个实力较强的周天子分封或自立的诸侯国，
                分别为燕、秦、楚、齐（田齐）、韩、赵、魏，合称为“战国七雄”
                    。常与春秋五霸并称。
            </p>
            <p>在这七雄之中，以秦中后期国力最强，齐国在战国中期崛起，并一度与
                秦国并列为东西二帝，韩最弱小，魏都大梁最壮观，赵国多名将，燕
                与中原来往甚少，楚国领土广阔。除秦国以外，其余六国均在崤山以东
                。因此该六国又称“山东六国”。前230年，秦灭韩，开启了统一六国的序
                幕。燕太子丹谋刺秦王政失败导致身死国灭后，公元前221年，秦军围临
                淄灭齐，结束战国群雄割据。
            </p>
        </div>
            <div class="cartmore"><a class="cart" href="zhanguoqixiong.html">进入世界</a>
                </div>
        </section>
    </div>

    <!--连环滚动诸子百家-->
    <div class="container">
        <!--最下面轮播画面-->
        <div id="demow" class="zhuzibaijia_gundong" style="overflow:hidden;height:150px; width:1000px; margin-left:0px;">
            <table width="1000" border="0" align="left" cellpadding="0" cellspacing="0">
                <tr><td width="1000" height="146" id="demow1"><table width="99%" height="127" border="0" cellpadding="0" cellspacing="0">
                <tr><td width="160" align="center" valign="top"><table width="160" border="0" cellpadding="0" cellspacing="1" bgcolor="#EAEAEA">
                <tr><td align="center" bgcolor="cyan"><table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
                 <tr><td align="center"><a href="javascript:;" tppabs="http://www.yangpanfz.com/equ01.asp?id=51" title="儒家">
     <img src="picture/q_1.jpg" tppabs="http://www.yangpanfz.com/UploadFile/s11.jpg" alt="样品展示" width="240" height="200" border="0"></a>
<!--儒家-->
                                    </td>
                                </tr>
                                </table>

                                <table width="160" height="10" border="0" align="center" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td width="160" height="23" align="center">
<!--                                        <a href="equ01.asp-id=51.htm" tppabs="http://www.yangpanfz.com/equ01.asp?id=51" class="yy" title="样品展示">儒家</a>-->
                                            <p id="title3"><strong>儒家</strong></p>
                                    </td></tr>
                                </table>

                            </td></tr></table>


                        </td><td>&nbsp;</td><td width="160" align="center" valign="top">

                            <table width="160" border="0" cellpadding="0" cellspacing="1" bgcolor="#00578a"><tr><td align="center" bgcolor="cyan">
                                <table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
                                    <tr><td align="center"><a href="javascript:;" tppabs="http://www.yangpanfz.com/equ01.asp?id=50" title="样品展示">
      <img src="picture/q_2.jpg" tppabs="http://www.yangpanfz.com/UploadFile/s10.jpg" alt="样品展示" width="240" height="200" border="0"></a></td></tr></table>
<!--墨家-->
                                <table width="160" height="10" border="0" align="center" cellpadding="0" cellspacing="0"><tr>
                                    <td width="160" height="23" align="center">                                            <p id="title3"><strong>墨家</strong></p>
                                    </td>
                                </tr></table>
                            </td>
                            </tr></table>
                        </td><td>&nbsp;</td><td width="160" align="center" valign="top">
                            <table width="160" border="0" cellpadding="0" cellspacing="1" bgcolor="#EAEAEA"><tr><td align="center" bgcolor="cyan">
                                <table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
                                    <tr><td align="center"><a href="javascript:;" tppabs="http://www.yangpanfz.com/equ01.asp?id=49" title="设备展示">
      <img src="picture/q_3.jpg" tppabs="http://www.yangpanfz.com/UploadFile/s9.jpg" alt="设备展示" width="240" height="200" border="0"></a></td></tr></table>
<!--阴阳家-->
                                <table width="160" height="10" border="0" align="center" cellpadding="0" cellspacing="0"><tr>
                                    <td width="160" height="23" align="center">                                            <p id="title3"><strong>阴阳家</strong></p>
                                    </td>
                                </tr></table>
                            </td>
                            </tr></table>
                        </td><td>&nbsp;</td><td width="160" align="center" valign="top">
                            <table width="160" border="0" cellpadding="0" cellspacing="1" bgcolor="#EAEAEA"><tr><td align="center" bgcolor="cyan">
                                <table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
                                    <tr><td align="center"><a href="javascript:;" tppabs="http://www.yangpanfz.com/equ01.asp?id=48" title="设备展示">
     <img src="picture/q_4.jpg" tppabs="http://www.yangpanfz.com/UploadFile/s8.jpg" alt="设备展示" width="240" height="200" border="0"></a></td></tr></table>
<!--兵家-->
                                <table width="160" height="10" border="0" align="center" cellpadding="0" cellspacing="0"><tr>
                                    <td width="160" height="23" align="center">                                            <p id="title3"><strong>兵家</strong></p>
                                    </td>
                                </tr></table>
                            </td>
                            </tr></table>
                        </td><td>&nbsp;</td><td width="160" align="center" valign="top">
                            <table width="160" border="0" cellpadding="0" cellspacing="1" bgcolor="#EAEAEA"><tr><td align="center" bgcolor="cyan">
                                <table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
                                    <tr><td align="center"><a href="javascript:;" tppabs="http://www.yangpanfz.com/equ01.asp?id=47" title="设备展示">
    <img src="picture/q_5.jpg" tppabs="http://www.yangpanfz.com/UploadFile/s7.jpg" alt="设备展示" width="240" height="200" border="0"></a></td></tr></table>
<!--道家-->
                                <table width="160" height="10" border="0" align="center" cellpadding="0" cellspacing="0"><tr>
                                    <td width="160" height="23" align="center">                                            <p id="title3"><strong>道家</strong></p>
                                    </td>
                                </tr></table>
                            </td>
                            </tr></table>
                        </td><td>&nbsp;</td><td width="160" align="center" valign="top">
                            <table width="160" border="0" cellpadding="0" cellspacing="1" bgcolor="#EAEAEA"><tr><td align="center" bgcolor="cyan">
                                <table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
                                    <tr><td align="center"><a href="javascript:;" tppabs="http://www.yangpanfz.com/equ01.asp?id=46" title="设备展示">
     <img src="picture/q_6.jpg" tppabs="http://www.yangpanfz.com/UploadFile/s6.jpg" alt="设备展示" width="240" height="200" border="0"></a></td></tr></table>
<!--纵横家-->
                                <table width="160" height="10" border="0" align="center" cellpadding="0" cellspacing="0"><tr>
                                    <td width="160" height="23" align="center">                                            <p id="title3"><strong>纵横家</strong></p>
                                    </td>
                                </tr></table>
                            </td>
                            </tr></table>
                        </td><td>&nbsp;</td><td width="160" align="center" valign="top">
                            <table width="160" border="0" cellpadding="0" cellspacing="1" bgcolor="#EAEAEA"><tr><td align="center" bgcolor="cyan">
                                <table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
                                    <tr><td align="center"><a href="javascript:;" tppabs="http://www.yangpanfz.com/equ01.asp?id=45" title="设备展示">
    <img src="picture/q_7.jpg" tppabs="http://www.yangpanfz.com/UploadFile/s5.jpg" alt="设备展示" width="240" height="200" border="0"></a></td></tr></table>
<!--法家-->
                                <table width="160" height="10" border="0" align="center" cellpadding="0" cellspacing="0"><tr>
                                    <td width="160" height="23" align="center">                                            <p id="title3"><strong>法家</strong></p>
                                    </td>
                                </tr></table>
                            </td>
                            </tr></table>
                        </td><td>&nbsp;</td><td width="160" align="center" valign="top">
                            <table width="160" border="0" cellpadding="0" cellspacing="1" bgcolor="#EAEAEA"><tr><td align="center" bgcolor="cyan">
                                <table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
                                    <tr><td align="center"><a href="javascript:;" tppabs="http://www.yangpanfz.com/equ01.asp?id=44" title="设备展示">
    <img src="picture/q_8.jpg" tppabs="http://www.yangpanfz.com/UploadFile/s4.jpg" alt="设备展示" width="240" height="200" border="0"></a></td></tr></table>
<!--农家-->
                                <table width="160" height="10" border="0" align="center" cellpadding="0" cellspacing="0"><tr>
                                    <td width="160" height="23" align="center">                                            <p id="title3"><strong>农家</strong></p>
                                    </td>
                                </tr></table>
                            </td>
                            </tr></table>
                        </td><td>&nbsp;</td><td width="160" align="center" valign="top">
                            <table width="160" border="0" cellpadding="0" cellspacing="1" bgcolor="#EAEAEA"><tr><td align="center" bgcolor="cyan">
                                <table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
                                    <tr><td align="center"><a href="javascript:;" tppabs="http://www.yangpanfz.com/equ01.asp?id=43" title="设备展示">
     <img src="picture/q_9.jpg" tppabs="http://www.yangpanfz.com/UploadFile/s3.jpg" alt="设备展示" width="240" height="200" border="0"></a></td></tr></table>
<!--名家-->
                                <table width="160" height="10" border="0" align="center" cellpadding="0" cellspacing="0"><tr>
                                    <td width="160" height="23" align="center">                                            <p id="title3"><strong>名家</strong></p>
                                    </td>
                                </tr></table>
                            </td>
                            </tr></table>
                        </td><td>&nbsp;</td><td width="160" align="center" valign="top">
                            <table width="160" border="0" cellpadding="0" cellspacing="1" bgcolor="#EAEAEA"><tr><td align="center" bgcolor="cyan">
                                <table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
                                    <tr><td align="center"><a href="javascript:;" tppabs="http://www.yangpanfz.com/equ01.asp?id=42" title="样品展示">
    <img src="picture/q_11.jpg" tppabs="http://www.yangpanfz.com/UploadFile/s2.jpg" alt="样品展示" width="240" height="200" border="0"></a></td></tr></table>
                                <table width="160" height="10" border="0" align="center" cellpadding="0" cellspacing="0"><tr>
                                    <td width="160" height="23" align="center"><p id="title3"><strong>杂家</strong></p></td>
                                </tr></table>
                            </td>
                            </tr></table>
                        </td><td>&nbsp;</td><td width="160" align="center" valign="top">
                            <table width="160" border="0" cellpadding="0" cellspacing="1" bgcolor="#EAEAEA"><tr><td align="center" bgcolor="cyan">
                                <table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
                                    <tr><td align="center"><a href="javascript:;" tppabs="http://www.yangpanfz.com/equ01.asp?id=41" title="样品展示">
    <img src="picture/q_10.jpg" tppabs="http://www.yangpanfz.com/UploadFile/s1.jpg" alt="样品展示" width="240" height="200" border="0"></a></td></tr></table>
<!--医家-->
                                <table width="160" height="10" border="0" align="center" cellpadding="0" cellspacing="0"><tr>
                                    <td width="160" height="23" align="center">                                            <p id="title3"><strong>医家</strong></p>
                                    </td>
                                </tr></table>
                            </td>
                            </tr></table>
                        </td><td>&nbsp;</td>
                        </tr>
                        </table></td>
                    <td width="1" id="demow2"></td>
                </tr>
            </table>
        </div>
        <script>
            var speedw=20
            demow2.innerHTML=demow1.innerHTML
            function Marqueew(){
                if(demow2.offsetWidth-demow.scrollLeft<=0)
                    demow.scrollLeft-=demow1.offsetWidth
                else{
                    demow.scrollLeft++
                }
            }
            var MyMarw=setInterval(Marqueew,speedw)
            demow.onmouseover=function() {clearInterval(MyMarw)}
            demow.onmouseout=function() {MyMarw=setInterval(Marqueew,speedw)}
        </script>
    </div>
    <!--介绍诸子百家-->
    <div id="zhuzibaijia">
        <section class="recommend1">
            <h3>诸子百家</h3>
            <div class="recommend-content1">
                <p>诸子百家，是对先秦时期各学术派别的总称。据《汉书·艺文志》的记
                    载，数得上名字的一共有189家，4324篇著作。其后的《隋书·经籍志》
                    《四库全书总目》等书则记载“诸子百家”实有上千家。但流传较广、影
                    响较大、最为著名的不过几十家而已。归纳而言只有12家被发展成学派。
                </p>
                <p>诸子百家之流传中最为广泛的是法家、道家、墨家、儒家、阴阳家、名家、
                    杂家、农家、小说家、纵横家、兵家、医家。中国在古代创造了灿烂的文
                    化艺术，具有鲜明的特色。中国有五千多年有文字可考的历史，文化典籍极其丰富。
                </p>
                <p>
                    在春秋战国时期，各种思想学术流派的成就，与同期古希腊文明相辉映；以
                    孔子、老子、墨子为代表的三大哲学体系，形成诸子百家争鸣的繁荣局面。几
                    经周折以孔子、孟子为代表的儒家思想在宋朝时期全面上位；同时，程度不同地
                    影响其他少数民族，甚至影响到与中国相邻的国家。
                </p>
            </div>
            <div class="cartmore"><a class="cart" href="zhuzibaijia.html">进入世界</a>
                </div>
        </section>
    </div>
</div>


<!--页脚-->
<div class="rz_bw_nav002_m" id="footer-wrapper">
    <!--页脚导航-->
    <footer class="container">
        <section>
            <a href="">首页</a>
            <a href="tianxingjiuge.html">天行九歌</a>
            <a href="qinshimingyue.html">秦时明月</a>
            <a href="end.html">成王败寇</a>
            <a href="about.html">关于</a>

        </section>
    </footer>
</div>

<!--版权标志-->
<section id="copyright" class="container">
    Copyright (C) 
</section>

</body>
</html>

2.CSS样式代码 🏠

===========================================================================================*/
.container{ width: 1000px;margin: 0 auto;}


*{padding: 0px; margin: 0px;}
#content-wrapper article{width: 660px;display: inline-block;vertical-align: top;margin-right: 10px;}
#content-wrapper aside{width: 300px;display: inline-block;vertical-align: top;}


/*æ ‡é¢˜*/
h2[id^="title"]{
    color:#734633; margin-top: 5px; padding-bottom: 5px;
    background-image:url(http://www.ylcp.shop/files/files/1652955176660/css/images/bullet.png);
    background-repeat:no-repeat;padding-left:30px;
    border-bottom: 1px solid #834524;
}
#title1 {background-position:0 -3px;}
#title2 {background-position:0 -38px;}
#title3 {background-position:0 -68px;}
#title4 {background-position:0 -98px;}
#title5 {background-position:0 -128px;}
#title6 {background-position:0 -155px;}
#title7 {background-position:0 -182px;}
/*æ–‡æœ¬*/

    height:250px;
    /*padding:50px;*/
    /*border:1px solid #000;*/
    border:none;
    position: relative;
    margin:0px auto;
}
#tianxia img{
    width: 700px;
    height: 250px;
}
/*å›¾ç‰‡åˆ‡æ¢==========================================================================================================*/
/*ç§¦æ—¶æ˜Žæœˆã€å¤©è¡Œä¹æŒå›¾ç‰‡åˆ‡æ¢*/
#banner h3, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}
/*ä¸»å®¹å™¨*/
#banner {
    width: 750px;
    /*å’Œä¸‹é¢divå†…å®¹çš„é«˜åº¦*/
    height: 360px;
    /*margin-left: 280px;*/
    /*margin-top: 10px;*/
    position: relative;
    cursor: pointer;
    /*è¿™æ˜¯å±…ä¸çš„å‘½ä»¤*/
    margin:0px auto;
}
/*é»‘æ¡†*/
.dd{
    width:650px;
    height:290px;
    /*padding:10px;*/
    border:1px solid cyan;
    margin:0 auto;
    position: relative;left: 50px;right: 50px;
}
/*å›¾ç‰‡å’Œæ–‡å—ä¹‹é—´çš„ç©ºç™½è·ç¦»*/
#imgList {
    width: 820px;
    height: 300px;
    overflow: hidden;
}

#imgList li {
    position: absolute;
    top: 0;
    left: 0;

}
#imgList li img {
    /* display: none; */
    opacity: 0;
    width: 650px ;
    height:290px;
    margin: 0 auto;
    vertical-align:middle;
}
/*ä¸‹é¢çš„æ»šåŠ¨æ–‡å—*/
#dots li {
    width: 125px;
    height: 30px;
    text-align: center;
    /*line-height: 40px;*/
    float: left;
    margin-right: 0px;
    background: #F5D56C;
}
/*å·¦è¾¹çš„ç«–æ¡*/
#back {
    height: 294px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    background: #00578a;
    opacity: 0.1;
}
/*å³è¾¹çš„ç«–æ¡*/
#go {
    height: 294px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    background: #00578a;
    opacity: 0.1;
}
/*ç®å¤´*/
#back span {line-height: 290px;font-size: 40px;}
#go span {line-height: 290px;font-size: 40px;}
.dots li span {font-size: 80px;}
/*å³è¾¹åŽ†å²æ—¶æœŸ===============================================================================================*/
/*å³è¾¹è¾¹æ åŒºå›¾ä¹¦åˆ†ç±»å’Œåˆä½œä¼™ä¼´å†…å®¹æ°´å¹³å‘ˆçŽ°ã€‚*/
.aside-section{width: 180px;display: inline-block;vertical-align: top;margin-right: 5px;}
.aside-section li a {text-decoration:none;color:#000;}
.aside-section a:hover {text-decoration:none;color:#d78849;}
.aside-section ul{margin: 10px 0 10px 20px;}

/*é¡µè„š=======================================================================================================*/
.rz_bw_nav001_m{
    clear:both;
    width:100%;
    height:50px;
    background-color:#00578a;
    margin: 0 auto;
    margin-top: 30px;

}
#footer-wrapper{ background-color:#F5D56C; height: 50px;}
footer section{float: right;}
#copyright{color: #000000;text-align:center;font-size: 1.6em; margin-bottom: 60px}
footer a {display:block;float:left;color:#000000;text-decoration:none;width:100px;text-align:center;line-height: 60px;font-size: 1.6em;}
#copyright a {text-decoration:none;color:#000;}
#copyright a:hover {text-decoration:none;color:#d78849;}

.effect-1 img{vertical-align: middle; width: 290px;}
.text-desc{position: absolute;left: 0px; top:0px;height: 100%; width: 88%;margin-bottom:25px;padding: 10px 10px 10px 18px; opacity: 0; z-index:-1;}
.effect-1{position: relative; overflow: hidden;border: 1px solid rgba(255, 0, 0, 0.3); perspective: 800px;}
.effect-1:hover .image-box{transform: rotateX(75deg);transition: 1s; transform-origin: center bottom;}
.effect-1:hover .text-desc{opacity: 1;transition: 2s;}
.btn{display: inline-block; padding: 2px 10px; font-size: 14px; color: #fff; border: 1px solid #FF0000; background-color: #FF0000; text-decoration: none; transition: 0.4s;}
.btn:hover{background-color: transparent; color: #FF0000; transition: 0.4s;}
/*ç•…é”€å›¾ä¹¦*/
#best-selling li:before{content: counter(listxh);background: #7b5830;padding: 2px 5px;color: #fff;margin-right: 5px;vertical-align: top;}
#best-selling li{
    counter-increment: listxh;display: inline-block;
    width: 100%;vertical-align: bottom;
    overflow: hidden; white-space: nowrap;
    text-overflow: ellipsis;margin-top: 8px;
    transition:text-shadow 1s linear;
    border-bottom:#CCC dashed 1px;
}
#best-selling .curr .p-img{display: inline-block;}
#best-selling .curr .p-name{display: inline-block; vertical-align: top;}
#best-selling .curr .p-name strong{display: block; color:#FF0000; text-align:left; margin-top: 20px; font-size: 1.4em;}
#best-selling .curr .p-name del{font-size: 1.4em;font-weight: 900;}
#best-selling .curr{display: none;}
#best-selling a{color: #000000;text-decoration: none; font-size: 1.6em;}
#best-selling li:hover{text-shadow: 1px 4px 4px #000;}
#best-selling li:hover .selling{display:none;}
#best-selling li:hover .curr{display:inline-block;}

/*Chapter13*/
/*æ°´å¹³å¯¼èˆªèœå•*/
nav ul li{display: inline-block;}
nav ul a{
    display: inline-block;
    line-height: 60px; width: 100px;text-align: center;
    border-right: solid 1px #834524;
    color: #ffffff;text-decoration: none;font-size:1.8em;
    transition:background 0.5s linear;
}
nav ul a:hover{background-color: #834524;}


/*Chapter14*/
/*é¢åŒ…å±‘å¯¼èˆª*/
.crumb-nav{font-size: 1.4em; margin: 5px 0px;}
.crumb-nav a{text-decoration:none;color:#000;font-size: 1em;}
.crumb-nav a:hover, .crumb-nav a:visited{color:#d78849;}
/*ä¹¦ç±åˆ†ç±»é¡µé¢category.html*/
.piclist ul{display: flex; }
.piclist li { text-align: center;margin:10px 5px;}
.piclist li img{width:192px; border-radius: 10px;transition:all 1s ease; border: 1px solid #834524;}
.piclist li:nth-child(3n+1){margin-left: 10px;}
.piclist li:nth-child(3n+3){margin-right: 10px;}
.piclist li:hover img{transform:scale(1.1);}
/*åˆ†é¡µå¯¼èˆª*/
#pagebar {text-align:right; margin-top:10px; margin-right:10px;}
#pagebar a {font-size:1.6em;text-decoration:none;color:#FFF;background-color: #a05c39;display:inline-block;width:25px;height:25px; text-align: center;color: #FFFFFF;transition:all 0.5s ease;padding-top: 3px; }
#pagebar a:hover {z-index:100;opacity:.5;transform:scale(1.1);}
#pagebar .arrow{width: 60px;}

/*ç‰¹åˆŠé™ä»·é¡µé¢specials.html*/
.specials{border-bottom:#CCC dashed 1px;border-top:#CCC dashed 1px;margin: 10px 0px;display: flex;padding: 10px; transition:background-color 1s ease;}
.specials a{display: block;vertical-align:bottom;}
.specials img{width: 160px; height: 160px;}
.specials div h3{text-align: center;}
.specials div strong{color: #FF0000;}

三、个人总结😊

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

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

四、更多干货🚀

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

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

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

IT黑马程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
大二学生JavaScript实训大作业——动漫秦时明月7页期末网页制作 HTML+CSS+JavaScript 网页设计实例企业网站制作

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

扫一扫