整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Web开发学习笔记(22)-CSS(9)常用属性作业、盒模型

<!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-top-style 属性
  • border-right-style 属性
  • border-bottom-style 属性
  • border-left-style 属性

border-style 属性是用来设置边框样式的,我们可以直接使用 border-style 来设置四个边框的样式,也可以分别设置上下左右四个边框的属性。

  • border-top-style 属性是给上边框设置样式的。
  • border-right-style 属性是给右边框设置样式的。
  • border-bottom-style 属性是给下边框设置样式的。
  • border-left-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-top-width 属性
  • border-right-width 属性
  • border-bottom-width 属性
  • border-left-width 属性

border-width 属性是用来设置边框宽度的,我们可以直接使用 border-width 来设置四个边框的宽度,也可以分别设置上下左右四个边框的属性。

  • border-top-width 属性是给上边框设置宽度的。
  • border-right-width 属性是给右边框设置宽度的。
  • border-bottom-width 属性是给下边框设置宽度的。
  • border-left-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-top-color 属性
  • border-right-color 属性
  • border-bottom-color 属性
  • border-left-color 属性

border-color 属性是用来设置边框颜色的,我们可以直接使用 border-color 来设置四个边框的宽度,也可以分别设置上下左右四个边框的属性。

  • border-top-color 属性是给上边框设置颜色的。
  • border-right-color 属性是给右边框设置颜色的。
  • border-bottom-color 属性是给下边框设置颜色的。
  • border-left-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 属性
  • 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 属性是个复合属性,我们可以分开设置上下左右的边距,写法如下:

/*上边距*/
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.开发环境

根据个人技术背景,选择开发环境如下:

  1. 将Demo部署为B/S架构的应用;
  2. 使用集成软件包搭建开发环境:PHP+Apache+MySQL;
  3. 借助NuSOAP库实现WSDL服务的部署;
    2.主要问题
    自己对于amp组合建站流程已经比较熟悉,借助集成软件包xampp或者wamp即可轻松搭建出开发环境。
    时间和精力
    主要耗费在NuSOAP库上,大概花了半天时间用于上手。
    二、数据库与服务端设计
    1. 数据库设计


  1. 数据库共设计两个表:
    1. 餐桌类集合表(tableset):tid, 餐桌容量,餐桌数目,餐桌可扩充人数,描述
    2. 预约表(reservation):rid,称谓,手机号,餐桌类型,人数,就餐日期,订餐时间


  1. 说明:
    1. tableset表是各种餐桌类别的集合,存放各类餐桌的属性,非常方便餐桌的集中管理;
    2. reservation表是用户预约的集合,所有的预约在该表中被动态地管理,对于预约的集中管理提供很大的便利;
    3. 用户在订餐时,首先根据就餐人数确定餐桌类型,结合就餐日期筛选“预约”表,得到空余的餐桌数目,从而安排新的预约。而“取消订餐”,则可以直接在“预约”表中操作。
      以上设计对于餐桌和预约的维护都具有很强的可扩展性。


  1. 初始数据

初始共往tableset表中插入3条数据记录:

10张座位为4的餐桌;

8张座位为8的餐桌(可扩充2个座位);

2张座位为12的餐桌(可扩充3个座位)

