【大学生期末大作业】HTML+CSS — 诗词网页

末蓝、 2024-04-28 07:41 138阅读 0赞

f3d1f307b613fc4a20a0f51355962fb8.jpeg

贫苦人家的孩子能送哪去？同样是下九流的戏班是最好的选择，至少凭本事吃饭，或还有机会成为受人追捧的角。

54adb699c22545f18d065f4be5fe1d21.png

目录

关于HTML5：

关于CSS：

一、?前言：

二、?网页描述

三、?网站介绍

四、⚙️设计要求：

五、?网站演示

?index.html

?one.html

?two.html

?three.html

五、? 网站代码

?部分代码样例，获取源码请 —> 关 注 ↓公 Z 号 获取更多源码 !

index.html

one.html

two.html

three.html

CSS

六、获取源码

?Summary

获取源码？私信？关注？点赞？收藏？

关于HTML5：

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。

关于CSS：

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

通过使用 CSS 我们可以大大提升网页开发的工作效率！

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一个

一、?前言：

HTML课程期末作业，??学生HTML动态网页基础水平制作，页面排版干净简洁。模仿诗词网页设计风格，精简优化，使用 HTML+CSS 页面布局设计,大学生网页设计课程作业源码，画面精美，排版整洁，内容丰富，主题鲜明，适合初学者、大学生、期末综合作业实践等学习使用, 实例全面，有助于同学的学习，本文将详细介绍如何从头开始设计个人网站并将其转换为代码的过程来实践设计，思路+过程+代码。

一直走在路上?

二、?网页描述

?️HTML综合实践作业，采用 DIV+CSS 布局，包含多个页面，排版整洁，内容丰富，主题鲜明。

首页使用 HTML+CSS 排版 丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。

设置了背景图，头边框，底边框等页面设计

子页面有纯文字页面和图文并茂页面。

? 一套优质的?网页设计应该包含 (具体可根据个人要求而定)

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

三、?网站介绍

?网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

?网站程序方面：计划采用最新的网页编程语言 HTML5+CSS3+JavaScript 程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

?网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

?网站文件方面：网站系统文件种类包含：HTML网页结构文件、CSS网页样式文件、JavaScript网页特效文件、images网页图片文件；

?网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：

  1. ? html 文件包含：其中index.html是首页、其他html为二级页面；
  2. ? css 文件包含：css全部页面样式、文字滚动,、图片放大等

#

四、⚙️设计要求：

（1）网站页面数量不少于4个，文件命名规范，网站结构要求层次清楚，目录结构清晰，代码缩进规整。（4分）

（2）采用HTML结构标记（或div标记）+CSS进行整体布局定位。（5分）

（3）网站首页栏目数量不能少于3个，各栏目要能正确链接到相应栏目子页面，同时各栏目页面也能正确返回到网站首页。（3分）

（4）网站页面标题、图片图标等要符合网站主题。（2分）

（5）网站页面中要有列表。（2分）

（6）网站页面中要含有表单（form）。（3分）

（7）网站内容应具有原创性，内容充实。（7分）

（8）网站整体色系符合视觉习惯，布局合理美观。（4分）

五、?网站演示

?index.html

97164b6154ff4647b438df71c0976c6a.png

?one.html

8a802fb0fe9e4d8f8beed14654f26bb2.png

?two.html

99d4a7fd1a7343afbc6c4c27a9ccfc74.png

?three.html

d56100f5fd5647fbb71902a5c482528e.png

五、? 网站代码

