大学生HTML练习之古诗文网页制作，因为页面总共为五个，我先分享了首页，下面是做好呈现出来的首页成品图。
其实右下角的绿色图标“返回到顶部”是固定在右下角的，长截图显示出来跑上边去了。
再者，作者对勾隐藏区域那里处理的不是很好，会出现文字重叠的效果，大家仅供参考噢~
这里的 <link href="CSS属性.css" type="text/css" rel="stylesheet">是引入css样式，代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>古诗文网站</title>
<link href="CSS属性.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--daohang begin-->
<div class="toubu">
<ul>
<li>古诗文网</li>
<li>首页</li>
<li><a href="#point one">作者</a></li>
<li><a href="#point two">名句</a></li>
<li><a href="#point three">诗文</a></li>
<li><a href="#point four">古籍</a></li>
</ul>
</div>
<!--daohang end-->
<div class="tupian">
<img src="images/B9.jpg" />
</div>
<div class="search">
<span>搜索诗词</span>
</div>
<!--zuozhe begin-->
<div class="zuozhe">
<div class="div1">
<h1 id="point one">作者</h1>
</div>
<div class="kuang1">
<input type="checkbox" id="btn">
<div id="box">苏轼，（1037年1月8日-1101年8月24日）字子瞻、和仲，号铁冠道人、东坡居士，世称苏东坡、苏仙，汉族，眉州眉山（四川省眉山市）人，祖籍河北栾城，北宋著名文学家、书法家、画家，历史治水名人。</div>
<label for="btn">苏轼</label>
<span>李白</span>
<span>王维</span>
<span>杜甫</span>
<span>白居易</span>
<span>李清照</span>
<span>辛弃疾</span>
<span>李商隐</span>
<span>屈原</span>
<span>陶渊明</span>
<span>陆游</span>
<span>王勃</span>
</div>
</div>
<!--zuozhe end-->
<!--mingju begin-->
<div class="mingju">
<div class="div3">
<h1 id="point two">名句</h1>
<div class="content1">
<table border="2" width="100%" height="400px" valign="middle" >
<tr height="60px" valign="middle">
<th colspan="2"><font size="6">推荐名句</font></th>
</tr>
<tr height="60px" align="center" valign="middle">
<td>此地一为别，孤蓬万里征。——李白《送友人》</td>
</tr>
<tr height="60px" align="center" valign="middle">
<td>寒随一夜去，春逐五更来。——史青《应诏赋得除夜》</td>
</tr>
<tr height="60px" align="center" valign="middle">
<td>松际露微月，清光犹为君。——常建《宿王昌龄隐居》</td>
</tr>
<tr height="60px" align="center" valign="middle">
<td>其进锐者，其退速。——《孟子·尽心章句上·第四十四节》</td>
</tr>
<tr width="100%" height="60px" align="center" valign="middle">
<td>寒雨连江夜入吴，平明送客楚山孤。——王昌龄《芙蓉楼送辛渐》</td>
</tr>
<tr height="60px" align="center" valign="middle">
<td>秋草六朝寒，花雨空坛。更无人处一凭阑。——朱彝尊《卖花声·雨花台》</td>
</tr>
<tr height="60px" align="center" valign="middle">
<td>明月多情应笑我，笑我如今。——纳兰性德《采桑子·明月多情应笑我》</td>
</tr>
<tr height="60px" align="center" valign="middle">
<td>人生愁恨何能免，销魂独我情何限！——李煜《子夜歌·人生愁恨何能免》</td>
</tr>
<tr height="60px" align="center" valign="middle">
<td>南园春半踏青时，风和闻马嘶。——欧阳修《阮郎归·南园春半踏青时》</td>
</tr>
<tr height="60px" align="center" valign="middle">
<td>携手藕花湖上路。一霎黄梅细雨。——朱淑真《清平乐·夏日游湖》</td>
</tr>
<tr height="60px" align="center" valign="middle">
<td>望门投止思张俭，忍死须臾待杜根。——谭嗣同《狱中题壁》</td>
</tr>
<tr height="60px" align="center" valign="middle">
<td>权势之徒，虽至亲亦作威福，岂知烟云过眼，已立见其消亡。——《围炉夜话·第二二则》</td>
</tr>
<tr height="60px" align="center" valign="middle">
<td>君生日日说恩情，君死又随人去了，世人都晓神仙好，只有儿孙忘不了！——曹雪芹《好了歌》</td>
</tr>
</table>
</div>
</div>
</div>
<!--mingju end-->
<!--shiwen begin-->
<div class="shiwen">
<div class="div2">
<h1 id="point three">诗文</h1>
</div>
<div class="kuang2">
<p class="zhonglei">-------------------------------古代散文------------------------------</p>
<!--1-->
<h2>桃花源记</h2>
<p><span>【作者】</span>陶渊明 <span>【朝代】</span>东晋</p>
<dt>【正文】</dt>
<dd class="main">
晋太元<sup>①</sup>中，武陵<sup>②</sup>人捕鱼为业<sup>③</sup>。缘<sup>④</sup>溪行<sup>⑤</sup>，忘路之远近<sup>⑥</sup>。忽逢<sup>⑦</sup>桃花林，夹岸<sup>⑧</sup>数百步，中无杂<sup>⑨</sup>树，芳草鲜美<sup>(10)</sup>，落英缤纷。渔人甚异之，复前行，欲穷其林。<br>
林尽水源，便得一山，山有小口，仿佛若有光。便舍船，从口入。初极狭，才通人。复行数十步，豁然开朗。土地平旷，屋舍俨然，有良田、美池、桑竹之属。阡陌交通，鸡犬相闻。其中往来种作，男女衣着，悉如外人。黄发垂髫，并怡然自乐。<br>
见渔人，乃大惊，问所从来。具答之。便要还家，设酒杀鸡作食。村中闻有此人，咸来问讯。自云先世避秦时乱，率妻子邑人来此绝境，不复出焉，遂与外人间隔。问今是何世，乃不知有汉，无论魏晋。此人一一为具言所闻，皆叹惋。余人各复延至其家，皆出酒食。停数日，辞去。此中人语云：“不足为外人道也。”<br>
既出，得其船，便扶向路，处处志之。及郡下，诣太守，说如此。太守即遣人随其往，寻向所志，遂迷，不复得路。<br>
南阳刘子骥，高尚士也，闻之，欣然规往。未果，寻病终，后遂无问津者。<br>
</dd>
<dt>【注释】</dt>
<dd class="zhushi">
(1)太元：东晋孝武帝的年号（376-397年）。
(2)武陵：郡名，今武陵山区或湖南常德一带。
(3)为业：把……作为职业，以……为生。为，作为。
(4)缘：顺着、沿着。
(5)行：行走这里指划船。
(6)远近：偏义复词，仅指远。
(7)忽逢：忽然遇到。逢，遇见。
(8)夹岸：两岸。
(9)杂：别的，其他的。
(10)鲜美：鲜艳美丽。
</dd>
<dt>【译文】</dt>
<dd class="yiwen">
东晋太元年间，武陵郡有个人以打渔为生。他顺着溪水行船，忘记了路程的远近。忽然遇到一片桃花林，生长在溪水的两岸，长达几百步，中间没有别的树，花草鲜嫩美丽，落花纷纷的散在地上。渔人对此（眼前的景色）感到十分诧异，继续往前行船，想走到林子的尽头。桃林的尽头就是溪水的发源地，于是便出现一座山，山上有个小洞口，洞里仿佛有点光亮。于是他下了船，从洞口进去了。起初洞口很狭窄，仅容一人通过。又走了几十步，突然变得开阔明亮了。（呈现在他眼前的是）一片平坦宽广的土地，一排排整齐的房舍。还有肥沃的田地、美丽的池沼，桑树竹林之类的。田间小路交错相通，鸡鸣狗叫到处可以听到。人们在田野里来来往往耕种劳作，男女的穿戴，跟桃花源以外的世人完全一样。老人和小孩们个个都安适愉快，自得其乐。村里的人看到渔人，感到非常惊讶，问他是从哪儿来的。渔人详细地做了回答。村里有人就邀请他到自己家里去（做客），设酒杀鸡做饭来款待他。村里的人听说来了这么一个人，就都来打听消息。他们自己说他们的祖先为了躲避秦时的战乱，领着妻子儿女和乡邻来到这个与人世隔绝的地方，不再出去，因而跟外面的人断绝了来往。他们问渔人现在是什么朝代，他们竟然不知道有过汉朝，更不必说魏晋两朝了。渔人把自己知道的事一一详尽地告诉了他们，听完以后，他们都感叹惋惜。
</dd>
<!--2-->
<h2>逍遥游</h2>
<p><span>【作者】</span>庄周 <span>【朝代】</span>先秦</p>
<dt>【正文】</dt>
<dd class="main">
北冥<sup>①</sup>有鱼，其名为鲲<sup>②</sup>。鲲之大<sup>③</sup>，不知其<sup>④</sup>几千里也；化而为鸟，其名为鹏<sup>⑤</sup>。鹏之背，不知其几千里也，怒<sup>⑥</sup>而飞，其翼若垂<sup>⑦</sup>天之云。是鸟也，海运<sup>⑧</sup>则将徙<sup>⑨</sup>于南冥。南冥者，天池<sup>(10)</sup>也。《齐谐》者，志怪者也。《谐》之言曰：“鹏之徙于南冥也，水击三千里，抟扶摇而上者九万里，去以六月息者也。”野马也，尘埃也，生物之以息相吹也。天之苍苍，其正色邪？其远而无所至极邪？其视下也，亦若是则已矣。且夫水之积也不厚，则其负大舟也无力。覆杯水于坳堂之上，则芥为之舟；置杯焉则胶，水浅而舟大也。风之积也不厚，则其负大翼也无力。故九万里，则风斯在下矣，而后乃今培风；背负青天而莫之夭阏者，而后乃今将图南。<br>
蜩与学鸠笑之曰：“我决起而飞，抢榆枋而止，时则不至，而控于地而已矣，奚以之九万里而南为？”适莽苍者，三餐而反，腹犹果然；适百里者，宿舂粮，适千里者，三月聚粮。之二虫又何知？(抢榆枋 一作：枪榆枋)<br>
小知不及大知，小年不及大年。奚以知其然也？朝菌不知晦朔，蟪蛄不知春秋，此小年也。楚之南有冥灵者，以五百岁为春，五百岁为秋。上古有大椿者，以八千岁为春，八千岁为秋。此大年也。而彭祖乃今以久特闻，众人匹之。不亦悲乎！<br>
汤之问棘也是已：“穷发之北，有冥海者，天池也。有鱼焉，其广数千里，未有知其修者，其名为鲲。有鸟焉，其名为鹏。背若泰山，翼若垂天之云，抟扶摇羊角而上者九万里，绝云气，负青天，然后图南，且适南冥也。斥鴳笑之曰：‘彼且奚适也？我腾跃而上，不过数仞而下，翱翔蓬蒿之间，此亦飞之至也。而彼且奚适也？’”此小大之辩也。<br>
故夫知效一官，行比一乡，德合一君，而征一国者，其自视也，亦若此矣。而宋荣子犹然笑之。且举世誉之而不加劝，举世非之而不加沮，定乎内外之分，辩乎荣辱之境，斯已矣。彼其于世，未数数然也。虽然，犹有未树也。夫列子御风而行，泠然善也，旬有五日而后反。彼于致福者，未数数然也。此虽免乎行，犹有所待者也。若夫乘天地之正，而御六气之辩，以游无穷者，彼且恶乎待哉？故曰：至人无己，神人无功，圣人无名。——先秦·庄周《逍遥游(节选)<br>
</dd>
<dt>【注释】</dt>
<dd class="zhushi">
(1)北冥：北海。下文“南冥”，指南海。传说北海无边无际，水深而黑。冥：通假“溟”，指海色深黑。
(2)鲲：传说中的大鱼。
(3)之：主谓之间取消句子独立性。
(4)其：指示代词。
(5)鹏：本为古“凤”字，这里指传说中的大鸟。
(6)怒：奋起的样子，这里指鼓起翅膀。
(7)垂：同“陲”，边际。
(8)海运：海水运动。古有“六月海动”之说。海运之时必有大风，因此大鹏可以乘风南行。
(9)徙：迁移。
(10)天池：天然形成的水池。
</dd>
<dt>【译文】</dt>
<dd class="yiwen">
北海里有一条鱼，它的名字叫鲲。鲲非常巨大，不知道有几千里。鲲变化成为鸟，它的名字就叫做鹏。鹏的脊背，也不知道有几千里长；当它振动翅膀奋起直飞的时候，翅膀就好像挂在天边的云彩。这只鸟，大风吹动海水的时候就要迁徙到南方的大海去了。南方的大海是一个天然的大池子。《齐谐》这本书，是记载一些怪异事情的书。书上记载：“鹏往南方的大海迁徙的时候，翅膀拍打水面，能激起三千里的浪涛，环绕着旋风飞上了九万里的高空，凭借着六月的大风离开。”像野马奔腾一样的游气，飘飘扬扬的尘埃，活动着的生物都因为风吹而运动。天的深蓝色，那是它真正的颜色吗？还是太远而没有达到尽头的地方（看不清楚）呢？鹏往下看的时候，看见的应该也是这个样子。如果聚集的水不深，那么它就没有负载一艘大船的力量了。在堂前低洼的地方倒上一杯水，一棵小草就能被当作是一艘船，放一个杯子在上面就会被粘住，这是水浅而船却大的原因。如果聚集的风不够强大的话，那么负载一个巨大的翅膀也就没有力量了。因此，鹏在九万里的高空飞行，风就在它的身下了，凭借着风力，背负着青天毫无阻挡，然后才开始朝南飞。<br>
蝉和小斑鸠讥笑鹏说：“我们奋力而飞，碰到榆树和檀树就停止，有时飞不上去，落在地上就是了。何必要飞九万里到南海去呢？”到近郊去的人，只带当天吃的三餐粮食，回来肚子还是饱饱的；到百里外的人，要用一整夜时间舂米准备干粮；到千里外的人，要提前三个月来准备粮食。蝉和小斑鸠这两只小虫、鸟又知道什么呢？<br>
小智比不上大智，短命比不上长寿。怎么知道是这样的呢？朝生暮死的菌草不知道黑夜与黎明。春生夏死夏生秋死的寒蝉，不知道一年的时光，这就是短命。楚国的南方有一种大树叫做冥灵，它把五百年当作一个春季，五百年当作一个秋季。上古时代有一种树叫做大椿，它把八千年当作一个春季，八千年当作一个秋季，这就是长寿。可是活了七百来岁的彭祖如今还因长寿而特别闻名，一般人谈到长寿，就举出彭祖来相比，岂不可悲！<br>
</dd>
<p class="zhonglei">-------------------------------古代诗歌------------------------------</p>
<!--3-->
<dl>
<h2>关雎</h2>
<p><span>【作者】</span>无名氏 <span>【朝代】</span>先秦</p>
<dt>【正文】</dt>
<dd class="main poet">
关关<sup>①</sup>雎鸠，在河之洲<sup>②</sup>。<br>
窈窕<sup>③</sup>淑女，君子好逑<sup>④</sup>。<br>
参差<sup>⑤</sup>荇菜，左右流之<sup>⑥</sup>。<br>
窈窕淑女，寤寐<sup>⑦</sup>求之。<br>
求之不得，寤寐思服<sup>⑧</sup>。<br>
悠哉悠哉<sup>⑨</sup>，辗转反侧<sup>(10)</sup>。<br>
窈窕淑女，琴瑟友之<sup>(11)</sup>。<br>
参差荇菜，左右芼<sup>(12)</sup>之。<br>
窈窕淑女，钟鼓乐之<sup>(13)</sup>。<br>
</dd>
<dt>【注释】</dt>
<dd class="zhushi">
⑴关关：象声词，雌雄二鸟相互应和的叫声。雎鸠（jūjiū）：一种水鸟名，一般认为就是鱼鹰，传说它们雌雄形影不离。即王鴡。
⑵洲：水中的陆地。
⑶窈窕（yǎotiǎo）淑女：贤良美好的女子。窈窕，身材体态美好的样子。窈，深邃，喻女子心灵美；窕，幽美，喻女子仪表美。淑，好，善良。
⑷好逑（hǎoqiú）：好的配偶。逑，“仇”的假借字，匹配。
⑸参差：长短不齐的样子。荇（xìng）菜：一种可食的水草。圆叶细茎，根生水底，叶浮在水面，可供食用。
⑹左右流之：时而向左、时而向右地择取荇菜。这里是以勉力求取荇菜，隐喻“君子”努力追求“淑女”。流，义同“求”，这里指摘取。之：指荇菜。
⑺寤寐（wùmèi）：醒和睡。指日夜。寤，醒觉。寐，入睡。又，马瑞辰《毛传笺注通释》说：“寤寐，犹梦寐。”也可通。
⑻思服：思念。服，想。《毛传》：“服，思之也。”
⑼悠哉（yōuzāi）悠哉：意为“悠悠”，就是长。这句是说思念绵绵不断。悠，感思。见《尔雅·释诂》郭璞注。哉，语气助词。悠哉悠哉，犹言“想念呀，想念呀”。
⑽辗转反侧：翻覆不能入眠。辗，古字作展。展转，即反侧。反侧，犹翻覆。
⑾琴瑟友之：弹琴鼓瑟来亲近她。琴、瑟，皆弦乐器。琴五或七弦，瑟二十五或五十弦。友：用作动词，此处有亲近之意。这句说，用琴瑟来亲近“淑女”。
⑿芼（mào）：择取，挑选。
⒀钟鼓乐之：用钟奏乐来使她快乐。乐，使动用法，使……快乐。
</dd>
<dt>【译文】</dt>
<dd class="yiwen">
关关和鸣的雎鸠，相伴在河中的小洲。那美丽贤淑的女子，是君子的好配偶。参差不齐的荇菜，从左到右去捞它。那美丽贤淑的女子，醒来睡去都想追求她。追求却没法得到，白天黑夜便总思念她。长长的思念哟，叫人翻来覆去难睡下。参差不齐的荇菜，从左到右去采它。那美丽贤淑的女子，奏起琴瑟来亲近她。参差不齐的荇菜，从左到右去拔它。那美丽贤淑的女子，敲起钟鼓来取悦她。
</dd>
</dl>
<!--4-->
<dl>
<h2>绸缪</h2>
<p><span>【作者】</span>诗经·国风·唐风 <span>【朝代】</span>先秦</p>
<dt>【正文】</dt>
<dd class="main poet">
绸缪<sup>①</sup>束薪<sup>②</sup>，三星<sup>③</sup>在天。今夕何夕，见此良人？子兮<sup>④</sup>子兮，如此良人<sup>⑤</sup>何？<br>
绸缪束刍<sup>⑥</sup>，三星在隅<sup>⑦</sup>。今夕何夕，见此邂逅<sup>⑧</sup>？子兮子兮，如此邂逅何？<br>
绸缪束楚<sup>⑨</sup>，三星在户。今夕何夕，见此粲<sup>(10)</sup>者？子兮子兮，如此粲者何？<br>
</dd>
<dt>【注释】</dt>
<dd class="zhushi">
(1)绸缪：缠绕，捆束。犹缠绵也。
(2)束薪：喻夫妇同心，情意缠绵，后成为婚姻礼。薪：《诗经》中大部分关于男女婚事常言及“薪”，如《汉广》“翘翘错薪”，《南山》“析薪如之何”。
(3)三星：即参星，主要由三颗星组成。
(4)子兮：你呀。
(5)良人：丈夫，指新郎。
(6)刍：喂牲口的青草。
(7)隅：指东南角。
(8)邂逅：即解媾，解，悦也。原意男女和合爱悦，这里指志趣相投的人。
(9)楚：荆条。
(10)粲：漂亮的人，指新娘。
</dd>
<dt>【译文】</dt>
<dd class="yiwen">
一把柴火扎得紧，天上三星亮晶晶。今夜究竟是什么夜晚？见这好人真欢欣。要问你啊要问你，将这好人怎样亲？
一捆牧草扎得多，东南三星正闪烁。今夜究竟是什么夜晚？遇这良辰真快活。要问你啊要问你，拿这良辰怎么过？
一束荆条紧紧捆，天边三星照在门。今夜究竟是什么夜晚？见这美人真兴奋。要问你啊要问你，将这美人怎样疼？
</dd>
</dl>
<p class="zhonglei">-------------------------------古代诗词------------------------------</p>
<!--5-->
<dl>
<h2>相思</h2>
<p><span>【作者】</span>王维 <span>【朝代】</span>唐</p>
<dt>【正文】</dt>
<dd class="main poet">
红豆<sup>①</sup>生南国，春来发几枝<sup>②</sup>。<br>
愿君多采撷<sup>③</sup>，此物最相思<sup>④</sup>。<br>
</dd>
<dt>【注释】</dt>
<dd class="zhushi">
(1)相思：题一作“相思子”，又作“江上赠李龟年”。
(2)红豆：又名相思子，一种生在江南地区的植物，结出的籽像豌豆而稍扁，呈鲜红色。
“春来”句：一作“秋来发故枝”。
(3)采撷（xié）：采摘。
(4)相思：想念。
</dd>
<dt>【译文】</dt>
<dd class="yiwen">
红豆生长在阳光明媚的南方，每逢春天不知长多少新枝。
希望思念的人儿多多采摘，因为它最能寄托相思之情。
</dd>
</dl>
<!--6-->
<dl>
<h2>浣溪沙·门隔花深梦旧游</h2>
<p><span>【作者】</span>吴文英 <span>【朝代】</span>宋</p>
<dt>【正文】</dt>
<dd class="main poet">
门隔花深<sup>①</sup>梦旧游。夕阳<sup>②</sup>无语燕归愁。玉纤<sup>③</sup>香动小帘钩<sup>④</sup>。<br>
落絮无声春堕泪，行云有影月含羞。东风临夜<sup>⑤</sup>冷于秋。<br>
</dd>
<dt>【注释】</dt>
<dd class="zhushi">
(1)门隔花深：即旧游之地，有“室迩人远”意。梦魂牵绕却比“忆”字更深一层。
(2)夕阳：连“燕”，用刘禹锡“乌衣巷口夕阳斜”诗意。燕子归来，未必知愁；但人既含愁，觉燕亦然。且人有阻隔，而燕没遮拦，与上句连；就上片结构来说，又只似一句插笔。
(3)玉纤：指女子的纤纤玉手。
(4)小帘钩：指女子用手摘下帘钩，放下帘子。
(5)临夜：夜间来临时。
</dd>
<dt>【译文】</dt>
<dd class="yiwen">
我的梦魂总是在旧梦中寻游，梦境中我又来到当年的庭院，深深的花丛把院门遮掩住了。斜阳默默无言地渐渐向西边沉下去，归来的燕子也沉默无言，仿佛带着万般忧愁。一股幽香浮动，她那双带有香味的白皙的纤纤玉指，轻轻地拉开了小小的幕帘。
悠悠的柳絮无声坠落，那是老天爷为人世间的生离死别滴下的行行热泪。月光被浮云轻轻地遮掩住，那是因为含羞而挡住了泪眼，料峭的春风吹拂脸面，凄凉冷清的势头简直就像秋天一样。
</dd>
</dl>
</div>
</div>
<!--shiwen end-->
<!--guji begin-->
<div class="guji">
<div class="div4">
<h1 id="point four">古籍</h1>
<!--1-->
<div class="content3">
<img src="images/E6.jpg" width="90%" height="340px" align="left">
<div class="biaoti">
<h3>孙子兵法</h3>
<div class="ziti">
<p>《孙子兵法》又称《孙武兵法》《吴孙子兵法》《孙子兵书》《孙武兵书》等，是中国现存最早的兵书，也是世界上最早的军事著作，早于克劳塞维茨《战争论》约2300年，被誉为“兵学圣典”。共有六千字左右，一共十三篇。作者为春秋时祖籍齐国乐安的吴国将军孙武。《孙子兵法》是中国古代军事文化遗产中的璀璨瑰宝，优秀传统文化的重要组成部分，是古代军事思想精华的集中体现。</p>
</div>
</div>
</div>
<!--2-->
<div class="content2">
<div class="biaoti">
<h3>论语</h3>
<div class="ziti">
<p>《论语》是儒家学派的经典著作之一，由孔子的弟子及其再传弟子编撰而成。它以语录体和对话文体为主，记录了孔子及其弟子言行，集中体现了孔子的政治主张、伦理思想、道德观念及教育原则等。与《大学》《中庸》《孟子》《诗经》《尚书》《礼记》《易经》《春秋》并称“四书五经”。通行本《论语》共二十篇。</p></div>
</div>
<img src="images/B5.jpg" width="90%" height="300px" align="left">
</div>
<!--3-->
<div class="content4">
<img src="images/B4.jpg" width="90%" height="340px" align="left">
<div class="biaoti">
<h3>史记</h3>
<div class="ziti">
<p>《史记》是由司马迁撰写的中国第一部纪传体通史。记载了上自上古传说中的黄帝时代，下至汉武帝元狩元年间共3000多年的历史（哲学、政治、经济、军事等）。《史记》最初没有固定书名，或称“太史公书”，或称“太史公传”，也省称“太史公”。“史记”本是古代史书通称4从三国时期开始，“史记”由史书的通称逐渐成为“太史公书”的专称。</p>
</div>
</div>
</div>
<!--4-->
<div class="content5">
<div class="biaoti">
<h3>庄子</h3>
<div class="ziti">
<p>《庄子》又名《南华经》，是战国中期庄子及其后学所著道家经文。到了汉代以后，尊庄子为南华真人，因此《庄子》亦称《南华经》。其书与《老子》《周易》合称“三玄”。《庄子》书分内、外、杂篇，原有五十二篇，乃由战国中晚期逐步流传、揉杂、附益，至西汉大致成形，然而当时流传版本，今已失传。目前所传三十三篇，已经郭象整理，篇目章节与汉代亦有不同。内篇大体可代表战国时期庄子思想核心，而外、杂篇发展则纵横百余年，参杂黄老、庄子后学形成复杂的体系。</p></div>
</div>
<img src="images/E7.jpg" width="90%" height="340px" align="left">
</div>
<!--4 end-->
</div>
</div>
<!--guji end-->
<div class="jiewei" style="text-align: center; font-size: 18px; padding-top: 15px; line-height: 40px;">
<p> 欢迎到访WQ制作的古诗文网站！
<br>
© 2023-5-18 By WQ!
</p>
</div>
<div class="totop"><a href="#">返回到顶部</a></div>
</body>
</html>
CSS样式：
@charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background: #EDE7E7;
}
.toubu{
width: 100%;
height: 60px;
line-height: 60px;
background:#943934;
position: sticky;
top: 0px;
z-index: 5;
}
ul{
width: 800px;;
height: 60px;
line-height: 60px;
margin-left: 17%;
}
ul li{
text-align: center;
width: 40px;
height: 60px;
float: left;
color: #eee;
margin-left: 80px;
font-size: 19px;
cursor: pointer;
}
li:first-child{
width: 100px;
font-size: 25px;
font-weight:bold;
}
.tupian img{
width:90%;
height:350px;
text-align: center;
display:block;
margin:0 auto;
}
.search{
width:90%;
height: 50px;
text-indent: 1em;
margin: 0 auto;
line-height: 50px;
border-radius: 15px;
color: #aaa;
font-size: 24px;
background: #fff url("images/f.png") no-repeat 1200px center;
box-shadow: 5px 5px 10px 2px #999 inset;
}
.zuozhe{
width: 100%;
height: 150px;
}
.div1{
width: 90%;
height: 40px;
background-color:#EECFCF;
line-height: 40px;
text-align: left;
font-family: "微软雅黑";
color:#7A3D3F;
margin: 25px auto 0px;
text-indent: 4px;
}
.kuang1{
width: 90%;
height: 150px;
line-height: 80px;
font-size: 25px;
font-family: "微软雅黑";
text-align: left;
margin: 20px auto;
text-indent: 2em;
}
.shiwen{
width: 100%;
height: 5380px;
}
.div2{
width: 90%;
height: 40px;
background-color:#EECFCF;
line-height: 40px;
text-align: left;
font-family: "微软雅黑";
color:#7A3D3F;
margin: 25px auto 0px;
text-indent: 4px;
}
.kuang2{
width: 90%;
height: 200px;
line-height: 80px;
font-size: 25px;
font-family: "微软雅黑";
text-align: left;
margin: 0 auto;
text-indent: 2em;
}
#box {
display: none;
width: 100%;
height: 200px;
padding: 20px;
}
#btn:checked ~ #box {
display: block;
}
.zhonglei{
font-size: 24px;
text-align: center;
font-weight: 700;
font-style: italic;
color: #ff9999;
}
h2{
color: brown;
text-align: center;
}
p{
font-size: 16px;
text-align: center;
font-family: "汉仪";
letter-spacing: 5px;
}
span{
color: grey;
}
dt{
font-weight: 600;
}
dd{
text-indent: 2em;
line-height: 30px;
}
.main{
font-family: "宋体";
font-size: 16px;
font-weight: 600;
}
.zhushi{
font-family: "微软雅黑";
font-size: 14px;
text-indent: 0em;
font-weight: 300;
}
.yiwen{
font-family: "楷体";
font-size: 16px;
text-indent: 2em;
}
.poet{
text-indent: 0em;
text-align: center;
}
.div3{
width: 90%;
height: 40px;
background-color:#EECFCF;
line-height: 40px;
text-align: left;
font-family: "微软雅黑";
color:#7A3D3F;
margin: 25px auto 0px;
text-indent: 4px;
}
.mingju{
width: 100%;
height: 940px;
}
.content1{
width: 100%;
height: 870px;
background: #f0efe2;
margin: 30px auto 20px;
text-align: center;
}
.guji{
width: 100%;
height: 1520px;
}
.div4{
width: 90%;
height: 40px;
background-color:#EECFCF;
line-height: 40px;
text-align: left;
font-family: "微软雅黑";
color:#7A3D3F;
margin: 25px auto 0px;
text-indent: 4px;
}
.content2{
width: 100%;
height: 300px;
background:#ffffdf;
margin: 30px 0px 0px;
text-align:left;
display:flex;
flex-direction:row;
align-items:center;
}
.biaoti{
text-align: left;
font-family: "微软雅黑";
font-size: 23px;
text-indent: 2em;
padding: 10px 15px 10px;
}
.ziti{
text-align: left;
text-indent: 2em;
color:#8d6262;
}
.content3{
width: 100%;
height: 340px;
background:#f4e7d3;
margin: 30px 0px 0px;
text-align:left;
display:flex;
flex-direction:row;
align-items:center;
}
.content4{
width: 100%;
height: 340px;
background:#b6d5e1;
margin: 30px 0px 0px;
text-align:left;
display:flex;
flex-direction:row;
align-items:center;
}
.content5{
width: 100%;
height: 340px;
background:#9ee6cf;
margin: 30px 0px 0px;
text-align:left;
display:flex;
flex-direction:row;
align-items:center;
}
.jiewei{
width: 100%;
height: 100px;
background-color: #ddf5f7;
font-size: 25px;
padding-top: 30px;
}
.totop{
width: 80px;
height: 80px;
position: fixed;
bottom: 5%;
right: 5%;
font-size: 12px;
background: #83b271;
text-align: center;
line-height: 80px;
border-radius: 50%;
}
.totop a{
text-decoration: none;
color:#e8ecf1;
}
内容篇幅有些过多，大家可以慢慢对应看哦。
图片，颜色，布局仅为作者自行设计，大家可以根据自己的喜好自行进行布局配色哈~
