Web大学生网页作业成品——古诗词网页设计与实现(HTML+CSS)(5个页面)

🎉🎉🎉 常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,画面精明,排版整洁,内容丰富,主题鲜明,非常适合初学者学习使用。🎉🎉🎉

文章目录

  • 一、作品介绍 🔥
  • 二、作品演示 ☁️
  • 三、代码目录 🏠
  • 四、网站代码 👿
    • HTML部分代码
  • 五、如何学习网页制作 ❤️
  • 六、源码获取 🏫


一、作品介绍 🔥

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有5个页面

二、作品演示 ☁️

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录 🏠

在这里插入图片描述

四、网站代码 👿

HTML部分代码


<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>古诗词</title><link rel="stylesheet" href="./css/style.css">
</head>
<body><div class="header"><div class="box"><h2>古诗词</h2><ul><li><a href="index.html" class="on">首页</a></li><li><a href="shiwen.html">诗文</a></li><li><a href="mingju.html">名句</a></li><li><a href="shiren.html">诗人</a></li><li><a href="guji.html">古籍</a></li></ul></div></div><div class="banner"><img src="./images/banner.jpg" alt=""></div><div class="main"><div class="box"><h2 class="main_title">今日推荐</h2><div class="tuijian"><div class="tuijian_i"><h4>虞美人</h4><div>作者:李煜</div><p>春花秋月何时了?往事知多少。小楼昨夜又东风,故国不堪回首月明中。</p><p>雕栏玉砌应犹在,只是朱颜改。问君能有几多愁?恰似一江春水向东流。</p></div><div class="tuijian_i"><h4>破阵子·为陈同甫赋壮词以寄之</h4><div>作者:辛弃疾</div><p>醉里挑灯看剑,梦回吹角连营。八百里分麾下炙,五十弦翻塞外声,沙场秋点兵。</p><p>马作的卢飞快,弓如霹雳弦惊。了却君王天下事,赢得生前身后名。可怜白发生!</p></div><div class="tuijian_i"><h4>闻官军收河南河北</h4><div>作者:杜甫</div><p>剑外忽传收蓟北,初闻涕泪满衣裳。却看妻子愁何在,漫卷诗书喜欲狂。</p><p>白日放歌须纵酒,青春作伴好还乡。即从巴峡穿巫峡,便下襄阳向洛阳。</p></div></div><div class="main2"><div class="main2_remen"><h2 class="main_title">热门诗词</h2><div class="remen_i"><h4>水调歌头</h4><div>作者:苏轼</div><p>明月几时有?把酒问青天。不知天上宫阙,今夕是何年。我欲乘风归去,又恐琼楼玉宇,高处不胜寒。起舞弄清影,何似在人间。</p><p>转朱阁,低绮户,照无眠。不应有恨,何事长向别时圆?人有悲欢离合,月有阴晴圆缺,此事古难全。但愿人长久,千里共婵娟。</p></div><div class="remen_i"><h4>天净沙·秋思</h4><div>作者:马致远</div><p>枯藤老树昏鸦,小桥流水人家,古道西风瘦马。夕阳西下,断肠人在天涯。</p></div><div class="remen_i"><h4>游子吟</h4><div>作者:孟郊</div><p>慈母手中线,游子身上衣。临行密密缝,意恐迟迟归。谁言寸草心,报得三春晖。</p></div><div class="remen_i"><h4>望月怀远</h4><div>作者:张九龄</div><p>海上生明月,天涯共此时。情人怨遥夜,竟夕起相思。灭烛怜光满,披衣觉露滋。不堪盈手赠,还寝梦佳期。</p></div><div class="remen_i"><h4>春望</h4><div>作者:杜甫</div><p>国破山河在,城春草木深。感时花溅泪,恨别鸟惊心。烽火连三月,家书抵万金。白头搔更短,浑欲不胜簪。</p></div></div><div class="main2_shiren"><h2 class="main_title">名人推荐</h2><div class="shiren"><div class="shiren_i"><img src="./images/1.jpg" alt=""><div>李白</div></div><div class="shiren_i"><img src="./images/2.jpg" alt=""><div>杜甫</div></div><div class="shiren_i"><img src="./images/3.jpg" alt=""><div>苏轼</div></div><div class="shiren_i"><img src="./images/4.jpg" alt=""><div>白居易</div></div><div class="shiren_i"><img src="./images/5.jpg" alt=""><div>孟浩然</div></div><div class="shiren_i"><img src="./images/6.jpg" alt=""><div>欧阳修</div></div></div></div></div></div></div><div class="footer">©copyright 古诗词网 版权所有</div>
</body>
</html>