?部分代码样例，获取源码请 —> 关 注 ↓公 Z 号 获取更多源码 !

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1">
  6.         <title>诗词人生</title>
  7.         <style type="text/css">
  8.             .a1{
  9.                         border-width: 20px;
  10.                         border-style: solid;
  11.                         border-color: skyblue;
  12.                     }
  13.         </style>
  14.     </head>
  15.     <body>
  16.         <div id="kkk" align="center">
  17.             <div id="song">
  19.             </div>
  20.             <a href="https://baike.baidu.com/item/%E8%AF%97/6406?fr=aladdin" alt="诗">
  21.                 <img src="图片\图2.jpeg" alt="诗" height="200" width="300">
  22.             </a>
  23.             <hr />
  24.             <div class="a1">
  25.                 <p>
  26.                     <h1>诗词名句</h1>
  27.                 </p>
  28.                 <p>1、醉月频中圣，迷花不事君。——李白《赠孟浩然》</p>
  29.                 <p>2、在天愿作比翼鸟，在地愿为连理枝。——白居易《长恨歌》</p>
  30.                 <p>3、同是天涯沦落人，相逢何必曾相识！——白居易《琵琶行》</p>
  31.                 <p>4、执手相看泪眼，竟无语凝噎。——柳永《雨霖铃》</p>
  32.                 <p>5、庄生晓梦迷蝴蝶，望帝春心托杜鹃。——李商隐《锦瑟》</p>
  33.                 <p>7、暂伴月将影，行乐须及春。——李白《月下独酌四首·其一》</p>
  34.                 <p>8、 云间连下榻，天上接行杯。——李白《与夏十二登岳阳楼》</p>
  35.                 <p>9、天长地久有时尽，此恨绵绵无绝期。——白居易《长恨歌》</p>
  36.                 <p>10、 月既不解饮，影徒随我身。——李白《月下独酌四首·其一》</p>
  37.             </div>
  38.             <hr />
  39.             <div class="a1" align="center">
  40.                 <p>
  41.                     <a href="one.html">
  42.                         <h2>1.诗词简介 </h2>
  43.                     </a>
  44.                 </p>
  45.                 <p>
  46.                     <a href="two.html">
  47.                         <h2>2.诗词名家排行榜</h2>
  48.                     </a>
  49.                 </p>
  50.                 <p>
  51.                     <a href="three.html">
  52.                         <h2>3.诗词赏读</h2>
  53.                     </a>
  54.                 </p>
  55.             </div>
  56.     </body>
  57. </html>

one.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1">
  6.         <title>诗词简介</title>
  7.         <style type="text/css">
  8.             .a2{
  9.                         border-width: 20px;
  10.                         border-style: solid;;
  11.                         text-align: center;
  12.                             border-color: skyblue;
  13.                     }
  14.                     .a1{
  15.                         border-width: 20px;
  16.                         border-style: solid;
  17.                         border-color: skyblue;
  18.                         background-color: orange;
  19.                     }
  20.         </style>
  21.     </head>
  22.     <body>
  23.         <div class="a2" align="center">
  24.             <div id="song">
  25.                 <p>
  26.                     <h1>诗词简介</h1>
  27.                 </p>
  28.             </div>
  29.             <a href="https://baike.baidu.com/item/%E8%AF%97%E8%AF%8D/9166843?fr=aladdin" alt="诗词">
  30.                 <img src="图片\诗.jpeg" alt="诗">
  31.             </a>
  32.             <hr />
  33.             <div class="a1">
  35.                 <p>
  36.                     <h2>诗词起源</h2>
  37.                 </p>
  38.                 <p> 中国最早的诗歌起源于劳动，先民在劳动的过程中，为了降低疲劳，增加劳动的乐趣，在集体劳动的过程中，用歌唱的形式直接孕育了最原始的诗歌。。</p>
  40.                 <p>随着时代的发展，诗歌内容越来越丰富，种类也越来越多，诗人们自然也越来越多，他们或因风格相近，或因时代相同，或因同乡好友，或因父子师生，而各自被归人不同的流派，这些流派、有前有后，有大有小，地位也有高有低。下面从各个时间段对这些诗歌与流派进行划分。</p>
  42.                 <p>中国诗起源于先秦，鼎盛于唐代。中国词起源于隋唐，流行于宋代。中华诗词源自民间，其实是一种草根文学。在21世纪的中国，诗词仍然深受普通大众青睐。</p>
  44.                 <p>诗词是阐述心灵的文学艺术，而诗人、词人则需要掌握成熟的艺术技巧，并按照严格的韵律要求，用凝练的语言、绵密的章法、充沛的情感以及丰富的意象来高度集中地表现社会生活和人类精神世界。</p>
  45.                 <p>
  46.                     <h2>扩展资料</h2>
  47.                 </p>
  48.                 <p>一种以有节奏的、形象生动的语言，高度凝练和集中地反映生活或抒发强烈的感情的文学作品。（诗中有戏剧，戏剧中有诗）诗一定是杰作，再不就是绝无存在价值的东西,诗是会呼吸的思想，会焚烧的字。常说的诗又指《诗经》。《诗》三百，始终于周，《诗》，上通于道德，下止于礼义。中国古代把不合乐的叫“诗”，合乐的叫“歌”。统称为诗歌。按故事情节又分为抒情诗和叙事诗；按语言韵律，分为格律诗和自由诗
  49.                 </p>
  50.             </div>
  51.             <hr />
  52.             <div class="a1" align="center">
  53.                 <p>
  54.                     <a href="index.html">
  55.                         <h2>1.首页 </h2>
  56.                     </a>
  57.                 </p>
  58.                 <p>
  59.                     <a href="two.html">
  60.                         <h2>2.下一页</h2>
  61.                     </a>
  62.                 </p>
  63.             </div>
  64.     </body>
  65. </html>

