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

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

一、网页介绍📖
一、网页效果🌌
二、代码展示😈
- 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++) //将透明度初始化为0opacity[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图片透明度为0clearInterval(loop); //暂停轮播loop以免出现bugnowIndex = 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); //暂停轮播loopnowIndex = 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); //暂停轮播loopconsole.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部，共175集。第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=20demow2.innerHTML=demow1.innerHTMLfunction Marqueew(){if(demow2.offsetWidth-demow.scrollLeft<=0)demow.scrollLeft-=demow1.offsetWidthelse{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;}