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

本文链接：https://blog.csdn.net/qq_38517951/article/details/129777816

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

文章目录🌰

一、网页介绍📖
一、网页效果🌌
二、代码展示😈
- 1.HTML代码结构 🧱
- 2.CSS样式代码 🏠
三、个人总结😊
四、更多干货🚀

一、网页介绍📖

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="_blan