<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
text-align:center;
color:#001D26;
}
h4{
color:#900
}
p{
font-size:16px;
color:#3E4B53;
text-indent:2em;
}
a:link{
color:skyblue;
}
a:hover{
color:red;
}
body{
background-image:url(https://labfile.oss.aliyuncs.com/courses/2841/bg1.jpg);
}
</style>
</head>
<body>
<p>
<h1> 忆江南 </h1>
</p>
<a href="https://labfile.oss.aliyuncs.com/courses/2841/poem.htm">唐·白居易</a>
<p>
(1)江南好,风景旧曾谙。(2)日出江花红胜火,春来江水绿如蓝,(3)能不忆江南。
</p>
<h4>作者介绍</h4>
<p>
白居易(772-846),字乐天,太原(今属山西)人。唐德宗朝进士,元和三年(808)拜左拾遗,后贬
江州(今属江西)司马,移忠州(今属四川)刺史,又为苏州(今属江苏)、同州(今属山西大荔)刺史。晚居
洛阳,自号醉吟先生、香山居士。其诗政治倾向鲜明,重讽喻,尚坦易,为中唐大家。也是早期词人重的佼佼者,
所作对后世影响甚大。
</p>
<h4>注释</h4>
<p>
(1)据《乐府杂录》,此词又名《谢秋娘》,系唐李德裕为亡姬谢秋娘作。
又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字,双调五十四字,
皆平韵。
(2)谙(音安):熟悉。
(3)蓝:蓝草,其叶可制青绿染料。
</p>
<h4>品评</h4>
<p>
此词写江南春色,首句“江南好”,以一个既浅切又圆活的“好”字,摄尽江南的种种佳处,
而作者的赞颂之意与向往之情也尽寓其中。同时,唯因“好”之已甚,方能“忆”之不休,因此,
词句又已暗逗结句“能不忆江南”,并与之相关阖。此句“风景旧曾谙”,点明江南风景之“好”,
并非得之传闻,而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字,又照应了“忆”字,
不失为勾通一篇意脉的精彩笔墨。三两句对江南之“好”进行形象化的演绎,突出渲染红花、江水红绿相映
的明艳色彩,给人以光彩夺目的强烈印象。其中,既有同色间的相互烘托,又有异色间的相互映衬,充分显示了作者
善于著色的技巧。篇末,以“能不忆江南”收束全词,既托出身在洛阳的作者对江南春色的无限赞叹与怀念,又造成一种悠远而又
深长的韵味,把读者带入余情摇漾的境界中。
</p>
</body>
</html>
示为
盒模型:
(1)border 相关的属性:
border-style 属性是用来设置边框样式的,我们可以直接使用 border-style 来设置四个边框的样式,也可以分别设置上下左右四个边框的属性。
我们来举个例子吧!
我们在 body 标签中添加一对段落标签。将段落元素边框的上、右、下、左四个部分的边框类型分别设置为实线、点状、虚线和双线。
例子,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
border-top-style:solid;
border-right-style:dotted;
border-bottom-style:dashed;
border-left-style:double;
}
</style>
</head>
<body>
<p>
王耶浪Web开发学习笔记
</p>
</body>
</html>
显示为,
(2)border-width 属性:
border-width 属性是用来设置边框宽度的,我们可以直接使用 border-width 来设置四个边框的宽度,也可以分别设置上下左右四个边框的属性。
例子,
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
border-style: solid;
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 6px;
}
</style>
</head>
<body>
<p>
王耶浪Web开发学习笔记
</p>
</body>
</html>
显示为,
(3)border-color 属性:
border-color 属性是用来设置边框颜色的,我们可以直接使用 border-color 来设置四个边框的宽度,也可以分别设置上下左右四个边框的属性。
例子,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
width: 420px;
height: 200px;
border: 1px solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}
</style>
</head>
<body>
<p>
王耶浪Web开发学习笔记
</p>
</body>
</html>
显示为,
(4)border 属性和 padding 属性,以及使用这两个属性做练习:
border 是边框属性,它是复合属性,其用法如下所示:
border: 上右下左的值;
border-top: 上边框值;
border-right: 右边框值;
border-bottom: 下边框值;
border-left: 左边框值;
padding 属性是一个复合属性,代表我们盒子模型中的填充,也就是内容区域外部的空白区域。
其使用格式如下所示:
padding: 上右下左;
padding-top: 顶部填充值;
padding-left: 左边填充值;
padding-right: 右边填充值;
padding-bottom: 底部填充值;
例子,
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top: thin solid red;
border-right: medium dotted green;
border-bottom: dashed thick blue;
border-left: double 6px yellow;
padding: 10px;
}
</style>
</head>
<body>
<p>
王耶浪Web开发学习笔记
</p>
</body>
</html>
显示为,
(5)margin 属性:
margin 属性是用来设置元素的外边距:
使用格式:
margin: 上边距 右边距 下边距 左边距;
也可以省略写。
当左右边距值相同时,写法如下:
margin: 上边距 左右边距 下边距;
当上下边距值相同,左右边距值相同时,写法如下:
margin: 上下边距 左右边距;
当上下左右边距值均相同时,写法如下:
margin: 属性值;
从上面的内容,我们可以看出 margin 属性是个复合属性,我们可以分开设置上下左右的边距,写法如下:
/*上边距*/
margin-top: 属性值;
/*左边距*/
margin-left: 属性值;
/*右边距*/
margin-right: 属性值;
/*下边距*/
margin-bottom: 属性值;
例子,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid blue;
}
p {
width: 100px;
height: 50px;
background-color: darkgrey;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>王耶浪Web开发学习笔记</p>
</div>
</body>
</html>
显示为,
margin 属性来改变 p 元素相对于 div 元素的位置。修改代码如下:
p {
width: 100px;
height: 50px;
background-color: darkgrey;
text-align: center;
margin: 25px 50px;
}
显示为,
(6)display 的常用属性:
display 属性可以用来设置元素在页面上的排列方式,也可用来隐藏元素。
display 属性值的说明如下表所示。
属性值 | 说明 |
block | 元素以块级方式展示。 |
inline | 元素以内联方式展示。 |
inline-block | 元素以内联块的方式展示。 |
none | 隐藏元素。 |
block 属性值可以让行内元素以块级元素的方式显示在页面上。
其使用格式如下:
display: block;
还记得前面学过的行内元素的概念吗? 行内元素就是可以和其他元素同处一行的元素,例如 span 标签元素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>王耶浪</span><span>Web开发学习笔记</span>
</body>
</html>
显示为,
原本 span 标签是行内元素,却因为设置 display: block; 导致「王耶浪」与「Web开发学习笔记」分开了。
inline 属性值可以让像 div 这样的霸道块,接纳其他元素来自己的地盘。
其使用格式如下:
display: inline;
例子,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
display: inline;
}
</style>
</head>
<body>
<div>王耶浪</div>
<div>Web开发学习笔记</div>
</body>
</html>
显示为,
块内元素和行内元素有其独特的优势,在某些情况下,我们想让一个元素既具有块内元素的特点,又具备行内元素的特点。这就要请出 inline-block 属性值来施展这个魔法了。
其使用格式如下:
display: inline-block;
哪些情况下可以用到这个属性?
比如,用 a 标签来实现导航的时候,a 标签可以让元素在一行显示,但若想给每个 a 标签加上高和宽时发现没有任何效果。这时用 display: inline-block,a就具备块的特性了。
例子,
日,深圳市第二实验学校的三名物理老师在抖音发布了一小段物理教学实验视频,在短短一天时间内居然有数百万的点击量,近两万人点赞。
视频中的主角,是深圳市第二实验学校的黄正玉、郑景华、冯雅琪三名物理老师。在这个名为《3+1=3?》的物理教学实验短视频中可以看到,右边放手后,其中一个钩码加速上升,处于超重状态,即拉力T大于一个钩码重力mg,其中另三个钩码加速下落,处于失重状态,即拉力T小于3mg。通过牛顿定律可以算出拉力T等于1.5mg,故合起来拉力为3mg,刚好和左边三个钩码重力相等,达到平衡。
实际上,这个视频是该校物理课组承担的规划课题《物理习题实验化的实践研究》的内容,这是一个用来讲解超重与失重的教学视频。课题目标是将习题教学和实验创新联姻,让两者相得益彰。这种短视频受到学生普遍喜欢,既能加深学生对知识点的深刻理解,更能提高学生的实践素养。
对于这段视频的走红,该校高一女生学生卓盈表示非常出乎意料,其实这些实验在课堂上非常常见,能勾起她对于物理的兴趣。另一名高一男生史豪则表示,老师这次发抖音让很多人关注到物理实验的有趣,有些学生也在刷抖音,也能从中学到一些知识。
短短一段视频有着如此大的传播力度,黄正玉老师表示之前完全没有想到。黄老师认为,教学中不要过多的习题化训练,而要创设一些情景,让同学们更好地认识规律以及实际情景下的联系,最终达到对物理规律更好的理解。这一次视频在抖音上走红,令老师们意识到,新技术、新媒体在推进教学改革方面大有可为。
(来源:深圳都市频道《第一现场》 编辑:刘清扬)
版权声明:如涉及版权问题,请作者持权属证明与本网联系
NANCHANG UNIVERSITY
题 目: 晚餐预定系统
学 院: 软 件 学 院
专 业: 软 件 工 程
班 级:
完成人数: 1 人
成 员:
起讫日期:
任课教师: 职称: 副教授
完成时间:
填表日期: 年 月 日
一、开发环境的搭建及遇到的主要问题
1.开发环境
根据个人技术背景,选择开发环境如下:
初始共往tableset表中插入3条数据记录:
10张座位为4的餐桌;
8张座位为8的餐桌(可扩充2个座位);
2张座位为12的餐桌(可扩充3个座位)
2. 主要服务:
图1 应用架构简略示意图
四、运行结果截图和文字说明
图2 DinnerB首页
图3 有空余座位 图4 订餐失败
图5 订餐成功
图6 联系信息不正确
图7 填写信息超时
3. 取消订餐
A.点击“取消订餐”,填写订餐时提供的联系方式,提交(如图8)。中转服务调用inquiryReservation查询该用户所有的预约,成功的话,前台会列出该用户所有成功的预约,如图9;
B. 用户选择要取消的订餐选项(可多选),提交后,中转服务会调用deleteReservation删除对应的预约记录,取消订餐成功。为了安全考虑,该页面具有一次性属性,切换菜单或者删除不成功都无法重新回到该页面。
图8 取消订餐——填写联系方式
图8 订餐记录 图9 选择要取消的订餐记录
五、总结
WSDL为web服务提供了详细的接口说明,实现了服务的可阅读性,方便了服务的传播。在此之前,自己一直是一个web站点开发者,自己写服务自己调用,无法体会服务传播中的问题。
大作业给了一个加深WSDL理解的机会,由于自己在web方面的技术积累,做起来可谓是轻松加愉快。于是重点都放在了对WSDL具体实现的学习上。非常要感谢前人做的工作,NuSOAP库使得自己不用再担心去操作WSDL语言,而可以坐等自己的服务被翻译成WSDL接口文件。
*请认真填写需求信息,我们会在24小时内与您取得联系。