五、如何学习网页制作 ❤️

🙋很多刚入门编程的小白学习了基础语法,却不知道语法的用途,不知道如何加深印象,不知道如何提升自己,可以去看一些视频教程,跟着视频一起学习代码,切记一定要自己手动敲一遍代码,不然就算当时看视频学会也会很容易忘记。

六、源码获取 🏫

🥇1、 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁2、看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙3、源码获取公众号,点点下方公众号进行获取吧! 网页搜索编号:E0142
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/11653.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【网络安全 | 漏洞挖掘】隐藏的 DOS 技术

未经许可,不得转载。 文章目录 缺少对图片渲染参数的校验(高度和宽度)服务器根据GET参数获取数据识别从外部资源获取数据的服务缺少对图片渲染参数的校验(高度和宽度) 有时,你可能会上传个人头像或某个产品的图片。在这种情况下,检查渲染页面的行为非常重要,因为该页面…

wsl2更换字体|解决nvim图标无法显示问题

没更换字体前 更换字体后 安装字体 https://www.nerdfonts.com/font-downloads 随便下载一个&#xff0c;我这里下【CascadiaCode】 下载完&#xff0c;进行解压缩&#xff0c;然后选中一个ttf文件&#xff0c;右键安装 配置windows terminal字体 ctrl, ,打开设置界面&…

力扣 LeetCode 59. 螺旋矩阵II

解题思路&#xff1a; 使用左开右闭进行四个边的循环赋值 每次进入新的内圈&#xff0c;需要注意起始位置startx和starty的变化&#xff0c;以及边界n - offset的变化 分奇偶圈&#xff0c;判断为奇数圈后需要为中心点赋一次值 class Solution {public int[][] generateMat…

vue2.0 Cannot read properties of null (reading ‘level‘) level有值但还是报错的话

切到地理划分的时候报错 Cannot read properties of null (reading level) 估计是el-cascader里的数据没刷新之类的导致的 加上key区分一下试试

【STL】带你了解string类

string类 为什么学习string类什么是string标准库中的string类sting类的常用接口构造接口string类对象的容量操作接口string类对象的访问及遍历操作接口string类对象的修改操作string类非成员函数 vs和g下string结构的说明&#xff08;了解即可&#xff09;vs下stirng的结构g下s…

谭滨锴:《唤醒内在的智慧》人生要学会正确看待世界

在这个充满挑战的现实世界中&#xff0c;如何才能获得内心的平静呢&#xff1f;又该如何避免生活中的陷阱和障碍&#xff0c;顺利前行于正确的道路&#xff1f;在追求物质成功的同时&#xff0c;是否还能够实现自我价值&#xff0c;感受到内心的满足与成就感&#xff1f;谭滨锴…

基于Faster-RCNN的水下垃圾检测系统,支持图像、视频和摄像实时检测【python源码、pytorch框架】

更多目标检测和图像分类识别项目可看我主页其他文章 功能演示&#xff1a; 基于Faster-RCNN的水下垃圾检测系统&#xff0c;支持图像、视频和摄像实时检测【python源码、pytorch框架】_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于Faster-RCNN的水下垃圾检测系统…

CSS查缺补漏one

11.6~11.11CSS查缺补漏 一、熟记1.CSS引入方式1&#xff09;外部样式表&#xff08;写在第一个肯定最常用的啦&#xff01;~&#xff09;2&#xff09;内部样式表3&#xff09;行内样式 2.选择器3.重点重点重点来咯&#xff08;混&#xff09;1&#xff09;单行文字垂直居中&am…

Elasticsearch集群和Kibana部署流程

搭建Elasticsearch集群 1. 进入Elasticsearch官网下载页面&#xff0c;下载Elasticsearch 在如下页面选择Elasticsearch版本&#xff0c;点击download按钮&#xff0c;进入下载页面 右键选择自己操作系统对应的版本&#xff0c;复制下载链接 然后通过wget命令下载Elastics…

