00:00
我们把这个页面,我们把它复制一份代码零五。然后呢,我把这个页面呢,我把它打开。呃,打开之后呢,在我们代码零五这个页面上啊。我把我们的水果库存啊,类似于水果库存系统的那个界面啊,我们一起来把它画一画。啊,一起来看一看。首先呢,我这边有个DV。首先我就每D我想画出来的一个效果是什么样子的呢?来。大概是这个样子。这是我的页面。我在页面的中间部分啊,会有一个div。然后在这个里面呢,我中间有一个表格,这个表格展示的是我的库存列表。它所展示的是我的一个库存列表。OK。差不多啊意思也就可以了,好,然后呢。然后呢,上面呢,我们这边有。
01:01
请叫请输入查询关键字啊,可以把它加进去,当然现在如果不加也没有关系啊,也没有关系,先不加吧,简单一点啊。呃,中间是一个表格。啊,中间是个表格,然后呢,我这个当中,比如说有名称啊,单价啊,数量啊,小计啊,包括最后的总计啊,哎,有这么一个类似于这么一个布局效果。那行,咱们下面一起来把它写一写。首先我在外面有个D,没错。这里面的divp我先不要,咱们一步步来啊,大家看我一步步的一步步来来来来演示啊,这是个div RP contain,好,D在这。好了。呃,这个body我把它留着,这个div我也把它留着,然后呢,这个flu我直接把float放到div里面去了,行吧,同学们,我使用相对布局,所有的div全部向左浮动。这些全部删掉。OK。那么当前的这个,我想看一下它实际所占据的地方,我们可以把它的border挑出来。
02:05
报在这我把它改成一像素行吧,同学们运行一下,哎,这个蓝色的框框就在这边了啊,居中的吧,居中没有问题啊,没有问题,这个背景颜色暂时先取消掉。哎,我们会一个蓝色的框框。我们所有的内容全部放在蓝色的框框里面。好,再来。下面呢,我在这个地方。我在这里呢,我再来写一个DV。杠D。ID,这个叫div杠,Fruit杠,List。啊,我就写这么一个D。然后在这个div里面呢,我来写个table。ID,我我也给他个ID啊,这个叫TBL杠。贴叫table吗?那么这个table里面呢,它可能有一行T2。TR这边呢,我给了一个叫TH。TH。比如说第一个名称。
03:02
好,Can you see。单价。呃,咱们要不就写个不写库存量啊,咱们要不写个数量吧,啊,后面再写个小G。最后再来一个操作。就这样的。然后呢,我们这个table里面有一行一行啊T2。好,TD。OK could you see。OK,那么回到这边来,我们第一个比如说苹果。五块二十一百。好,这边暂时咱们一会把删除小图标把它放进去。好,这是一个。CTRLC再来。苹果。比如说西瓜。三块,那这就60吧。菠萝。四块25故意抽成100啊,菠萝还有叫榴莲。
04:03
6.3块20或者30改成90。好,就这样子。那么最后一行,咱们再来一个总机行吗?同学们?总计。那总经理这个TD你要把它合并起来。是吧,比如999啊,这个合并是1234有四个。所以我们写一下column。Column。等于四没错吧?行运行一下。好,这是个表格,那表格我们可以把它的边框可以把它调出来,按照我们前面学的理论,我们这个table上面可以写个board是吧,同学们。现在呢?我统一的全部使用样式表来进行修饰。啊,我使用样式表来进行修饰,那这边的样式表呢,我就不再写在这里面了,直接把它剪切掉。我把它专门的放在一个样式表文件。没问题吧,同学们。好,Hif。好,把它放在CSS文件夹,然后下面一个叫零五.html。
05:03
就这样的。好,所以呢,我得准备一个。CSS。写一个。零五.css。好,然后呢,我把内容把它加进去。感觉粘进去。好,那我把它放到右边。放到这边来。然后呢,这个把它放到左边。表示引用它。那行,我们再运行看一下来。这个蓝框框没有了。蓝框框没有,就说明这个样式表没有引用上去。哪里写错了?哦,这个地方CSS是吧,贺这边写错了啊,再运行一下。哎,这样蓝框框就有了,没问题。好,下面我要说的是这个表格的边框,这个叫t BL float,所以回到这边来,井号t BL float。
06:01
那么我把他的包的e PX solid灰色的线把它显显示出来。好,现在我再来运行一下,把光标放到这边来啊,一定要随时保存,其实我一直在按这个CTRL加S啊。再运行一下,你看这个灰色的框框就出来了。呃,我把这个,我把这个table。我让它的宽度把它设置为百分百。百分百,请大家看一下啊,我设置为百分百。现在请大家看一下效果。哎,他跑到这边来了是吧,跑到这边来了OK。好,那么其实在我们这个table外面,我套了一个div。啊,其实我套了一个div在里面。我把这个t BL float百分百我已经设置好了,但是同学们大家会发现啊,这个table它只有外面这个边框。它内部好像没有边框是吧,咱们可以把内部的边框也把它写出来。
07:02
这个表格。我这边写个逗号。表示这个遵循下面的样式。然后呢,后面的呢,空格T2也遵循这样的样式,以及它里面的T也遵循,以及它里面的TD也遵循这样的样式。我们再来看一下,刷新一下。你看这样它是不是就全部都会有边框了。啊,这样就有边框了,好了,这个里面的宽度,你看这个太难看了,这个名称怎么会是我哪里写的不对吗?怎么会显示这么宽呢?苹果。TH。TD没有问题啊。他怎么第一列显示这么宽?啊。第一列怎么会显示这么宽呢?好,我们可以设置一下它的宽度,所以。
08:00
所以我在这边我再来写。点。呃,我们总共有五列,那默认情况下咱们W20啊,宽度20%。Why does?20%。然后我们可以在这边使用这个类样是吧。Class。W20。Can you see。单价。数量。小鸡,最后一个可以不用加啊,剩余的就是最后一个。那行,我们再来试一下。有问题啊。有问题的。因为这个名称一下子拖这么长,我就感觉它是有问题的啊,要不然正常情况下它不会有有有这么长的一个效果的啊,帮我看一下,是我那边复制粘贴有问题。这是一个table table那边有一行一行,这边有TH。哪里有问题,同学们。这样我先把这些先全部都删掉行吗?
09:01
删掉啊,只看只看这一行运行一下,那说明第一行就有问题。是吧?我们来看一下啊,把它粘进去。第一行看一下。TR里面有个这边有结束。TH操作我感觉没啥问题啊。我只设置这一个,我们再来看一下。这个名称为什么会这么大呢?啊。W20肯定是没问题的啊,刚才没有加的时候,他就是他就是这么大,现在我把它加进去之后,应该就是变成正好才对啊好。这个是DV。我把这个D把它展示出来看一下啊。稍等一下啊。井号,他这个第二位。这个div我把它的wide设置一下。设置百分百,然后波的我看一下它的范围是多少啊solid red把它设置红色的框框。
10:05
保存一下。再试一次。红色框框,没错。这个名称。名称会这么大?哪里啊?我哪里设置80%啊。哦,在这呢,同学们。是这个wide引起的。我之前写的是这个table,它的wide是百分百。就导致了所有的TR呀T呀TD啊,它的宽度都是百分百,所以默认情况下第一个宽度就是百分百了。行吧,同学们啊,因为这玩意儿导致的。所以呢,我单独的把它再拿出来一份QC。单独的给他设置一个宽度。从这到这剪切。把它放到这,能看得懂吗,同学们?就是表格里是百分百吗。然后然后表格以及表格的行,表格的列全部遵循这个特性吗?哎,这样就没有问题了,同学们再运行。
11:09
哎,终于知道问题所在了。是吧,这样我们的表格就出来了。好。再来。你这个单元格和单元格之间是不是也有间隙啊。那我们要把这个间隙也要把也要把它去掉。啊,我们需要把它间隙把它去掉。首先啊,我先把之前的红框蓝框先把它去掉零。这个不能去啊。这个改成零行吧,同学们,因为边界我们已经找到了嘛。再来运行一下啊,这样是没有问题的,我们把这个合并,这个叫单元格的边界合并。呃,合并怎么写呢?我们就写在这里面。他有个叫波的。叫collapse cops。蒙对了。SAP。S这个单词的意思叫合并,叫边框合并。
12:04
我们再来刷新一下。你看他这个线是不是就合起来了。啊,就全部把它合起来。再来你这个格子里面这个文字啊,不是居中的,咱们把它改成居中,所以我们就直接在这边写,叫text,不叫叫text叫SAN。我们再来刷新一下,你看他文本就是居中的了。然后这个行啊,实在太丑了,每一行。我们把它的高度把它设置一下。比如说在这里面或者在都可以啊,我试试在table里面试一下。Flyingheight。28PX我们试试看啊,看在这里面写行不行,刷新一下是不是也可以啊,一个表格里面所有的行高都是28像素。还有这个里面的文字。呃,第一行的文字咱们就就就不加粗了啊。我们所有的文字size,我们把它改成16PX。
13:01
Fo,比如说family。Family。我们把它改成黑体。啊,比如说wait wait,我们把它改成light。啊,就是不是加粗,反而是变细的。然后呢,这个文字的颜色看了。文字的颜色也不要用黑色。用一个浅黑色是。这个差不多啊,要不就是用这个颜色吧,这个感觉有点偏紫色是吧。或者使用这边的颜色,使用这个颜色。要这个颜色啊。用这个颜色。比黑色要稍微浅一点点吗?那行。咱们再来刷新一下。应该有一些小的变化吧,这个字它不是那种深黑色啊,它是个浅黑色。我们把这个表格再往下再拽一点,把表格再往下拽一点。
14:03
也就是这个table,我们怎么写啊,同学们。Marin它距离上端,比如说我们距离上端也差不多有120PX可以吧。那我们刷新一下。加他是不是就跑到下面来了,就这样这个表格它是不是独占了百分百,这个div的百分百啊,我们不要这么宽。我们可以把这个table再来设置一下。这个贴呢?在这啊,这个table呢,宽度我们把它改一改,我们不要写100%,我们把它改成60%。那这样呢,它就变成60%了,然后再把它偏移20%可以吧。这样他就能居中了。MARIN20%。我们再来刷新一下。对吧,这样就把它挪到中间了。啊,这样就能挪到中间了,好。这个时候呢,我再把外面的divv DV contain。啊,第container,我把它的背景颜色把它加进去,Background。
15:01
Background。哎,我给他个颜色。我们这边颜色最好浅一点。比如这个颜色。或者大家喜欢偏冷一点的颜色。这个颜色。差不多意思一下就行了啊。好,放到这边。好了,那我们再刷新一下。那整个这个div是不是就是颜色呀,外面的body的背景色,你可以把它改的深一点。薄的,咱们可以把它拿出来。那我们再刷新一下。哎,它就变成这个效果了是吧,同学们这这个表格就放在中间了。小图标,我们也可以把它加进去。我们之前做过这个小图标的。小图标应该是在。这里面。素材。不在这里面吗?
16:00
在代码里面。Htl images,就这个玩意儿吧,You c,我们再拷贝一份。发到我们今天这个里面。一没惊喜。好把它粘进来。然后呢,我们可以引用一下这个小图片。回到这边来。也就是这个地方。我们写个。S。Image-delete.jpg是吧,然后它其实也是有样式的。啊,我们就不要在这边写Y了。啊,我们就不在这边写了,我们专门给他设置这个小图标嘛。好,这个我写个class叫delete image,行吧,同学们。叫delete的image,因此这行我就直接拷贝了啊,CTRLCCTRLV。V。V,那我是不是差一个类样式啊,差一个delete image这个类样式,所以回到这边来补一下回到这边来。
17:00
点他。那么图片大小,比如说我们这个行高是28,那我就把它设置为24PX。高度也是24PX。就这样的。我们再来看一眼啊。回到这边来,再来运行一下,哎,这个小图片就把它放进去了。那这个页面的效果,咱们可以先简单的先先先做成这样啊。其实样式有很多,咱们说实话,咱们只学了一个皮毛。啊,你不能你不能够就像这个学这个前端学的学那么专业是吧,因为咱们是倾向于更更倾向于要做后端啊,所以这边其实咱们只学这个皮毛而已。好,这个效果咱们已经已经把它显示出来了。当然了,还有其他的一些样式,比如说你这是个div嘛,你外面这是个div。有些时候,我们想把它变得好看一点,我们可以把D变成圆角。这个这个棱角不要显得显示的太太尖锐。啊,其实也可以的。比如说我们这个d container。
18:02
我们这边有个叫波的。叫。哎,应该是蒙对了,给他八加速。我们来看一下。在运行。好像不行诶。是吧,他没变。让我来看一下啊。播的。叫red。播的叫。应该就是叫啊,记不清了,查一下吧。嗯,让我来找一找啊,搜索一下吧。轮廓是吧,轮廓。咱们跟同学说轮廓在这。如果没有诶。边框。直接搜叫red。
19:01
指的是半径的意思啊。没收到是吧,嗯,没收到。不行,既然说了,记得把它调出来百度一下。我记得是叫border red啊。接着抒情。For。我们可以把它设置为比如说多少多少像素。啊,设置为多少多少像素应该是可以的啊,我们看一下是不是我没有把它放在谷歌浏览器里面去看啊,当前是不是IE这个它这个不支持。叫啊,因为我在这边运行要稍等点错了啊。回到这边来,回到HTML啊,再再CTRL一下B。还这个没出来是吧,那行吧,咱们用谷歌浏览器看一下。选中它右键。打开方式,谷歌浏览器。有的吧。它是有这个圆角效果的。呃,这个页面呢,咱们暂时呢,这个页面呢,咱们暂时先写到,先写到这个程度,你可以再做一些精细化的一些一些一些一些操作,比如说你这个是表头嘛,既然是表头,你可以把文字的字体设置的大一号。
20:11
啊,也是可以的。
我来说两句