two.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1">
  6.         <title>诗词名家排行榜</title>
  8.         <style type="text/css">
  9.             .a1{
  10.                         border-width: 20px;
  11.                         border-style: solid;
  12.                         border-color: skyblue;
  13.                     }
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <div class="a1" align="center">
  18.             <img src="图片\图4.jpeg" alt="诗词" heigth="300" width='300'>
  19.             <h1>
  20.                 <table border="1">
  21.                     <tr>
  23.                         <th>名家排行榜</th>
  24.                     </tr>
  25.                     <td>
  26.                         <ol>
  27.                             <li>
  28.                                 <a href="https://baike.baidu.com/item/%E6%9D%8E%E7%99%BD/1043?fr=aladdin">李白</a>
  29.                             </li>
  30.                             <li>
  31.                                 <a href="https://baike.baidu.com/item/%E8%8B%8F%E8%BD%BC/53906?fr=aladdin">苏轼</a>
  32.                             </li>
  33.                             <li>
  34.                                 <a href="https://baike.baidu.com/item/%E6%9D%9C%E7%94%AB/63508?fr=aladdin">杜甫</a>
  35.                             </li>
  36.                             <li>
  37.                                 <a href="https://baike.baidu.com/item/%E7%99%BD%E5%B1%85%E6%98%93/174330?fr=aladdin">白居易</a>
  38.                             </li>
  39.                             <li>
  40.                                 <a href="https://baike.baidu.com/item/%E7%8E%8B%E7%BB%B4/37558?fr=aladdin">王维</a>
  41.                             </li>
  42.                             <li>
  43.                                 <a href="https://baike.baidu.com/item/%E6%9D%8E%E5%95%86%E9%9A%90/74852">李商隐</a>
  44.                             </li>
  45.                             <tr>
  46.                                 <th>诗词排行榜</th>
  47.                             </tr>
  48.                     <td>
  49.                         <ol>
  50.                             <li>
  51.                                 <a href="https://www.shicimingju.com/chaxun/list/25739.html">将进酒</a>
  52.                             </li>
  53.                             <li>
  54.                                 <a href="https://www.shicimingju.com/chaxun/list/35180.html">江城子·乙卯正月二十日夜记梦</a>
  55.                             </li>
  56.                             <li>
  57.                                 <a href="https://baike.baidu.com/item/%E9%9D%99%E5%A4%9C%E6%80%9D/214?fr=aladdin">静夜思</a>
  58.                             </li>
  59.                             <li>
  60.                                 <a href="https://www.shicimingju.com/chaxun/list/3638.html">声声慢·寻寻觅觅</a>
  61.                             </li>
  62.                         </ol>
  63.                     </td>
  64.                     </ol>
  65.                     </td>
  66.                 </table>
  67.         </div>
  68.         </div>
  69.         </div>
  70.         <hr />
  71.         <div class="a1" align="center">
  72.             <p>
  73.                 <a href="index.html">
  74.                     <h2>1.首页 </h2>
  75.                 </a>
  76.             </p>
  77.             <p>
  78.                 <a href="one.html">
  79.                     <h2>2.上一页</h2>
  80.                 </a>
  81.             </p>
  82.             <p>
  83.                 <a href="three.html">
  84.                     <h2>3.下一页</h2>
  85.                 </a>
  86.             </p>
  87.         </div>
  89.     </body>
  90. </html>

