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

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>
    
    <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>


<div id="header-wrapper">
    
    <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">

                                            <p id="title3"><strong>儒家strong>p>
                                    td>tr>
                                table>

                            td>tr>table>


                        td><td> 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> 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> 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> 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> 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> 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> 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> 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> 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> 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> 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>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560

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;}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210

三、个人总结😊

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

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

四、更多干货🚀

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

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

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

相关阅读:
Shiro-12-caching 缓存
 4种方法设置Word文档保护
 【Spring源码】9. 重要的ConfigurationClassPostProcessor
全流程机器视觉工程开发（三）任务前瞻 - 从opencv的安装编译说起，到图像增强和分割
 [uni-app] scroll-view中吸顶的简单做法 - overflow-y: auto；
leetcode0207 链表相交
 React_Fragments
深入剖析：HTML页面从用户请求到完整呈现的多阶段加载与渲染全流程详解
 Sharding-JDBC（二）- Sharding-JDBC介绍
 软件测试之TCP、HTTP协议必知必会，面试必备
原文地址：https://blog.csdn.net/stu_365392777/article/details/128092011

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