ARL506-ASEMI汽车专用整流二极管ARL506

编辑&#xff1a;ll ARL506-ASEMI汽车专用整流二极管ARL506 型号&#xff1a;ARL506 品牌&#xff1a;ASEMI 封装&#xff1a;BUTTON 正向电流&#xff1a;50A 反向电压&#xff1a;600V 正向压降&#xff1a;1.08V 引线数量&#xff1a;2 芯片个数&#xff1a;1 芯片…

一文解析离线数据仓库和实时数据仓库!

一、离线数仓是什么&#xff1f; 离线数仓&#xff08;Offline Data Warehouse&#xff09;是一种数据仓库架构&#xff0c;主要用于存储和处理历史的、静态的数据。它是对企业内外部各种数据源的数据进行抽取、清洗、转换、加载&#xff08;ETL&#xff09;后&#xff0c;按照…

java里面使用groovy案例+详解

场景&#xff1a; 最近有一个计算商品运费的&#xff0c;如果商品的数量大于快递公司设置的数量 10 那么超出部分也需要计算额外运费&#xff0c;那么这些计算过程代码我能不能不在java里面写呢&#xff0c;用一种可配置化的方式来根据不同的传参计算出运费&#xff1f; 页面传…

iframe页面嵌套把子页面的modal显示在父页面层级

使用iframe父页面嵌套子页面时&#xff0c;如果子页面有modal&#xff0c;默认modal的包裹范围是在子页面的body上&#xff0c;子页面有多大&#xff0c;modal的包裹就有多大&#xff0c;并且不能fixed&#xff0c;会随着鼠标滚动。 处理方法&#xff1a;将modal的body挂载在页…

18.头文件的用法注意事项

//2.cpp中编写多个方法&#xff0c;方法多了后没法一个个声明&#xff0c;就需要使用头文件 int daguai() {return 1; } int paoshang() {return 1; } int guaji() {return 1; } int jiaxue() {return 1; }右键头文件 新建项 新建头文件 在头文件中声明2.cpp中的方法 #pr…

充电宝哪个牌子好用?2024年充电宝十大品牌排行榜推荐!

充电宝哪个牌子好用&#xff1f;2024年充电宝十大品牌排行榜推荐&#xff01;如今&#xff0c;外出时手机电量耗尽是许多人都会遇到的问题&#xff0c;尤其是在关键时刻&#xff0c;电量不足更是令人焦虑不已。此时&#xff0c;一款性能可靠且耐用的移动电源便成了我们的救命稻…

Python爬虫精准获取京东(JD)商品SKU信息

在数字化时代&#xff0c;数据的价值日益凸显&#xff0c;尤其是对于电商行业来说&#xff0c;精准获取商品信息成为了市场分析、价格比较、库存管理等环节的基石。本文将通过Python爬虫技术&#xff0c;详细解析如何精准获取京东(JD)商品的SKU信息&#xff0c;包括商品详情、价…

漏洞利用exp[banner]

源码 import requestsbanner """________________________________________________/ \\| _________________________________________ || |\033[1;39m _,. \0…

MYSQL视图

由于我们上讲复习了前面的所有知识点&#xff0c;所以今天不再去复习之前的知识了&#xff0c;我们直接开始正题。 1.什么是视图&#xff1f; 视图是⼀个虚拟的表&#xff0c;它是基于⼀个或多个基本表或其他视图的查询结果集。视图本⾝不存储数 据&#xff0c;⽽是通过执⾏查…

【软件设计师中级】2024.11.09软考备考

备考时候的一些笔记&#xff0c;可能会有不对或者个人主观的知识点 文章目录 前言一、计算机内数据的表示1.1 原反补移码1.2 浮点数1.3 校验码1.3.1奇偶校验1.3.2 CRC冗余校验码(理解特点即可)1.3.3 海明校验码 二、 计算机系统组成2.1 冯诺依曼结构2.2 Flynn分类法2.3 指令系统…

springboot生成二维码和条形码

目录 springboot生成二维码和条形码引入依赖生成二维码&#xff0c;在controller层生成条形码controller springboot生成二维码和条形码 引入依赖 <dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version&…