three.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>诗词鉴赏</title>
  6.         <link rel="stylesheet" href="css/shi.css">
  7.         <style type="text/css">
  8.             .a1{
  9.                         border-width: 20px;
  10.                         border-style: solid;
  11.                         border-color: skyblue;
  12.                         background-color: orange;
  13.                     }
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <div id="container">
  18.             <div id="header">
  19.                 <div>
  20.                     <h1>诗词鉴赏</h1>
  21.                 </div>
  22.             </div>
  23.             <div id="nav">
  24.                 <p>
  25.                     <h2>
  26.                         <a href="https://www.shicimingju.com/chaxun/list/25739.html" alt="诗词">将进酒·君不见黄河之水天上来</a>
  27.                     </h2>
  28.                 </p>
  29.                 <p>[唐] 李白</p>
  30.                 <p> 君不见，黄河之水天上来，奔流到海不复回。</p>
  31.                 <p> 君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
  32.                 <p> 人生得意须尽欢，莫使金樽空对月。</p>
  33.                 <p> 天生我材必有用，千金散尽还复来。</p>
  34.                 <p>烹羊宰牛且为乐，会须一饮三百杯。</p>
  35.                 <p>岑夫子，丹丘生，将进酒，杯莫停。</p>
  36.                 <p>与君歌一曲，请君为我倾耳听。</p>
  37.                 <p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
  38.                 <p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
  39.                 <p>主人何为言少钱，径须沽取对君酌。</p>
  40.                 <p> 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
  42.                 <p>
  43.                     <h2>【简析】</h2>
  44.                 </p>
  45.                 <p> 《将进酒》属汉乐府《鼓吹曲·铙歌》旧题，内容多写宴饮游乐。诗中表达了对怀才不遇的感叹，又抱着乐观、通达的情怀，也流露了人生几何当及时行乐的消极情绪。但全诗洋溢着豪情逸兴，取得出色的艺术成就。</p>
  46.             </div>
  47.             <div id="main">
  49.                 <p>
  50.                     <h2>
  51.                         <a href="https://www.shicimingju.com/chaxun/list/35180.html" alt="诗词">江城子·乙卯正月二十日夜记梦</a>
  52.                     </h2>
  53.                 </p>
  54.                 <p>[宋] 苏轼</p>
  55.                 <p>十年生死两茫茫，不思量，自难忘。</p>
  56.                 <p>千里孤坟，无处话凄凉。</p>
  57.                 <p>纵使相逢应不识，尘满面，鬓如霜。</p>
  58.                 <p>夜来幽梦忽还乡，小轩窗，正梳妆。</p>
  59.                 <p>相顾无言，惟有泪千行。</p>
  60.                 <p>料得年年肠断处，明月夜，短松冈。</p>
  61.                 <p>
  62.                     <h2> 【简析】</h2>
  63.                 </p>
  64.                 <p>这是苏轼为悼念原配妻子王弗而写的一首悼亡词。表现了绵绵不尽的哀伤和思念。
  65.                     上片写诗人对亡妻的深沉的思念，是写实。下片记述梦境，抒写了诗人对亡妻执着不舍
  66.                     的深情。全词情意缠绵，字字血泪。既写了王弗，又写了诗人自己。词中采用白描手法，
  67.                     出语如话家常，却字字从肺腑镂出，自然而又深刻，平淡中寄寓着真淳。这首词思致委
  68.                     婉，境界层出，情调凄凉哀婉，为脍炙人口的名作</p>
  70.             </div>
  71.             <div id="content">
  72.                 <p>
  73.                     <h2>
  74.                         <a href="https://www.shicimingju.com/chaxun/list/3638.html" alt="诗词">声声慢·寻寻觅觅</a>
  75.                     </h2>
  76.                 </p>
  77.                 <p>[宋] 李清照</p>
  78.                 <p>寻寻觅觅，冷冷清清，凄凄惨惨戚戚。</p>
  79.                 <p>乍暖还寒时候，最难将息。</p>
  80.                 <p>三杯两盏淡酒，怎敌他、晚来风急？</p>
  81.                 <p>雁过也，正伤心，却是旧时相识。</p>
  82.                 <p>满地黄花堆积。憔悴损，如今有谁堪摘？</p>
  83.                 <p>守着窗儿，独自怎生得黑？</p>
  84.                 <p>梧桐更兼细雨，到黄昏、点点滴滴。</p>
  85.                 <p>这次第，怎一个愁字了得！</p>
  86.                 <p>
  87.                     <h2> 【简析】</h2>
  88.                 </p>
  89.                 <p>这是李清照南渡以后的一首震动词坛的名作。通过秋景秋情的描绘，抒发国破家亡、
  90.                     天涯沦落的悲苦，具有时代色彩。在结构上打破了上下片的局限，全词一气贯注，着意
  91.                     渲染愁情，如泣如诉，感人至深。首句连下十四个叠字，形象地抒写了作者的心情。下
  92.                     文“点点滴滴”又前后照应，表现了作者孤独寂寞的忧郁情绪和动荡不安的心境。全词
  93.                     一字一泪，缠绵哀怨，极富艺术感染力</p>
  94.             </div>
  95.             <div id="container">
  96.                 <hr />
  97.                 <div class="a1" align="center">
  98.                     <p>
  99.                         <a href="index.html">
  100.                             <h2>1.首页 </h2>
  101.                         </a>
  102.                     </p>
  103.                     <p>
  104.                         <a href="two.html">
  105.                             <h2>2.上一页</h2>
  106.                         </a>
  107.                     </p>
  108.                 </div>
  109.             </div>
  110.         </div>
  111.     </body>
  112. </html>

