网页设计（二）格式化文本、段落与列表
发布时间：2024年01月17日
一、孔融让梨
【思政素材】
孔融，字文举，东汉时期中国山东曲阜人，是孔子的第二十世孙，是中国古代东汉末文学家。
孔融四岁的时候，和哥哥吃梨，总是拿小的吃。有人问他为什么这么做。他回答说：“小孩子食量小，按道理应该拿小的。”
传统道德故事页面
<!-- prj_2_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>孔融让梨</title>
<style type="text/css">
rt {
width: 56px;
margin: 5px auto;
text-align: center;
}
p {
text-indent: 2em;
font-size: 20px;
}
blockquote {
/* margin: 0 auto; */
text-align: center;
}
</style>
</head>
<body>
<!-- 使用标题字标记 -->
<h1 align="center">
<ruby>
孔<rt>kong</rt>融<rt>rong</rt>让<rt>rang</rt>梨<rt>li</rt>
</ruby>
</h1>
<h3 align="center">中国古代道德教育故事之一--《三字经》中“融四岁，能让梨”</h3>
<hr color="#FF3333">
<!-- 使用段落标记 -->
<p>孔融，字文举，东汉时期中国山东曲阜人，是孔子的第二十世孙，是中国古代东汉末文学家。</p>
<p>孔融四岁的时候，和哥哥吃梨，总是拿小的吃。有人问他为什么这么做。他回答说：“小孩子食量小，按道理应该拿小的。”</p>
<!-- 使用段落缩进标记和字体标记 -->
<blockquote><img src="pro21/image-2-1-1.jpg"></blockquote>
<blockquote>
<font face="黑体" color="#FE2233" size="5">中国千百年来流传的一个道德教育故事，这个故事告诉人们，凡事应该遵守公序良俗。</font>
</blockquote>
<hr color="red" size="3">
<!-- 使用文字修饰标记和特殊符号 -->
<p align="center">
<strong>这些都是年幼时就应该知道的<u>道德常识 </u></strong>。这是中国古代东汉末<em>文学家<big> 孔融© </big></em>的真实故事。
</p>
</body>
</html>
二、故事锦集
文字素材：
中华民族传统美德，是指中国五千年历史流传下来，具有影响、可以继承，并得到不断创新发展，有益于下代的优秀道德遗产。概括起来就是：中华民族优秀的品质、优良的民族精神、崇高的民族气节、高尚的民族情感以及良好的民族习惯的总和。
列表内容如下：
- 【程门立雪】–说的是尊师重教的故事
- 【子路借米】–说的是尊老爱幼的故事
- 【七岁之师】–说的是谦虚礼貌的故事
- 【孔融让梨】–说的是公序良俗的故事
- 【林则徐禁烟】–说的是爱国爱民的故事
- 【铁杵磨成针】–说的是勤学的故事
<!-- prj_2_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中国传统道德故事</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
margin: 0 auto;
text-align: center;
width: 1100px;
}
p,
img {
width: 1100px;
height: 320px;
}
#menu {
width: 1100px;
height: 40px;
background-color: red;
text-align: center;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
display: inline-block;
font-size: 22px;
height: 24px;
padding: 5px 15px;
color: white;
}
h1 {
text-align: center;
height: 60px;
width: 100%;
background-color: #FAFAFB;
padding-top: 20px;
}
blockquote {
text-indent: 2em;
text-align: left;
font-size: 22px;
padding: 10px auto;
}
#item {
width: 1100px;
height: 160px;
margin: 0 auto;
}
#item ul {
text-align: left;
width: 940px;
padding: 10px 80px;
height: 140px;
list-style: disc;
}
#item ul li {
float: left;
width: 430px;
height: 15px;
padding: 10px;
}
</style>
</head>
<body>
<div>
<p><img src="pro22/image-2-2-1.jpg"></p>
<div id="menu">
<ul>
<li>曾子避席</li>
<li>千里送鹅毛</li>
<li>三顾茅庐</li>
<li>车胤囊萤</li>
<li>李士谦乐善好施</li>
</ul>
</div>
<h1>中国传统道德故事锦集</h1>
<blockquote>
中华民族传统美德,是指中国五千年历史流传下来，具有影响、可以继承，并得到不断创新发展，有益于下代的优秀道德遗产。概括起来就是：中华民族优秀的品质、优良的民族精神、崇高的民族气节、高尚的民族情感以及良好的民族习惯的总和。
</blockquote>
<div id="item">
<ul>
<li>【程门立雪】--说的是尊师重教的故事</li>
<li>【子路借米】--说的是尊老爱幼的故事</li>
<li>【七岁之师】--说的是谦虚礼貌的故事</li>
<li>【孔融让梨】--说的是公序良俗的故事</li>
<li>【林则徐禁烟】--说的是爱国爱民的故事</li>
<li>【铁杵磨成针】--说的是勤学的故事</li>
</ul>
<hr color="red">
</div>
</div>
</body>
</html>
三、设计制度宣传展板
1.《大型分析仪器管理办法》效果图
<!-- prj_2_3.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设计制度宣传展板</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
/* 全局声明 */
.div1 {
margin: 0 auto;
width: 610px;
height: 934px;
padding: 20px;
background: url(pro23/image-2-3-bg.jpg) no-repeat center center;
box-shadow: 0 0 15px 15px #F1E2E3;
/* 设置边框阴影15px */
}
h1 {
font-size: 32px;
font-family: 黑体;
height: 52px;
color: blue;
padding-top: 120px;
text-align: center;
text-shadow: 0 0 15px white;
/* 文本阴影15px */
}
ol {
margin: 10px auto;
width: 550px;
line-height: 1.6em;
padding-left: 50px;
}
li {
width: 540px;
font-size: 18px;
letter-spacing: 1px;
}
h3 {
padding-right: 50px;
}
</style>
</head>
<body>
<div class="div1">
<h1 align="center">大型分析仪器管理办法</h1>
<ol type="1" start="1">
<li>大型仪器必须有专人保管，须配有稳压电源，使用前须先检查仪器间各电路连接情况，再开稳压电源，然后再启动仪器开关。</li>
<li>必须严格执行仪器设备运行记录制度，记录仪器运行状况、开关机时间。凡不及时记录者，一经发现，停止使用资格一周。</li>
<li>使用仪器必须熟悉本仪器的性能和操作方法，本科生作毕业论文使用时应有教师在场，熟悉操作使用后必须经有关教师和实验人员同意方可进行独立操作。</li>
<li>仪器使用完毕，必须将各使用器件擦洗干净归还原处，盖上防尘罩，关闭电源，打扫完室内清洁，方可离开。</li>
<li>下次使用者，在开机前，首先检查仪器清洁卫生、仪器是否有损坏，接通电源后，检查是否运转正常。发现问题及时报告管理员，并找上一次使用者问明情况，知情不报者追查当次使用者责任。</li>
<li>若在操作使用期间出现故障，应及时关闭电源，并向有关管理人员报告，严禁擅自处理、拆卸、调整仪器主要部件，凡自行拆卸者一经发现将给予严重处罚。用后切断电源、水源，各种按钮回到原位，并做好清洁工作、锁好门窗。</li>
<li>所有仪器设备的操作手册及技术资料原件一律建档保存，随仪器使用的只能是复印件。</li>
<li>保持仪器清洁，仪器的放置要远离强酸、强碱等腐蚀性物品，远离水源、火源、气源等不安全源。</li>
<li>各仪器要根据其保养、维护要求，进行及时或定期的干燥处理、充电、维护、校验等，确保仪器正常运转。每学期进行一次仪器使用检查，发现有损坏应及时请有关部门维修。</li>
<li>仪器不能随意搬动，更不能借给外单位使用；校内人员经实验室主任批准后可在实验室按上述规定使用。</li>
</ol>
<h3 align="right">大型仪器管理办公室</h3>
</div>
</body>
</html>
2.《大型分析仪器管理办法》初始效果图
<!-- p-19010199-2-3.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
text-align: center;
}
div {
width: 800px;
height: 900px;
margin: 20px;
padding: 20px;
background: url(prj_image2_2.jpg);
text-align: left;
}
h1 {
background-color: #99AA88;
width: 100%;
height: 60px;
padding: 10px;
}
</style>
</head>
<body>
<div class="div1">
<h1 align="center">大型分析仪器管理办法</h1>
<ol type="1" start="1">
<li>大型仪器必须有专人保管，须配有稳压电源，使用前须先检查仪器间各电路连接情况，再开稳压电源，然后再启动仪器开关。</li>
<li>必须严格执行仪器设备运行记录制度，记录仪器运行状况、开关机时间。凡不及时记录者，一经发现，停止使用资格一周。</li>
<li>使用仪器必须熟悉本仪器的性能和操作方法，本科生作毕业论文使用时应有教师在场，熟悉操作使用后必须经有关教师和实验人员同意方可进行独立操作。</li>
<li>仪器使用完毕，必须将各使用器件擦洗干净归还原处，盖上防尘罩，关闭电源，打扫完室内清洁，方可离开。</li>
<li>下次使用者，在开机前，首先检查仪器清洁卫生、仪器是否有损坏，接通电源后，检查是否运转正常。发现问题及时报告管理员，并找上一次使用者问明情况，知情不报者追查当次使用者责任。</li>
<li>若在操作使用期间出现故障，应及时关闭电源，并向有关管理人员报告，严禁擅自处理、拆卸、调整仪器主要部件，凡自行拆卸者一经发现将给予严重处罚。用后切断电源、水源，各种按钮回到原位，并做好清洁工作、锁好门窗。</li>
<li>所有仪器设备的操作手册及技术资料原件一律建档保存，随仪器使用的只能是复印件。</li>
<li>保持仪器清洁，仪器的放置要远离强酸、强碱等腐蚀性物品，远离水源、火源、气源等不安全源。</li>
<li>各仪器要根据其保养、维护要求，进行及时或定期的干燥处理、充电、维护、校验等，确保仪器正常运转。每学期进行一次仪器使用检查，发现有损坏应及时请有关部门维修。</li>
<li>仪器不能随意搬动，更不能借给外单位使用；校内人员经实验室主任批准后可在实验室按上述规定使用。</li>
</ol>
<h3 align="right">大型仪器管理办公室</h3>
</div>
</body>
</html>
所需辅助文字材料如下：
大型仪器必须有专人保管，须配有稳压电源，使用前须先检查仪器间各电路连接情况，再开稳压电源，然后再启动仪器开关。
必须严格执行仪器设备运行记录制度，记录仪器运行状况、开关机时间。凡不及时记录者，一经发现，停止使用资格一周。
使用仪器必须熟悉本仪器的性能和操作方法，本科生作毕业论文使用时应有教师在场，熟悉操作使用后必须经有关教师和实
验人员同意方可进行独立操作。
仪器使用完毕，必须将各使用器件擦洗干净归还原处，盖上防尘罩，关闭电源，打扫完室内清洁，方可离开。
下次使用者，在开机前，首先检查仪器清洁卫生、仪器是否有损坏，接通电源后，检查是否运转正常。发现问题及时报告管
理员，并找上一次使用者问明情况，知情不报者追查当次使用者责任。
若在操作使用期间出现故障，应及时关闭电源，并向有关管理人员报告，严禁擅自处理、拆卸、调整仪器主要部件，凡自行
拆卸者一经发现将给予严重处罚。用后切断电源、水源，各种按钮回到原位，并做好清洁工作、锁好门窗。
所有仪器设备的操作手册及技术资料原件一律建档保存，随仪器使用的只能是复印件。
保持仪器清洁，仪器的放置要远离强酸、强碱等腐蚀性物品，远离水源、火源、气源等不安全源。
各仪器要根据其保养、维护要求，进行及时或定期的干燥处理、充电、维护、校验等，确保仪器正常运转。每学期进行一次
仪器使用检查，发现有损坏应及时请有关部门维修。
仪器不能随意搬动，更不能借给外单位使用；校内人员经实验室主任批准后可在实验室按上述规定使用。
四、社会主义核心价值观
此部分系统判定摄政，没有运行图片望理解
<!-- prj_2_4.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>社会主义核心价值观</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 1060px;
height: 492px;
margin: 0 auto;
padding: 50px;
background: url(pro24/image-2-4-1.jpg) no-repeat center center;
}
h1 {
font-size: 68px;
font-family: "隶书";
text-align: center;
color: red;
line-height: 70px;
}
h2 {
margin: 30px auto;
line-height: 50px;
}
strong {
margin: 8px 20px;
background-color: red;
color: white;
font-size: 32px;
}
dl {
margin: 0 auto;
text-align: center;
}
dt,
dd {
font-family: 隶书;
font-size: 52px;
color: #AF0103;
display: inline;
margin: 0 5px;
text-shadow: 0 0 15px white;
}
</style>
</head>
<body>
<div id="" class="">
<h1>☆社会主义核心价值观☆</h1>
<h2 align="center">
<strong>人民有信仰</strong>
<strong>民族有希望</strong>
<strong>国家有力量</strong>
</h2>
<dl>
<dt>[国家]</dt>
<dd>富强</dd>
<dd>民主</dd>
<dd>文明</dd>
<dd>和谐</dd>
</dl>
<dl>
<dt>[社会]</dt>
<dd>自由</dd>
<dd>平等</dd>
<dd>公正</dd>
<dd>法治</dd>
</dl>
<dl>
<dt>[公民]</dt>
<dd>爱国</dd>
<dd>敬业</dd>
<dd>诚信</dd>
<dd>友善</dd>
</dl>
</div>
</body>
</html>
五、 课外拓展训练
1、社会主义核心价值观24字及其含义解读
所需辅助文字材料如下：
富强、民主、文明、和谐
富强、民主、文明、和谐，是我国社会主义现代化国家的建设目标，也是从价值目标层次对社会主义核心价值观基本理念的凝练，在社会主义核心价值观中居于最高层次，对其他层次的价值观具有统领作用。富强，即国富民强，是社会主义现代化国家经济建设的应然状态，是中华名族梦寐以求的美好夙愿，也是国家繁荣昌盛、人民幸福安康的物质基础。民主是人类社会的美好诉求。我们追求的民主是人民民主，其实质和核心是人民当家作主。他是社会主义现代化国家的重要特征。他是社会主义现代化国家建设的应有状态，是对面向现代化、面向世界、面向未来的，民族的科学的大众的社会主义文化的概括，是实现中华民族伟大复兴的重要支撑。和谐中国传统文化的基本理念，集中体现了学有所教、劳有所得、病有所医、老有所养、住有所居的生动局面。他是社会主义现代化国家在社会建设领域的价值诉求，是经济社会和谐稳定、持续健康发展的重要保证。
自由、平等、公正、法治
自由、平等、公正、法治，是对美好社会的描述，也是从社会层面对社会主义核心价值观基本理念的凝练。它反映了中国特色社会主义的基本属性，是我们党矢志不渝、长期实践的核心价值观念、自由是指人的意志自由、存在和发展的自由，是人类社会的美好向往，也是马克思主义追求的社会价值目标。平等指的是在法律面前一律平等，其价值取向是不断实现实质平等。它要求尊重和保障人权，人人依法享有平等参与、平等发展的权利。公正，即社会公平和正义，它以人的解放、人的自由平等权利的获得为前提，是国家、社会的根本价值理念。法治是治国理政的基本方式，依法治国是社会主义民主政治的基本要求。它通过法制建设来维护和保障公民的根本权利，是实现自由平等、公正正义的制度保证。
爱国、敬业、诚信、友善
爱国敬业诚信友善，是公民基本道德规范，是从个人行为层面对社会主义核心价值观基本理念的凝练。它覆盖了社会主义道德生活的各个领域，是公民必须恪守的基本道德准则，也是评价公民道德行为选择的基本价值标准。爱国是基于每个人对自己祖国依赖关系的深刻情感，也是调节个人与祖国关系的行为准则。它同社会主义紧密结合起来，要求人们以振兴中华为己任，促进民族团结，维护祖国统一，自觉报效祖国。敬业是对公民职业行为准则的价值评价。要求公民忠于职守，克己奉公，服务人民，服务社会，充分体现了社会主义置业精神。诚信即诚实守信，是人类社会千百年传承下来的道德传统，也是社会主义道德建设的重点内容，它强调诚实劳动、信守承诺、诚恳待人、哟苏晗强调公民之间应该相互尊重、互相关心、互相帮助，友好和睦，努力形成社会主义新型的人际关系。
<!--project_2_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>社会主义核心价值观24字及其含义解读</title>
<style type="text/css">
h1 {
color: red;
}
blockquote {
text-indent: 2em;
}
</style>
</head>
<body>
<h1 align="center">社会主义核心价值观24字及其含义解读</h1>
<p>
<font size="5" color="blue" face="黑体">富强、民主、文明、和谐</font>
</p>
<blockquote>
<strong><u><big>富强、民主、文明、和谐</big></u></strong>，是我国社会主义现代化国家的建设目标，也是从价值目标层次对社会主义核心价值观基本理念的凝练，在社会主义核心价值观中居于最高层次，对其他层次的价值观具有统领作用。富强，即国富民强，是社会主义现代化国家经济建设的应然状态，是中华名族梦寐以求的美好夙愿，也是国家繁荣昌盛、人民幸福安康的物质基础。民主是人类社会的美好诉求。我们追求的民主是人民民主，其实质和核心是人民当家作主。他是社会主义现代化国家的重要特征。他是社会主义现代化国家建设的应有状态，是对面向现代化、面向世界、面向未来的，民族的科学的大众的社会主义文化的概括，是实现中华民族伟大复兴的重要支撑。和谐中国传统文化的基本理念，集中体现了学有所教、劳有所得、病有所医、老有所养、住有所居的生动局面。他是社会主义现代化国家在社会建设领域的价值诉求，是经济社会和谐稳定、持续健康发展的重要保证。
</blockquote>
<p>
<font size="5" color="blue" face="黑体">自由、平等、公正、法治</font>
</p>
<blockquote>
<strong><u><big> 自由、平等、公正、法治 </big></u></strong>，是对美好社会的描述，也是从社会层面对社会主义核心价值观基本理念的凝练。它反映了中国特色社会主义的基本属性，是我们党矢志不渝、长期实践的核心价值观念、自由是指人的意志自由、存在和发展的自由，是人类社会的美好向往，也是马克思主义追求的社会价值目标。平等指的是在法律面前一律平等，其价值取向是不断实现实质平等。它要求尊重和保障人权，人人依法享有平等参与、平等发展的权利。公正，即社会公平和正义，它以人的解放、人的自由平等权利的获得为前提，是国家、社会的根本价值理念。法治是治国理政的基本方式，依法治国是社会主义民主政治的基本要求。它通过法制建设来维护和保障公民的根本权利，是实现自由平等、公正正义的制度保证。
</blockquote>
<p>
<font size="5" color="blue" face="黑体">爱国、敬业、诚信、友善</font>
</p>
<blockquote>
<strong><u><big>爱国、敬业、诚信、友善</big></u></strong>，是公民基本道德规范，是从个人行为层面对社会主义核心价值观基本理念的凝练。它覆盖了社会主义道德生活的各个领域，是公民必须恪守的基本道德准则，也是评价公民道德行为选择的基本价值标准。爱国是基于每个人对自己祖国依赖关系的深刻情感，也是调节个人与祖国关系的行为准则。它同社会主义紧密结合起来，要求人们以振兴中华为己任，促进民族团结，维护祖国统一，自觉报效祖国。敬业是对公民职业行为准则的价值评价。要求公民忠于职守，克己奉公，服务人民，服务社会，充分体现了社会主义置业精神。诚信即诚实守信，是人类社会千百年传承下来的道德传统，也是社会主义道德建设的重点内容，它强调诚实劳动、信守承诺、诚恳待人、哟苏晗强调公民之间应该相互尊重、互相关心、互相帮助，友好和睦，努力形成社会主义新型的人际关系。
</blockquote>
</body>
</html>
2、食品安全管理制度
附：制度内容如下：
食堂从业人员和管理人员必须掌握有关食品卫生的基本要求。
食堂从业人员每年必须进行健康检查，新参加工作和临时参加工作的食品生产经营人员都必须进行健康检查
食堂从业人员在出现咳嗽、腹泻、发热、呕吐等有碍于食品卫生的症状时，应立即脱离工作岗位，待查明病因，排除有碍食品卫生的病症或愈后方可重新上岗。
食堂从业人员应有良好的个人卫生习惯必须做到：
- 工作前，处理食品原料后用肥皂及流动清水洗手；接触直接入口食品之前应洗手消毒。
- 穿戴清洁的工作衣、帽，并把头发置于帽内。
- 加工食品时不得留长指甲、涂指甲油及戴戒指等。
- 不得在食品加工和销售场所内吸烟。
<!-- project_2_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>食品安全管理制度</title>
<style type="text/css">
h3 {
font-size: 36px;
background: #3366ff;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h3 align="center">食品安全管理制度</h3>
<ol>
<li>食堂从业人员和管理人员必须掌握有关食品卫生的基本要求。</li>
<li>食堂从业人员每年必须进行健康检查，新参加工作和临时参加工作的食品生产经营人员都必须进行健康检查</li>
<li>食堂从业人员在出现咳嗽、腹泻、发热、呕吐等有碍于食品卫生的症状时，应立即脱离工作岗位，待查明病因，排除有碍食品卫生的病症或愈后方可重新上岗。</li>
<li>食堂从业人员应有良好的个人卫生习惯必须做到：
<ul type="square">
<li>工作前，处理食品原料后用肥皂及流动清水洗手；接触直接入口食品之前应洗手消毒。</li>
<li>穿戴清洁的工作衣、帽，并把头发置于帽内。</li>
<li>加工食品时不得留长指甲、涂指甲油及戴戒指等。</li>
<li>不得在食品加工和销售场所内吸烟。</li>
</ul>
</li>
</ol>
<h3 align="center">版权所有©为民私房菜有限公司宣</h3>
<!-- <hr color="#3366ff" size="40px"> -->
</body>
</html>
作者主页： 正函数的个人主页
文章收录专栏： Web design
欢迎大家点赞 👍 收藏 ? 加关注哦！
如果你认为这篇文章对你有帮助，请给正函数点个赞吧，如果发现什么问题，欢迎评论区留言！！
文章来源:https://blog.csdn.net/m0_73378536/article/details/135568478
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
最新文章
- Python教程
- 深入理解 MySQL 中的 HAVING 关键字和聚合函数
- Qt之QChar编码（1）
- MyBatis入门基础篇
- 用Python脚本实现FFmpeg批量转换
- Java-replaceAll()同时替换多个字符
- Python基础学习（一）
- SpringBoot运维（二）-- SpringBoot配置文件的4个级别
- MCMC：Metropolis-Hastings抽样
- beego的模块篇 - task任务
- MySQL 存储引擎和索引类型介绍
- ZK高可用架构涉及常用功能整理
- Gin框架之使用 go-ini 加载.ini 配置文件
- 2024年1月16日Arxiv热门NLP大模型论文：Multi-Candidate Speculative Decoding
- 强大的开门口令，实现仅指定用户才能进入查询