2. 主要服务:

  1. availableDinnerDate——获取有效订餐日期
    参数:(无)
    返回值:有效订餐日期与今天的距离天数(xsd:int)
  2. checkContact——检查联系方式格式
    参数:联系方式(str:xsd:string)
    返回值:格式是否正确,取1或0(xsd:int)
    说明:只支持国内的手机号码格式
  3. availableTable——根据用户给出的信息查询可用餐桌
    参数:日期(date xsd:int),就餐人数(total xsd:int)
    返回值:包含新预定id以及查询状态的组合字串(xsd:string)
  4. addContact——补充联系方式信息
    参数:预定id(rid xsd:int),称谓(title xsd:string),联系方式(contact xsd:string)
    返回值:状态字串(xsd:string)
  5. cancelReservation——取消一条预定
    参数:预定id(rid xsd:int)
    返回值:状态字串(xsd:string)
  6. inquiryReservation——查询某用户的预定
    参数:联系方式contact(xsd:string)
    返回值:一组预订记录(tns:Reservation)
    说明:返回值为自定义的复杂类型
  7. deleteReservation——删除预定
    参数:要删除的预定id组合rids(xsd:string)
    返回值:操作状态(xsd:int)
    说明:可一次删除多条预定
    三. 服务部署与客户端调用
    Demo的服务端最初由PHP脚本形式呈现,通过调用NuSOAP库将其封装并发布成WSDL。
    Demo的客户端采用网页的方式呈现,借用html/css/js技术进行设计,提供“订餐”和“取消订餐”等功能的前台操作界面。
    用户的请求通过ajax传递给后台上的一个中转服务脚本hub,该服务根据请求类型调用相应的web service,并将服务调用结果传递给前台。
    为了更加真实的模拟web service工作过程,本Demo将“DinnerB应用”和“Web Service服务中心”开发成两个独立的应用,并分别部署到不同的机器上,主要示意图如下:

图1 应用架构简略示意图
四、运行结果截图和文字说明

    1. 客户端登陆
      在浏览器中输入DinnerB应用的网址http://127.0.0.1/dinnerb,来到订餐前台,在主体区域的左侧可以找到主要的功能菜单:
    2. 订餐
      1. 点击“我要订餐”开始订餐的第一步(共两步),根据提示输入必要信息(带*的项目):就餐日期、就餐人数以及验证码;
      2. 验证无误后提交,中转服务会收集参数(就餐日期和人数),调用availableTable服务,如果有空余的餐桌,该服务会为用户创建一条“临时预约记录”,并返回该记录id。中转服务首先注册session,存放id,然后返回处理成功信息,并通知前台跳转至下一步页面“填写联系方式”,如图3。若因各种原因导致无法成功订餐(参数不合法或者没有空余餐桌),前台都将提示相应的“订餐失败”信息,如图4中因为就餐人数不符合系统要求导致订餐失败;


图2 DinnerB首页

      1. 需要说明的是,“就餐日期”中的日期选项是页面加载期间调用availableDinnerDate计算出的正确可订餐日期,这样控制了用户的可出错范围。




图3 有空余座位 图4 订餐失败

  1. 第二步,用户要在规定时间内填写其联系信息(称谓和联系方式,其中称谓选填),点提交,中转服务调用addContact为之前建立的临时记录补充客户联系信息,成功后返回用户编号(图5),用户在就餐时提供该编号,即可查询到预定的餐桌号(这是设想,本Demo暂时没添加就餐应用)。如因各种原因导致订餐失败(超时或者联系方式不正确),整个订餐过程都将停止,临时记录也会被删除,如图6和图7。


图5 订餐成功


图6 联系信息不正确


图7 填写信息超时

  1. 说明:由于订餐过程分两步进行,为了防止用户在两步之间人为地耽误过长时间,占用餐桌资源,因此设计出“临时记录”+“有效时间”机制,超时后,系统会自动终止订餐过程,并删除临时记录。

3. 取消订餐

A.点击“取消订餐”,填写订餐时提供的联系方式,提交(如图8)。中转服务调用inquiryReservation查询该用户所有的预约,成功的话,前台会列出该用户所有成功的预约,如图9;

B. 用户选择要取消的订餐选项(可多选),提交后,中转服务会调用deleteReservation删除对应的预约记录,取消订餐成功。为了安全考虑,该页面具有一次性属性,切换菜单或者删除不成功都无法重新回到该页面。

图8 取消订餐——填写联系方式

图8 订餐记录 图9 选择要取消的订餐记录

五、总结

WSDL为web服务提供了详细的接口说明,实现了服务的可阅读性,方便了服务的传播。在此之前,自己一直是一个web站点开发者,自己写服务自己调用,无法体会服务传播中的问题。

大作业给了一个加深WSDL理解的机会,由于自己在web方面的技术积累,做起来可谓是轻松加愉快。于是重点都放在了对WSDL具体实现的学习上。非常要感谢前人做的工作,NuSOAP库使得自己不用再担心去操作WSDL语言,而可以坐等自己的服务被翻译成WSDL接口文件。