web设计（html+css）
这是我大学web基础课程做的结课设计，当时还没学JavaScript所以只用了HTML和CSS来写页面，总的来说无论是选题还是设计我个人比较满意。O(∩_∩)O哈哈~！
本人开了一个小店铺：淘宝搜“小猿的铺子”，有需要的可以联系我
下面是代码部分
html和css我是写在一起的
主页 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>清朝那些事</title><!-- 清朝那些事 -->
<!-- 主页 -->
<style type="text/css">
* {
list-style: none;
padding: 0px;
margin: 0px;
}
#all {
margin: 0px auto;
width: 1300px;
}
#logo {
width: 1300px;
height: 100px;
background-image: url(img/beijing1.jpeg);
border-radius: 5px;
}
#logo img {
width: 90px;
height: 90px;
padding: 5px;
}
#txt {
padding: 5px;
text-align: center;
float: right;
font-family: "楷体";
color: beige;
}
#menu {
height: 50px;
background-color: #CCCBCB;
border-radius: 5px;
}
#menu ul li {
float: left;
line-height: 50px;
}
#menu ul li:hover {
font-size: 1.3em;
transform: skew(15deg);
}
#menu ul li a {
padding-left: 10px;
width: 175px;
text-align: center;
text-decoration: none;
color: black;
font-weight: bold;
display: block;
height: 50px;
}
#menu ul li a:hover {
background-color: chocolate;
}
#information {
background-image: url(img/beijing2.jpeg);
height: 900px;
border-radius: 5px;
}
#information video {
float: right;
width: 500px;
height: 300px;
padding: 30px;
}
#left {
height: 800px;
width: 300px;
margin-top: 30px;
margin-left: 10px;
border: 5px solid #D2691E;
background-image: url(img/beijing1.jpeg);
float: left;
border-radius: 5px;
}
#left h1 {
size: 15px;
font-family: "宋体";
color: goldenrod;
}
#left ul li a {
font-family: "楷体";
text-decoration: none;
text-align: center;
color: burlywood;
font-size: 20px;
width: 200px;
height: 30px;
line-height: 30px;
display: block;
padding: 9px;
}
#left ul li a:hover {
background-color: #DAA520;
color: black;
}
#right {
float: right;
margin-top: 30px;
margin-right: 30px;
width: 900px;
height: 800px;
}
#up {
border: 5px solid brown;
}
#l {
width: 300px;
height: 220px;
padding: 20px;
float: left;
font-family: "楷体";
font-size: 20px;
}
#bottom {
background-color: #333333;
text-align: center;
height: 40px;
color: #FFFFFF;
line-height: 40px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="all">
<div id="logo">
<a href="thelogin.html"><img src="img/清logo.jpeg"></a>
<a href="主页.html"><img src="img/首页图.png"></a>
<div id="txt">
<h1>清朝的那些事</h1>
<h4>--从这里开始,我们走进清朝--</h4>
</div>
</div>
<div id="menu">
<ul>
<li><a href="the1.html">清朝的皇帝们</a></li>
<li><a href="the4.html">清朝的八旗</a></li>
<li><a href="the5.html">清朝的兴衰</a></li>
<li><a href="the6.html">康乾盛世</a></li>
<li><a href="the3.html">清朝的大事件</a></li>
<li><a href="the2.html">清朝的忠臣们</a></li>
<li><a href="the7.html">清朝姓氏（满）</a></li>
</ul>
</div>
<div id="information">
<div id="left">
<h1>清朝的忠臣们</h1>
<hr>
<ul>
<li><a href="people05.html">多尔衮</a></li>
<li><a href="people03.html">鳌拜</a></li>
<li><a href="people01.html">和珅</a></li>
<li><a href="people02.html">年羹尧</a></li>
<li><a href="people06.html">曾国藩</a></li>
<li><a href="people04.html">李鸿章</a></li>
</ul>
<br><br>
<h1>清朝大事件</h1>
<hr>
<ul>
<li><a href="the3.html#thing1"> 清军入关</a></li>
<li><a href="the3.html#thing2">平定三藩</a></li>
<li><a href="the3.html#thing3"> 安南之役</a></li>
<li><a href="the3.html#thing4">白莲教起义</a></li>
<li><a href="the3.html#thing5"> 鸦片战争</a></li>
<li><a href="the3.html#thing6">中日甲午战争</a></li>
</ul>
</div>
<div id="right">
<div id="up">
<img src="img/故宫.jpg">
</div>
<div id="down">
<video src="img/清朝历史.mp4" loop="loop" autoplay="autoplay" controls="controls"></video>
<div id="l">
<h4>简介</h4>
<hr>
清朝（1636年 -1912年），是中国历史上最后一个封建王朝，共传十二帝
，统治者为爱新觉罗氏。从努尔哈赤建立后金起，总计296年。
从皇太极改国号为清起，国祚276年。 从清兵入关，建立全国性政权算起为268年。
<br>
1616年，建州女真首领努尔哈赤建立后金。 1636年，汉满蒙三族共呈劝进表，皇太极称帝，改国号为大清。
</div>
</div>
</div>
</div>
<div id="bottom">
版权所属@：涉事未深的小猿;发现抄袭转载必追究
</div>
</div>
</body>
</html>
登录页thelogin.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 12px arial;
color: #333;
}
body {
background-image: url(img/beijing2.jpeg);
}
a:hover {
color: #FFF;
}
.content2 {
width: 28%;
margin: 300px auto 0;
text-align: center;
}
.content-logo {
width: 80px;
height: 80px;
}
.content-title {
margin: 10px 0 25px 0;
font-size: 30px;
font-style: oblique;
color: #fff;
font-weight: normal;
line-height: 60px;
}
.content-form {
width: 100%;
padding: 30px 0 20px;
border: 5px solid #dedede;
border-radius: 50px;
text-align: center;
background-image: url(img/beijing1.jpeg);
opacity: 0.7
}
.content-form .content3 div {
margin-bottom: 19px;
}
.content-form .content3 .user,
.content-form .content3 .password {
width: 70%;
height: 20px;
padding: 10px;
border: 1px solid #cccbcb;
border-radius: 7px;
letter-spacing: 1px;
}
.content-form .content3 input:focus {
outline: none;
-webkit-box-shadow: 0 0 5px #0dbfdd;
box-shadow: 0 0 5px #0dbfdd;
}
.content-form-signup {
width: 75%;
margin: 0 auto;
padding: 10px;
border: 1px solid #cccbcb;
border-radius: 7px;
font-size: 1em;
font-weight: bold;
color: #000000;
background-color: #D2691E;
cursor: pointer;
}
.content-form-signup:hover {
background: #0cb3d0;
}
.content-form-signup:focus {
outline: none;
border: 1px solid #0cb3d0;
}
.content-login-description {
margin-top: 25px;
line-height: 1.63636364;
color: #747474;
font-size: .91666667rem;
}
.content-login-link {
font-size: 16px;
color: #000000;
background-image: url(img/beijing1.jpeg);
text-decoration: none;
}
</style>
<!-- 点击logo进入此页面 -->
</head>
<body class="body">
<div class="content2">
<div class="content-form">
<h1 class="content-title">welcome to 清朝那点事</h1>
<h4>登录了解更多内容</h4>
<div class="content3">
<div id="change_margin_1">
<input class="user" type="text" name="user" id="uname" placeholder="请输入用户名">
</div>
<div id="change_margin_2">
<input class="password" type="password" id="upass" name="password" placeholder="请输入密码">
</div>
<p id="error_box"></p>
<div id="change_margin_3">
<input class="content-form-signup" type="submit" value="登录" onclick="fnLogin()">
</div>
</div>
<div>
<a class="content-login-link" href="index.html">
跳回去
</a>
</div>
<div>
<a class="content-login-link" href="#">
找回密码
</a>
</div>
</div>
</div>
</body>
</html>
分页因为都差不多所以只发一个 the*.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清朝那些事</title><!-- 清朝的大事件 -->
<style type="text/css">
* {
list-style: none;
padding: 0px;
margin: 0px;
}
#all {
margin: 0px auto;
width: 1300px;
}
#logo {
width: 1300px;
height: 100px;
background-image: url(img/beijing1.jpeg);
border-radius: 5px;
}
#logo img {
width: 90px;
height: 90px;
padding: 5px;
}
#txt {
padding: 5px;
text-align: center;
float: right;
font-family: "楷体";
color: beige;
}
#menu {
height: 50px;
background-color: #CCCBCB;
border-radius: 5px;
}
#menu ul li {
float: left;
line-height: 50px;
}
#menu ul li:hover {
font-size: 1.3em;
transform: skew(15deg);
}
#menu ul li a {
padding-left: 10px;
width: 175px;
text-align: center;
text-decoration: none;
color: black;
font-weight: bold;
display: block;
height: 50px;
}
#menu ul li a:hover {
background-color: chocolate;
}
.se {
background-color: #D2691E;
font-size: 1.3em;
transform: skew(15deg);
display: block;
}
#information {
background-image: url(img/beijing2.jpeg);
height: 2000px;
border-radius: 5px;
}
#left {
height: 400px;
width: 300px;
margin-top: 30px;
margin-left: 10px;
border: 5px solid #D2691E;
background-image: url(img/beijing1.jpeg);
float: left;
border-radius: 5px;
}
#left h1 {
size: 15px;
font-family: "宋体";
color: goldenrod;
}
#left ul li a {
font-family: "楷体";
text-decoration: none;
text-align: center;
color: burlywood;
font-size: 20px;
width: 200px;
height: 30px;
line-height: 30px;
display: block;
padding: 9px;
}
#left ul li a:hover {
background-color: #DAA520;
color: black;
}
#right {
width: 950px;
margin-top: 30px;
margin-right: 10px;
float: right;
border-left: 3px solid #000000;
}
.things {
width: 930px;
margin: 0px auto;
height: 290px;
border: 0.125rem solid #747474;
border-radius: 9px;
padding-bottom: 20px;
font-size: 15px;
font-family: "宋体";
}
.things img {
width: 300px;
height: 150px;
margin: 5px;
border: 3px solid #D2691E;
}
.things h2 {
width: 120px;
height: 30px;
background-color: #A52A2A;
border-radius: 5px 5px 5px 5px;
font-family: "楷体";
color: #DEB887;
line-height: 30px;
display: block;
}
#bottom {
background-color: #333333;
text-align: center;
height: 40px;
color: #FFFFFF;
line-height: 40px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="all">
<div id="logo">
<a href="thelogin.html"><img src="img/清logo.jpeg"></a>
<a href="index.html"><img src="img/首页图.png"></a>
<div id="txt">
<h1>清朝的那些事</h1>
<h4>--从这里开始,我们走进清朝--</h4>
</div>
</div>
<div id="menu">
<ul>
<li><a href="the1.html">清朝的皇帝们</a></li>
<li><a href="the4.html">清朝的八旗</a></li>
<li><a href="the5.html">清朝的兴衰</a></li>
<li><a href="the6.html">康乾盛世</a></li>
<li class="se"><a href="#">清朝的大事件</a></li>
<li><a href="the2.html">清朝的忠臣们</a></li>
<li><a href="the7.html">清朝姓氏（满）</a></li>
</ul>
</div>
<div id="information">
<div id="left">
<h1>清朝大事件</h1>
<hr>
<ul>
<li><a href="#thing1"> 清军入关</a></li>
<li><a href="#thing2">平定三藩</a></li>
<li><a href="#thing3"> 安南之役</a></li>
<li><a href="#thing4">白莲教起义</a></li>
<li><a href="#thing5"> 鸦片战争</a></li>
<li><a href="#thing6">中日甲午战争</a></li>
</ul>
</div>
<div id="right">
<div class="things" id="thing1">
<img src="img/清军入关.jpeg">
<h2>清兵入关</h2>
<hr color="#A52A2A">
顺治元年（崇祯十七年、1644年），李自成经河南、山西顺利的攻入北京，明思宗在煤山自缢而死，
明亡。同年山海关守将吴三桂不愿投降大顺。面对李自成的顺军，吴三桂引清兵入关，于一片石战役击败大顺军。
李自成放弃北京，率军退回陕西。清朝摄政王多尔衮成功迎顺治帝入关，并将首都迁到北京。 [19] 同一时间
，明朝马士英拥护福王在明朝陪都南京称帝，即弘光帝，南明成立。然而弘光朝因为党争与宦官之乱而混乱分裂。
</div>
<div class="things" id="thing2">
<img src="img/平定三藩.jpeg">
<h2>平定三藩</h2>
<hr color="#A52A2A">
康熙帝于继位之初，三藩势力如吴三桂、耿精忠与尚之信等涵盖全国之半，他们先后请求撤藩以试探清廷。
当时部分大臣担忧三藩叛变而反对，最后孝庄太皇太后与康熙帝无惧三藩而同意撤除。这使得三藩与陕西王辅臣、
广西孙延龄与台湾明郑的郑经联合发动三藩之乱。在这九年期间，反清势力遍及华中、华南，吴三桂更于后期称帝建国周。
然而清兵采取积极防御，进军陕西、江西以切割叛军。加上吴三桂没有积极北伐，
反清联军因占领地与吴三桂过度干涉而发生纠纷，最后王辅臣、耿继忠与尚之信先后投降，占领福建沿岸的郑经被击败。
康熙二十二年（1683年）清兵攻入云南，继承吴三桂之位的吴世璠在昆明自杀，三藩之乱平定。
</div>
<div class="things" id="thing3">
<img src="img/安南之役.jpeg">
<h2>安南之役</h2>
<hr color="#A52A2A">
安南之役是指乾隆末年（1788年末－1789年初），中国清朝与安南（今越南）西山朝之间发生的一场战争，又称清越战争。
乾隆五十三年（1788年）农历十月二十八日，两广总督孙士毅奉命带兵出镇南关，用兵安南，不到一个月，攻陷其国都黎城。
至乾隆五十四年（1789年）正月初，清军兵败而归，前后仅两月余。最终阮惠主动向清朝请和，
乾隆帝同意讲和并承认了阮惠为安南的新君主。此役，是清朝前期的历史上，中国与安南发生过唯一的一次战争。
此役历时虽短，但它是清前期中越关系史上的一件大事。
</div>
<div class="things" id="thing4">
<img src="img/白莲教起义.jpg">
<h2>白莲教起义</h2>
<hr color="#A52A2A">
清嘉庆元年(1796年)至九年(1804年)，湖北、四川、陕西三省，以白莲教为组织形式的农民反抗封建压迫的起义。
1786年人口3亿9110万人，起义失败后，人口为2亿7566万人，相互屠杀损失了1亿1千万人口。
白莲教起义军在历时九年多的战斗中，占据或攻破州县达二百零四个，抗击了清政府从十六个省征调来的大批军队，
歼灭了大量清军，击毙副将以下将弁四百余名，提镇等一﹑二品大员二十余名，
清政府耗费军费二亿两，相当于四年的财政收入。这次起义使清王朝元气大伤，此后清王朝的统治逐渐走向衰落。
</div>
<div class="things" id="thing5">
<img src="img/鸦片战争.jpeg">
<h2>鸦片战争</h2>
<hr color="#A52A2A">
19世纪上半叶，西方各国为使通商正常化，多次派使者前往中国协商 。
然而清政府以天朝上国自居，不愿与西方各国平起平坐，屡次不了了之。
当时大英帝国对中国茶叶与丝绸的需求庞大，对华贸易成逆差状态。
为此，英国将成瘾剂鸦片大量输入中国以改善本身经济。
道光十八年（1838年）鸦片猛增到四万零二百箱，人民健康被削弱，
清朝经济发生通货膨胀，国力也持续衰退。道光帝为解决此弊端，
派林则徐到贸易中心广州宣布禁烟，此即虎门销烟。
</div>
<div class="things" id="thing6">
<img src="img/中日甲午战争.jpeg">
<h2>甲午中日战争</h2>
<hr color="#A52A2A">
日本在明治维新后国力大增，同治十一年（1872年）
日本强迫清朝藩国琉球改属日本，清朝拒不承认，中日交恶。
光绪二十年（1894年）为朝鲜主权清朝和日本发生甲午战争，
两个推行西化运动的亚洲国家的战争最后以清兵落败而告终。
战后签订《马关条约》，清朝割让台湾和澎湖，失去藩属国朝鲜和租界。
洋务派李鸿章建立的北洋舰队全面瓦解，也宣告自强运动最终失败。
</div>
</div>
</div>
<div id="bottom">
版权所属@：涉事未深的小猿;发现抄袭转载必追究
</div>
</div>
</body>
</html>
这个是分页的分页，一些清朝的历史人物 people*.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清朝那些事</title><!-- 清朝的忠臣们01 -->
<style type="text/css">
* {
list-style: none;
padding: 0px;
margin: 0px;
}
#all {
margin: 0px auto;
width: 1300px;
}
#logo {
width: 1300px;
height: 100px;
background-image: url(img/beijing1.jpeg);
border-radius: 5px;
}
#logo img {
width: 90px;
height: 90px;
padding: 5px;
}
#txt {
padding: 5px;
text-align: center;
float: right;
font-family: "楷体";
color: beige;
}
#menu {
height: 50px;
background-color: #CCCBCB;
border-radius: 5px;
}
#menu ul li {
float: left;
line-height: 50px;
}
#menu ul li:hover {
font-size: 1.3em;
transform: skew(15deg);
}
#menu ul li a {
padding-left: 10px;
width: 175px;
text-align: center;
text-decoration: none;
color: black;
font-weight: bold;
display: block;
height: 50px;
}
#menu ul li a:hover {
background-color: chocolate;
}
#information {
background-image: url(img/beijing2.jpeg);
height: 900px;
border-radius: 5px;
}
#left {
width: 300px;
height: 800px;
float: left;
margin-top: 30px;
margin-left: 20px;
background-image: url(img/beijing1.jpeg);
font-size: 13px;
color: #DEB887;
font-family: "宋体";
font-weight: bolder;
border: 3px solid #D2691E;
border-radius: 10px;
}
#up img {
width: 250px;
height: 300px;
margin: 10px 25px;
border: 3px solid #333333;
border-radius: 10px;
box-shadow: 10px 10px 10px #000000;
}
#down {
width: 250px;
height: 400px;
padding: 25px;
}
#right {
width: 950px;
height: 800px;
float: right;
margin-top: 30px;
margin-right: 10px;
}
#an {
width: 940px;
height: 450px;
font-size: 17px;
font-family: "新宋体";
font-weight: bolder;
padding: 10px;
}
#an h2 {
width: 150px;
height: 40px;
background-image: url(img/beijing1.jpeg);
text-align: center;
line-height: 40px;
color: #DEB887;
display: block;
border-radius: 10px;
}
#bn {
width: 940px;
height: 300px;
font-size: 15px;
font-family: "新宋体";
font-weight: bolder;
}
#bn h2 {
width: 150px;
height: 40px;
background-image: url(img/beijing1.jpeg);
text-align: center;
line-height: 40px;
color: #DEB887;
display: block;
border-radius: 10px;
}
#shi {
padding: 10px;
border: 5px solid brown;
border-radius: 10px;
}
#bottom {
background-color: #333333;
text-align: center;
height: 40px;
color: #FFFFFF;
line-height: 40px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="all">
<div id="logo">
<a href="thelogin.html"><img src="img/清logo.jpeg"></a>
<a href="index.html"><img src="img/首页图.png"></a>
<div id="txt">
<h1>清朝的那些事</h1>
<h4>--从这里开始,我们走进清朝--</h4>
</div>
</div>
<div id="menu">
<ul>
<li><a href="the1.html">清朝的皇帝们</a></li>
<li><a href="the4.html">清朝的八旗</a></li>
<li><a href="the5.html">清朝的兴衰</a></li>
<li><a href="the6.html">康乾盛世</a></li>
<li><a href="the3.html">清朝的大事件</a></li>
<li><a href="the2.html">清朝的忠臣们</a></li>
<li><a href="the7.html">清朝姓氏（满）</a></li>
</ul>
</div>
<div id="information">
<div id="left">
<div id="up">
<img src="img/年羹尧.jpg">
</div>
<div id="down">
<h2>人物简介</h2>
<hr color="#A52A2A">
<p>
年羹尧（1679年~1726年1月13日），字亮工，号双峰，安徽凤阳府怀远（今安徽省怀远县）人，后改隶汉军镶黄旗，清朝名将。
康熙三十九年（1700年）进士，官至四川总督、川陕总督、抚远大将军，加封太保、一等公。他运筹帷幄，驰骋疆场，曾配合各军平定西藏乱事，率清军平息青海罗卜藏丹津，立下赫赫战功。
雍正二年（1724年）入京，得到雍正帝特殊宠遇，但翌年十二月，风云骤变，被雍正帝削官夺爵，列大罪九十二条，赐令自尽。
</p>
</div>
</div>
<div id="right">
<div id="an">
<h2>人物成就</h2>
<hr color="#A52A2A">
年羹尧也没有辜负康熙帝的厚望，在击败准噶尔部首领策妄阿拉布坦入侵西藏的战争中，为保障清军的后勤供给，再次显示出卓越才干。
康熙五十六年（1717年），策妄阿拉布坦遣其部将策凌敦多布入侵西藏，杀死拉藏汗。四川提督康泰率兵出黄胜关（今四川省松潘县），军中哗变，引军而还。年羹尧遣参将杨尽信抚谕大军，密奏康泰失兵心，不可用，请求亲赴松潘协理军务。上嘉其实心任事，遣都统法喇率兵赴四川助剿。
康熙五十七年（1718年），年羹尧令护军统领温普进驻里塘（今四川省理塘县），增设打箭炉（今四川康定）至里塘驿站，增设四川驻防兵。上嘉年羹尧治事明敏，巡抚无督兵责，特授四川总督，兼管巡抚事，统领军政和民事。
康熙五十八年（1719年），年羹尧以敌情叵测，请赴西藏为备。廷议以松潘诸路军事重要，令羹尧毋率兵出边，檄法喇进师。法喇率副将岳钟琪抚定里塘、巴塘。年羹尧遣知府迟维德招降乍丫、察木多、察哇诸番头目。
<br>
康熙五十九年（1720年），上命平逆将军延信率兵自青海入西藏，授年羹尧定西将军印，自拉里会师，并咨询年羹尧孰可署总督者。年羹尧言一时不得其人，请以将军印畀、护军统领噶尔弼，而移法喇军驻打箭炉，上用其议。巴塘、里塘本云南丽江土府属地，既抚定，云贵总督蒋陈锡请仍隶丽江土知府木兴；羹尧言二地为入藏运粮要路，宜属四川，从之。木兴率兵前来收地，至喇皮，击杀番酋巴桑，年羹尧疏劾。上命逮木兴，囚云南省城。八月，噶尔弼、延信两军先后入西藏，策凌敦多卜败走，西藏平。上谕羹尧护凯旋诸军入边，召法喇还京师。年羹尧不久遣兵抚定里塘属上下牙色、上下雅尼，巴塘属桑阿坝、林卡石诸生番。
康熙六十年（1721年），年羹尧进京入觐，康熙御赐弓矢，并升为川陕总督，成为西陲的重臣要员。这年九月，青海郭罗克（今果洛藏族自治州）地方叛乱，在正面进攻的同时，年羹尧又利用当地部落土司之间的矛盾，辅之以“以番攻番”之策，迅速平定了这场叛乱。次年十一月，抚远大将军、贝子允禵被召回京，年羹尧受命与管理抚远大将军印务的延信共同执掌军务。
雍正帝即位之后，年羹尧更是倍受倚重，和隆科多并称雍正的左膀右臂。隆科多是胤禛的亲娘舅，在胤禛继位前已为他效力多年，二人关系甚为亲密。
</div>
<div id="bn">
<h2>人物轶事</h2>
<div id="shi">
<h3>闻声识贼</h3>
<hr>
年羹尧征战西藏的时候，一天晚上三更时分，忽然听到疾风西来，过了一会儿就安静了。年羹尧急忙叫某参将率领飞骑三百，往西南密林中搜贼，果然尽歼贼人。有人问其故，年羹尧回答：“一霎而绝，非风也，是飞鸟振羽声也。夜半而鸟出，必有惊之者。此去西南十里，有丛林密树，宿鸟必多，意必贼来潜伏，故群鸟惊起也。”
</div>
</div>
</div>
</div>
<div id="bottom">
版权所属@：涉事未深的小猿;发现抄袭转载必追究
</div>
</div>
</body>
</html>
下面是一些效果图
