Web前端开发技术实验与实践（第3版）储久良编著实训2
实训2项目6文本与段落标记应用页面效果截图代码截图项目7高校资讯新闻条目设计页面效果截图代码截图项目8设计制度宣传展板页面效果截图代码截图项目9设计饭店菜单价目表页面效果截图代码截图...
·
实训2 格式化文本、段落与列表
项目6 文本与段落标记应用
页面效果截图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>格式化文本信息</title>
</head>
<body>
<!--1.标题字应用-->
<strong>1.标题字应用</strong>
<h1 align="center"><ruby>软<rt>ruan</rt>件<rt>jian</rt>工<rt>gong</rt>程<rt>cheng</rt></ruby>是全国就业薪酬涨幅最大的专业</h1>
<h4 align="left"><ruby>软<rt>ruan</rt>件<rt>jian</rt>工<rt>gong</rt>程<rt>cheng</rt></ruby>是全国就业薪酬涨幅最大的专业</h4>
<h5 align="right"><ruby>软<rt>ruan</rt>件<rt>jian</rt>工<rt>gong</rt>程<rt>cheng</rt></ruby>是全国就业薪酬涨幅最大的专业</h5>
<hr color="#ff3333">
<strong>2.段落、字体标记应用</strong>
<!--2.段落、字体标记应用-->
<p>
<font face="隶书" size="5" color="blue"> 网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。</font>
</p>
<strong>3.文本标记应用</strong>
<!--3.文本标记应用-->
<p align="center">2X<sup>2</sup>+3X=9 x<sub>1</sub>+x<sub>2</sub>=10</p>
<address align="center">地址：江苏省南京市珠江路1924号</address>
<blockquote>
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
</blockquote>
<strong>4.其他排版标记应用</strong>
<pre>
<font size="7" color="red">春思</font>
<font size="5" color="">--李白
燕草如碧丝，秦桑低绿枝。
当君怀归日，是妾断肠时。
春风不相识，何事入罗帏？
【评析】:这是一首描写思妇心绪的诗。开头两句以相隔遥远的燕秦春天景物起兴，写独处 秦地的思妇触景生情，终日思念远在燕地卫戍的夫君，
盼望他早日归来。三、四句由 开头两句生发而来，继续写燕草方碧，夫君必定思归怀己，此时秦桑已低，妾已断 肠，进一层表达了思妇之情。五
、六两句，以春风掀动罗帏时，思妇的心理活动，来 表现她对爱情坚贞不二的高尚情操。全诗以景寄情，委婉动人。
</font>
</pre>
<hr color="#ff00ff" size="3">
</body>
</html>
项目7 高校资讯新闻条目设计
页面效果截图
代码
<!--prj_2_2.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表实现新闻展示</title>
<style type="text/css">
.bt {
font-size: 22px;
font-family: 黑体;
margin: 0 auto;
padding: 0 20px;
}
.div1 {
width: 530px;
height: 280px;
border: 1px solid #ccff99;
}
ul {
list-style-type: disc;
font-size: 22px;
line-height: 33px;
color: blue;
}
h2 {
font-size: 32px;
background: #ebebeb;
color: #000099;
margin: 0 auto 10px auto;
}
</style>
</head>
<body>
<div id="" class="div1">
<h2>科研发展</h2>
<p class="bt">高校资讯 科技前沿 成果展示 学术会议</p>
<ul>
<li>国防科技大学员问鼎2014国际数模竞赛最高奖 </li>
<li>同济大学教授阮仪三获2014亨利•霍普•里德奖</li>
<li>中科大徐春叶教授获2014年国际材料科学奖 </li>
<li>北京和睦家医院肺癌诊疗会诊中心成立</li>
<li>兰州大学博士生获全国优秀博士学位论文提名</li>
</ul>
</div>
</body>
</html>
项目8 设计制度宣传展板
页面效果截图
代码
<!--prj_2_3.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设计制度宣传展板</title>
<style type="text/css">
body {
text-align: center;
font-size: 20px;
font-weight: bold;
}
h1 {
font-size: 32px;
font-family: 黑体;
height: 62px;
padding-top: 15px;
text-align: center;
color: white;
background: #9999ff;
}
.div1 {
width: 650px;
height: 940px;
text-align: left;
padding: 50px;
background: url(../img/prj_image2_2.jpg);
letter-spacing: 1px;
}
</style>
</head>
<body>
<div id="" class="div1">
<h1>大型分析仪器管理办法</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>
项目9 设计饭店菜单价目表
页面效果截图
代码
<!--prj_2_4.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绿晶饭店菜单价目表</title>
<style type="text/css">
body {
background: url(../img/prj_image_2_4_153.jpg) no-repeat;
}
div {
width: 950px;
height: 730px;
text-align: center;
padding-left: 80px;
}
dt {
font: bold 24px;
}
dd {
font: 18px 隶书;
}
h3 {
font: bold 32px 黑体;
color: red;
}
</style>
</head>
<body>
<div id="">
<h3>绿晶饭店菜单价目表</h3>
<dl>
<dt>心满意粥</dt>
<dd>菜心粒肉片粥.......6元</dd>
<dd>皮蛋瘦肉粥.........5元</dd>
<dd>香茜鱼片粥.........8元</dd>
<dd>生菜丝骨腩粥.......6元</dd>
<dd>枣丝杞子猪肝粥.....6元</dd>
<dd>状元及第粥.........8元</dd>
<dd>生菜肚丝粥.........8元</dd>
<dd>明火白粥...........2元</dd>
</dl>
<dl>
<dt>饮料</dt>
<dd>矿泉水...........2元/瓶</dd>
<dd>旺仔牛奶.........5元/瓶</dd>
<dd>高山青草奶......10元/瓶</dd>
<dd>王老吉...........5元/罐</dd>
<dd>雪碧.............4元/瓶</dd>
<dd>可口可乐.........4元/罐</dd>
<dd>和其正凉茶.......4元/罐</dd>
<dd>康师傅红/绿茶....4元/瓶</dd>
</dl>
<dl>
<dt>红酒</dt>
<dd>特饮干红.........................98元/瓶</dd>
<dd>法国查尔斯干红..................128元/瓶</dd>
<dd>注册解百纳干红..................168元/瓶</dd>
<dd>张裕圆桶干红（特选级）黑色......168元/瓶</dd>
<dd>张裕圆桶解百纳（特选级）红色...258元/瓶</dd>
<dd>张裕卡斯特（特选级）黑色.........398元/瓶</dd>
</dl>
</div>
</body>
</html>
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
25
0- 0
已为社区贡献5条内容
所有评论(0)