CSS

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body{
  6.     font-family:"宋体";
  7.     font-size:25px;
  8.     text-align: center;
  9. }
  10. #container{
  11.     margin: 0 auto;
  12.     width: 900px;
  14. }
  15. #header{
  16.     height: 100px;
  17.     background: skyblue;
  18.     margin-bottom: 10px;    
  19.     border-width: 10px;
  20.     border-style: solid;
  21.     border-color: green;
  22. }
  23. #nav{
  24.     height:600px ;
  25.     background:orange;
  26.     margin-bottom: 10px;
  27.     border-width: 10px;
  28.     border-style: solid;
  29.     border-color:red;
  30. }
  31. #main{
  32.     height:600px;
  33.     margin-bottom: 10px;
  34.     background: skyblue; 
  35.     border-width: 10px;
  36.     border-style: solid;
  37.     border-color: green;
  38. }
  39. #content{
  40.     float: left;
  41.     width: 900px;
  42.     height: 600px;
  43.     background: orange;    
  46. }

六、获取源码

正确的代码文件及路径，见下图：

9f0f63931771471eb75776e16cbbe928.png

第一步，通过微信公众号下载源码压缩包，解压并打开文件夹，即为上图样式；

第二步，可以根据需求自定义背景文字，背景图片；

第三步，点击 index.html 文件打开即可，可添加JavaScript样式等；

以上就是我们此次期末时间大作业的全部内容了，是否精彩呢？如果有好的建议或者想法可以联系我，一起交流?；

#

?Summary

#

上述内容就是此次 【大学生期末大作业】HTML+CSS — 诗词网页 的全部内容了，感谢大家的支持，相信在很多方面存在着不足乃至错误，希望可以得到大家的指正。?(ง •_•)ง

调整自己。不忘来时路，努力前行，找到前进的方向。

2023年第四十二期，希望得到大家的喜欢?

希望大家有好的意见或者建议，欢迎私信，一起加油

以上就是本篇文章的全部内容了

~ 关注我，点赞博文~ 每天带你涨知识!

1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。

2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、HTML模板 、C++、数据结构、Python程序设计、Java程序设计、爬虫等！ 「在这里有好多 开发者，一起探讨 前端 开发 知识，互相学习」！

3.以上内容技术相关问题可以相互学习，可关 注 ↓公 Z 号 获取更多源码 !

获取源码？私信？关注？点赞？收藏？WeChat?

?+✏️+⭐️+?

有需要源码的小伙伴可以 关注下方微信公众号“ Enovo开发工厂 “? 回复“ shicirensheng-1 “

发表评论

表情：
评论列表 （有 0 条评论，138人围观）

还没有评论，来说两句吧...

相关阅读