HTML CSS JS 实验
P36
这里就是注意下hr标签的使用
<hr align="center" width="50%" />
这种就是已经被淘汰的，虽然不赞成使用 align 属性，但是该属性仍然得到所有主流浏览器的支持。
在 HTML 4.01 中，不赞成使用 hr 元素的 align 属性；在 XHTML 1.0 Strict DTD 中，不支持 hr 元素的 align 属性。
下面是比较推荐的方法：
CSS 语法（IE 和 Opera）：<hr style="text-align:right" />
CSS 语法（Firefox、Chrome 以及 Safari）：<hr style="margin-right:0" />
CSS 语法（跨浏览器）：<hr style="text-align:right;margin-right:0" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字网页</title>
</head>
<body>
<div style="text-align: center;"><h1>古诗欣赏</h1></div>
<br>
<hr style="align:center;height:2px;background-color:black">
<br>
<b><div style="text-align: center;" >静夜思</div></b>
<br>
<div style="text-align: center;font-size:13px">李白</div>
<br>
<div style="text-align:center"><b>
床前明月光，<br>
疑是地上霜。<br>
举头望明月，<br>
低头思故乡。<br>
</b></div>
<br><br><br>
<hr style="align:center;height:2px;background-color:black">
<br>
<b>【简析】</b><br>
<p>
《静夜思》没有奇特新颖的想象，没有精工华美的辞藻，只是用叙述的语气，写远客思乡之情，然而它却意味深长，耐人寻绎，千百年来，如此广泛地吸引着读者。全诗从“疑”到“举头”，从“举头”到“低头”，形象地揭示了诗人内心活动，鲜明地勾勒出一幅生动形象的月夜思乡图，抒发了作者在寂静的月夜思念家乡的感受。
<br>
客中深夜不能成眠、短梦初回的情景。这时庭院是寂寥的，透过窗户的皎洁月光射到床前，带来了冷森森的秋宵寒意。诗人朦胧地乍一望去，在迷离恍惚的心情中，真好像是地上铺了一层白皑皑的浓霜；可是再定神一看，四周围的环境告诉他，这不是霜痕而是月色。月色不免吸引着他抬头一看，一轮娟娟素魄正挂在窗前，秋夜的太空是如此明净。秋月是分外光明的，然而它又是清冷的。对孤身远客来说，最容易触动旅思秋怀，使人感到客况萧条，年华易逝。凝望着月亮，也最容易使人产生遐想，想到故乡的一切，想到家里的亲人。想着，想着，头渐渐地低了下去，完全浸入于沉思之中。
</p>
<br>
<hr style="margin-left:0;height:4px;background-color:black;width:30%">
<p>版权©：版权所有，违者必究</p>
<p>E-mail:666@163.com</p>
</body>
</html>
P38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盘点全国高考住宿条件最好的十所大学</title>
</head>
<body>
<div style="vertical-align:middle;display: table-cell" >
<div style="text-align: center"> <img src="image/SCAU.jpg" alt="SCAU" width=750 /></div>
<p style="text-align: center;font-size: 30px"><i>
盘点全国高考住宿条件最好的十所大学
</i></p>
<p style="text-align: center;font-size:20px">
新浪教育 | 2020年4月29日23：16 | 来源：新浪教育
</p>
<view>
华南农业大学（South China Agricultural University），简称华农，是一所以农业科学和生命科学为优势，以热带亚热带区域农业研究为特色的全国重点大学，广东省人民政府和农业农村部共建的省部共建大学，为广东省“211工程”、广东省高水平大学建设高校，入选国家”特色重点学科项目“建设高校、国家建设高水平大学公派研究生项目、教育部三全育人改革试点高校、全国深化创新创业教育改革示范高校、中国政府奖学金来华留学生接收院校、国家“卓越农林人才教育培养计划”改革试点高校、国家大学生文化素质教育基地、首批高等学校科技成果转化和技术转移基地、国家“111计划”，粤港澳高校联盟、CDIO工程教育联盟成员单位。
</view>
</div>
</body>
</html>
P51 4-10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字列表</title>
</head>
<body>
<view>数字列表</view>
<ol type="1">
<li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li>
</ol>
<view>字母链表</view>
<ol type="A">
<li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li>
</ol>
<view>小写字母列表</view>
<ol type="a">
<li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li>
</ol>
<view>罗马数字列表</view>
<ol type="I">
<li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li>
</ol>
<view>小写罗马数字列表</view>
<ol type="i">
<li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li>
</ol>
</body>
</html>
P-51 4-11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个镶套列表</title>
</head>
<body>
<view>一个镶套列表</view>
<ul type="disc">
<li>coffee</li>
<li>tea</li>
<ul type="circle">
<li>black tea</li>
<li>green tea</li>
<ul type="square">
<li>Chinese tea</li>
<li>African tea</li>
</ul>
</ul>
<li>milk</li>
</ul>
</body>
</html>
P68 5-14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表项</title>
</head>
<body>
<h1><b>微博热搜</b></h1>
<a href="https://s.weibo.com/weibo?q=%23潜逃24年杀人犯因没有绿码自首%23&Refer=top"><p style="text-align:center">潜逃24年杀人犯因没有绿码自首</p></a>
<a href="https://s.weibo.com/weibo?q=%23上海迪士尼乐园有望5月中下旬恢复开园%23&Refer=top"><p style="text-align: center">上海迪士尼乐园有望5月中下旬恢复开园</p> </a>
<a href="https://s.weibo.com/weibo?q=%23张大仙同款活力水%23&topic_ad=1&Refer=top"><p style="text-align: center">张大仙同款活力水 </p> </a>
<a href="https://s.weibo.com/weibo?q=%23动物园封锁6个星期动物心态变了%23&Refer=top"><p style="text-align: center">动物园封锁6个星期动物心态变了</p> </a>
</body>
</html>
P69 5-15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>各部门信息</title>
</head>
<body>
<b>各部门信息</b><br>
<a href="#T1">人力资源部</a><br>
<a href="#T2">财务部</a><br>
<a href="#T3">质量办公室</a><br>
<a href="#T4">研究室</a><br>
<h3><a name="T1">人力资源部门</a> </h3>
<pre>（1） 根据单位实际情况和发展规划拟定单位人力资源计划，经批准后组织实施。
（2） 制订人力资源部年度工作目标和工作计划，按月做出预算及工作计划，经批准后施行。
（3） 组织制订单位用工制度、人事管理制度、劳动工资制度、人事档案管理制度、员工手册、培训大纲等规章制度、实施细则和人力资源部工作程序，经批准后组织实施。
（4） 制订人力资源部专业培训计划并协助培训部实施、考核。
（5） 加强与单位外同行之间的联系。
（6） 负责在单位内外收集有潜力的和所需的人才信息并组织招聘工作。
（7） 审批单位员工薪酬表，报总经理核准后转会计部执行。
（8） 组织办理员工绩效考核工作并负责审查各项考核、培训结果。
（9） 制订述职周期经批准后安排述职活动。
（10） 审批经人事部核准的过失单和奖励单，并安排执行。
（11） 受理员工投诉和员工与单位劳动争议事宜并负责及时解决。
（12） 按工作程序做好与相关部门的横向联系，并及时对部门间争议提出界定要求。
（13） 负责人力资源部主管的工作程序和规章制度、实施细则的培训、执行和检查。
（14） 及时准确传达上级指示。
（15） 定期主持人力资源部的例会，并参加单位有关人事方面的会议。
（16） 审批人力资源部及与其相关的文件。
（17） 了解人力资源部工作情况和相关数据，收集分析单位人事、劳资信息并定期向总经理、行政总监提交报告。
（18） 定期向行管总监述职。
（19） 在必要情况下向下级授权。
（20） 制定直接下级的岗位描述，定期听取述职并对其做出工作评定。
（21） 指导、巡视、监督、检查所属下级的各项工作。
（22） 受理下级上报的合理化建议，按照程序处理。
（23） 及时对下级工作中的争议作出裁决。
（24） 填写直接下级过失单和奖励单，根据权限按照程序执行。
（25） 培训和发现人材，根据工作需要按照申请招聘、调配直接下级，负责真直接下级岗位人员任用的提名。
（26） 根据工作需要进行现场指挥。
（27） 指定专人负责本部门文件等资料的保管和定期归档工作。
（28） 指定专人负责本部门和下级部门所使用的办公用具、设备设施的登记台帐、定期盘点、报损报失等工作
（29） 关心所属下级的思想、工作、生活。
（30） 代表单位与政府对口部门和有关社会团体、机构联络。</pre>
<h3><a name="T2">财务部</a> </h3>
<p>符合公司治理结构设置的财务部或类财务部门应当有从资本的融通（筹资管理）到现金的运营（财务管理）再到资本运作（投资管理）的三项职能。而目前国内的大部分公司财务体系（包括独立于财务部门的由首席财务官、总会计师、财务总监管理的除财务部之外的其他部门）往往都没有有效的包括这三项职能。造成这种原因往往是由于公司治理结构不完善、财务负责人能力较差等原因造成，结果往往造成部门协同效应较差。</p>
<h3><a name="T3">质量办公室</a>
<pre>
铜川职业技术学院质量管理办公室是学院质量管理的职能部门，内设质量科和督导科。工作职责如下：
1.负责学院内部质量保证体系的规划设计、建设运行。
2.负责制定学院内部质量监控、督导、考核等相关制度。
3.负责学院质量数据分析及监控平台的建设与管理，负责内部质量信息、数据的研判、预警，为学院决策提供参考。
4.负责学院质量保证与教育教学督导队伍建设。
5.负责督导学院各部门服务教学工作；督导各教学部门实施教育教学工作情况；督导教师履行教学工作规范和完成教学工作任务的情况等。
6.负责学生信息中心管理工作，及时做好学生对学院内部质量建设的信息收集、分析与反馈。
7.负责学院质量报告制度建设，以及质量年度报告的编写与发布工作。
8.牵头做好学院内部质量保障体系诊改督导考核工作。 [详细介绍]
</pre>
</h3>
<h3><a name="T4">研究室</a> </h3>
<pre>
（一）秘书司
（人事司、外事司）
负责机关文电、会务、机要、档案、政务公开、安全保密工作；承办机关人事和机构编制工作；承办机关外事工作，组织实施国际交流合作项目；承办机关后勤服务和离退休干部工作；承办机关党委的日常工作。
（二）综合研究司
承办中长期规划、国土资源、环境保护、区域协调发展、城乡建设、可持续发展以及经济体制改革等方面重大问题的调查研究，提出政策建议；起草、修改综合性讲话和报告等文稿；起草、修改有关新闻稿和宣传材料。
（三）宏观经济研究司
（国际研究司）
承办经济运行、财税、金融、物价、投资、消费、国际收支等宏观调控方面重大问题的调查研究，跟踪分析宏观经济形势，提出政策建议；承办国际经济形势、各主要国家经济政策和社会发展的分析和研究，提出可供参考、借鉴的政策建议；起草、修改有关重要讲话和文件等文稿。
（四）工交贸易研究司
承办工业、交通、内外贸易、市场管理、产业政策、企业改革、安全生产、信息化建设、对外开放等方面重大问题的调查研究，提出政策建议；起草、修改有关重要讲话和文件等文稿。
（五）农村经济研究司
承办农村经济发展和体制改革、农业、林业、水利、农民收入、扶贫开发、粮食安全、生态文明等方面重大问题的调查研究，提出政策建议；起草、修改有关重要讲话和文件等文稿。
（六）社会发展研究司
承办行政管理体制改革、政府自身建设、公共安全、就业与社会保障、收入分配、社会稳定、廉政建设、外交、国防、港澳台、民族、宗教、侨务、民政、残疾人事业等方面重大问题的调查研究，提出政策建议；起草、修改有关重要讲话和文件等文稿。
（七）教科文卫研究司
承办教育、科技、文化、卫生、人口计生、体育等方面重大问题的调查研究，提出政策建议；起草、修改有关重要讲话和文件等文稿。
（八）信息研究司
承办收集、整理、分析、编辑和报送重要综合信息动态，为国务院决策提供咨询服务；编辑和印发有关内部刊物；汇编、整理领导同志有关讲话和摘编报刊、互联网资料等。
（九）其他部门
机关党委 负责机关和在京直属单位的党群工作。
中国言实出版社。中国言实出版社是国务院研究室主办主管的出版单位，成立于1995年。主要出版党和国家重大方针政策的研究成果及相关学习辅导读物，同时出版哲学、政治、法律、经济、管理、历史、文化以及干部教育、成人教育、技术职务考试类图书。 [1]
</pre>
</body>
</html>
P91 6-15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6-15</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" align="center">
<caption><b>成绩登记表</b></caption>
<tr align="center" bgcolor="#5f9ea0 " >
<th width="70">序号</th><th width="150">学号</th><th width="70">姓名</th><th width="100">平时成绩</th><th width="100">期末成绩</th><th width="100">学期总成绩</th>
</tr>
<tr align="center">
<td bgcolor="#5f9ea0 ">1</td><td>2010300201</td><td>张小丽</td><td>95</td><td>95</td><td>95</td>
</tr>
<tr align="center"> <td bgcolor="#5f9ea0 ">2</td><td>2010300202</td><td>李宁</td><td>90</td><td>88</td><td>89</td>
</tr>
<tr align="center"> <td bgcolor="#5f9ea0 ">3</td><td>2010300203</td><td>刘梅</td><td>98</td><td>92</td><td>95</td>
</tr>
<tr align="center"> <td bgcolor="#5f9ea0 ">4</td><td>2010300204</td><td>王刚</td><td>98</td><td>90</td><td>95</td>
</tr>
<tr align="center"> <td bgcolor="#5f9ea0 ">5</td><td>2010300205</td><td>郑军</td><td>90</td><td>85</td><td>94</td>
</tr>
<tr align="center"> <td bgcolor="#5f9ea0 ">6</td><td>2010300206</td><td>杨波</td><td>80</td><td>80</td><td>85</td>
</tr>
</table>
</body>
</html>
P91 6-16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6-16</title>
</head>
<body>
<table border="1" align="center">
<tr>
<td>
<img src="c.png" width=300>
</td>
<td valign="top">
<b>产品名称：佳能5D Mark IV(单机)</b>
<br>
<br>
<div style="font-size: small">
<view>佳能 IXUS 130</view><br>
<view>佳能 IXUS 130</view><br>
<view>佳能 IXUS 130</view><br>
<view>佳能 IXUS 130</view><br><view>佳能 IXUS 130</view><br>
<view>佳能 IXUS 130</view><br>
</div>
</td>
</tr>
<tr bgcolor="#6495ed"><td colspan="2"><b>主要参数</b></td></tr>
<tr>
<td valign="top" colspan="2">
<view>
L（大）：约3010万像素（6720×4480）<br>
M（中）：约1330万像素（4464×2976）<br>
S1（小1）：约750万像素（3360×2240）<br>
S2（小2）：约250万像素（1920×1280）<br>
S3（小3）：约35万像素（720×480）<br>
RAW：约3010万像素（6720×4480）<br>
M-RAW：约1690万像素（5040×3360）<br>
S-RAW：约750万像素（3360×2240）纠错
</view>
</td>
</tr>
<tr bgcolor="#6495ed"><td colspan="2"><b>功能参数</b></td></tr>
<tr>
<td valign="top" colspan="2">
<view>
视野率：垂直/水平方向约为100%，眼点约为21毫米<br>
放大倍率：约0.71倍（-1m，使用50mm镜头对无限远处对焦）<br>
眼点：约21毫米（自目镜透镜中央起-1m）<br>
屈光度调节范围：约-3.0-1.0m（dpt）<br>
对焦屏：固定式<br>
网格线显示：具备<br>
电子水准仪：具备<br>
取景器内信息显示：电池电量，拍摄模式，白平衡，驱动模式，自动对焦操作，<br>测光模式，图像类型：JPEG/RAW，数码镜头优化，全像素双核RAW，闪烁检测<br>，警告指示，自动对焦状态指示<br>
反光镜：快回型<br>
景深预览：具备纠错
</view>
</td>
</tr>
</table>
</body>
</html>
P110 7-15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7-15</title>
</head>
<body>
<from>
<table border="1" align="center" width="500">
<tr><td colspan="2" align="center">留言薄</td></tr>
<tr>
<td>您的姓名:</td>
<td>
<input type="text" name="yourName">*
</td>
</tr>
<tr>
<td>您的邮箱:</td>
<td>
<input type="text" name="yourEmail">*
</td>
</tr>
<tr>
<td>您的网站:</td>
<td>
<input type="text" name="yourWeb" value="http://">
</td>
</tr>
<tr>
<td>其他联系方式:</td>
<td>
<input type="text" name="yourWeb">
*（如QQ、MSN、电话等）
</td>
</tr>
<tr>
<td>留言内容:<br>（200字以内）</td>
<td>
<textarea name="lots" cols="50" rows="6" wrap="soft"></textarea>*
</td>
</tr>
<tr>
<td>请选择表情：</td>
<td>
<input type="radio" name="radio" value="10">微笑
<input type="radio" name="radio" value="20">呵呵
<input type="radio" name="radio" value="30">哒哒
<input type="radio" name="radio" value="40">哭泣
<input type="radio" name="radio" value="50">牛逼
<input type="radio" name="radio" value="60">爱了
<input type="radio" name="radio" value="70">微笑<br>
<input type="radio" name="radio" value="80">呵呵
<input type="radio" name="radio" value="90">哒哒
<input type="radio" name="radio" value="100">哭泣
<input type="radio" name="radio" value="110">牛逼
<input type="radio" name="radio" value="120">爱了
<input type="radio" name="radio" value="90">哒哒
<input type="radio" name="radio" value="100">哭泣
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</from>
</body>
</html>
P159 8-38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>教材选购单</title>
</head>
<style>
body{margin:0;text-align: center;background: #FFFFFF;line-height: 15px}
#container{width: 80%;margin:0 auto;}
#header{width: 800px;padding-top:40px;margin:0 auto;height: 60px;}
.title{color: black ;padding:15px;}
#pagebody{width: 800px ;margin:0 auto;}
.contentbody{border: 2px solid ;width: 450px;height: 220px;padding: 8px;margin:0 auto;}
.textList{background-color: #f7f7f7;border: 1px dotted #808080;width: 400px;height: 70px;padding-top:8px}
.divtxt{margin-left: 8px;margin-bottom: 15px;margin-top: 12px}
#sub{ //通过id实现
width:300px; //只是假定的值，需要根据实际的要求写。
height:60px;
}
</style>
<body>
<div id="container">
<div id="header">
<h2 align="center">教材选购单</h2>
</div>
<div id="pagebody" >
<div class= contentbody>
<div class= title align="left">你想订购那几本教材？</div>
<form>
<div class =textList>
<div align="left" class="divtxt">
<label>
<input type="checkbox" name="textbook">
</label>JSP实用教材（第二版）
</div>
<div align="left" class="divtxt">
<label>
<input type="checkbox" name="textbook">
</label>SQL Server 开发与维护
</div>
<div class="divtxt" align="left">
<label>
<input type="button" value="发送教材选购单" style="height:30px; width:100px;" >
</label>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
P161 8-39
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8-39</title>
<style>
.head{padding-right: 80px;padding-bottom:80px;background-color:cornflowerblue}
.head2{padding-right: 80px;padding-bottom: 5px;background-color: aquamarine;margin-top: 10px;}
.body2{background-color:cadetblue;width: 20%;height: 400px;margin-top: 10px;margin-right: 10px}
.body3{background-color: darkolivegreen;width: 58%;height: 400px;margin-top: 10px;margin-right: 10px}
.body4{background-color:cadetblue;width: 20%;height: 400px;margin-top: 10px;}
.head5{padding-right: 80px;padding-bottom: 40px;background-color:aqua;margin-top: 10px;}
.head6{padding-right: 80px;padding-bottom: 5px;background-color: aquamarine;margin-top: 420px;}
</style>
</head>
<body>
<div class="head">
HEAD
</div>
<div class="head2">
NAVIGATION
</div>
<div>
<div class="body2" style="float:left;">
LEFT
</div>
<div class="body3" style="float: left">
MIDDLE
</div>
<div class="body4" style="float: left">
RIGHT
</div>
</div>
<div class="head6">
MESSAGE
</div>
<div class="head5">
BOTTOM
</div>
</body>
</html>
1067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
