00:00
好,我们继续来上课,那么这节课呢,我们再来看一下我们的这个用户列表啊,那么用户列表这里面呢,它给你分为了什么,你看啊,现在是有一个这个这么一个元素,这是一个div,对吧?上面里头放的是各式各样的表单,但是这个表单是脱离它原来的那个效果,对吧?然后下面呢,依然是我们的表格,那表格呢,有这个表头,还有这个表结尾,表结尾呢带着这个分页的效果,没错吧,那好,那我们在这里边也一样啊,也给它做出这样的一个效果来,那这个叫做用户列表,那在这里边。所有跟用户相关的,我是不是都放到用户的目录里面对吧,那在这块我就直接来个HML啊,叫做这个用户列表了,那叫user list啊,User list list。好了,那这里面还是先是H一点,H1叫做用户列表,然后呢。再来一个HRHR完事以后这里面会摆一个div对吧,Div完事以后是他的这个table啊。叫做tab Le table啊好了,那这个div呢,我们给它起名,因为它做搜索了嘛,我就要给它glass叫search了啊,然后在这里边table这里边,我先给它分成t hier he t hier,然后还有这个。
01:10
TT body以及TTT,好了,T里面有个TRTR里面有个TD,这个TD要进行什么Co cos PN,但多少列呢,我还不知道啊,一会再说,然后在这里边t hand,这里边我们先去写,这里边依然是TRTR里面是TH,然后有编号,对吧?编号用户名,然后还有什么,还有这个头像。然后诶。用户名头像,然后编号用户名头像性别年龄,然后权限注册时间操作OK,我们给这么多啊几个123456788个对吧,那在这里面我们也一样,它是几个,它就是跨八里合并。好了,那我先把它写上来啊,那这里面来个词盘标签叫做go。
02:02
就是当前这个这个多少条是吧,共比如说给他来个25条。对吧,然后当前是一杠。每页显示五个,就一杠五呗,啊,然后后面再来一个A标签,这叫做首页。然后给他一个两个空格吧。And。NBSP。给两个空格,Ctl cvvvv OK,最后这两个不要了,然后首页这是这个上一页。这个是。下一页这个是尾页,好搞定,然后我们先来看一下我们的用户列表,哎,不行,我们没做关联对吧,那在left这里边我们继续关联用户列表,用户列表所跳的位置就是当前目录U。
03:00
里边的user list。好了,点击用户列表。刷新一下啊,点击用户列表看是在这呢,对吧,那不行,我们应该到右边来显示,所以这块我应该给他什么T,它给它为right啊好了,这回再来重新刷新,刷新完以后点击我们的用户列表,你看是不是在这块了。对吧,但在这块是不是很难看啊,那我们就需要给他重新进行一个调整啊,那在这里边注意看一下啊,我的这个。Table够用了吗?来找到优这粒子的这里边的table是不是在这儿,Table我们没有给他这个样式是吧?啊,包括he也没有给样式,是因为这个link标签我们没有引入过来,所以它它是点点杠,然后CSS目录下边的格萝的CSS给它引入过来,引入完以后再来用户列表,好这回这一变化。哎,变化以后一样,这个table啊,我们肯定太小了,我给它这个大一点也可让它居中一下是吧,所以在这里边的这个东西,我们要给它起一个名字,就加以区分啊,这一块table呢,我们给它一个class叫什么呢?叫做user table。
04:09
好了,那在这里边。Global。我看一下我们之前的table table只设置了一个margin是吧。剩下的OK,没有什么影响,那我就不需要用user table了。嗯。这样我们不用user table,我们因为我们考虑的是什么,考虑的是我其他页面也可能也会用到这样的样式,对不对,所以我就单独给他写一个啊,所以这里面不叫user table,直接class,等于什么呢?叫做table-center的table-center也就是这个table是居中的啊,Table是居中的,同样table给他一个这个宽度啊,比如说这里边咱们来看啊,我给了一个点W杠,呃,杠杠杠这个800。
05:03
PX啊,那就是WTH,它为800PX啊,然后呢,再来还有什么,还有它的center test.test杠。不行了是吧,Table center吧,对table-center给他一个这个呃。减上下为零。左右自动让它干嘛居中啊,让它居中好了,那就给这两个属性,那现在我在我的user list里边table center有了,还需要W-800P叉好给这两个属性,那么给完以后,现在我们再来刷新。点击用户列表,OK,是在这块的对吧,然后这个时候呢,我们可以干的话,给他一些编剧吧,我看他有没有编剧啊。他是。有一些编剧的对吧,哎就是他,哎不对用户列表。啊,它整体是有些边距,它与上面是没边距,因为上面还有个div的吧,啊,那先不管它先这样,然后它外层有一个边框对吧?所以这里边我们再给它加一个边框,找到这个table,这里边我们给它来一个BOD,哎,不对,是Bo。
06:06
Border没有整体的边框是吧,那就直接来build DR啊,那在global这里边再继续加第2BUILD DR borderer我们给它移项数实现的,不对,是BRDR包的移项数实现的,九号CC跟上,好了,现在我们再来看。点击用户列表。OK,有了有了以后,现在表头和这个底部都有了,底部的内容肯定是让他去用的,对吧,所以在u list这里边,它的这个底部我们直接给他一个text杠。De,算了,给他一个class吧啊,Class等于什么?等于test刚right我们有这个属性对吧,那直接再来用户列表相用了没问题对吧,那它它也让它有个距离,比如说MMRMR1是多少我忘了啊。在在在在在。这里面。没是吧,他是P吧。
07:02
啊,PR-1PR杠一啊right的来点PR杠一,给他一个pddding-right,比如说一个四项数好了,那这个时候我们再来用户列表。OK,有一点距离了,对吧,有点距离了啊,然后他有距离以后再来看这个编号的,我们那光用编号啊,把这个名称都写全来编号这块是用户。名对吧,然后头像,然后性别年龄权限。注册RG。然后操作还有这么几个啊,那这个时候我们再来用户列表,OK,全都改变了,改变以后一样,它也要有个背景颜色对吧,所以在TR这里边,我们直接给他一个这个class叫做BGF7。给他一个背景颜色。来用户列表,OK,它的背景颜色有了,那同样你看这里边每一个是不是它还有一个这个一项数的空白啊,所以在这个table里边,我们再给他设置一个c space为零。
08:10
诱惑对吧,OK,这回没有了,没有货,接下来什么?就是这里面的每一个TH,咱们就给他一个。大小啊对吧,来找个TH给他一个pading pad in拍顶上下为十左右为20。用户列表。好了,这回是不是有了,哎,有了以后,那接下来呢,这个底部的我们也给它设置一下底部叫什么,底部是不是叫t foot,也就是t foot,或者说我们直接叫page吧,啊起名叫配给了,因为别的页面也可能也要用到什么,也要用到分页对吧,所以这里边我们给他一个class。呃,好,给他一个配角。好了点配级的,我们也给他一个。Pad in。
09:00
为十,为20。好,最后我们再来看刷新。来用户列表它也大了对吧,大了以后一样,我给他也给了一个背景颜色,所以在他这里边,我直接在这里边给了给了一个bgb。BCK啊FG,好,再来用户列表,OK,底下也有了,中间是不是开始中间内容了,那中间内容的话,在这个T包的里边,我们就开始去复制了TR,然后TD乘以一个八好了,第一个是编号为一,然后用户名,比如说me,然后这个接下来头像,比如头像肯定是显示图片的,对吧?那我现在没有图片,哎哟。来image image标签,然后给他一个是什么当前目录,点点杠上一集image下边我们给他一个这个logo吧,Logo那同样它的宽度肯定要给它缩小啊,我就直接就给他个50了啊好了,这回咱们来看用户列表。是不是就有了,哎,有了以后接下来什么性别年龄等等这些,但所有的东西在这里面都需要干嘛,是不是都需要居中的,所以test center。
10:06
用户列表是不是都记住了,哎,然后呢,在这里面继续还有什么,还有这个,呃,性别继续往而写啊性别。男,年龄20,然后权限超级管理员,然后这个注册时间2020杠二零杠二零,我就给这么一个单位的啊最后一个操作操作什么操作呢?有个A标签,这个叫做删除。然后一个竖杠,再来一个A标签,这个叫做修改。好,来。网站配置这里这里OK搞定是不是有了有了一样这个判定,我们是不是也可以给它大一点,也就是t body里的TR对吧?呃,T body里面TR里面的TD对吧?那在这里边格萝卜这里边。我看看我们给没给啊,Tbo的TR我们给了一个how是吧,其他的我们都没给过,所以这里边直接是tbo里边TR里边的TD给他一个pading pdd拍顶也一样让它,为什么呢?为十左右为20。
11:06
好,这回再来用户列表。你看是不是变大了,当然我们不可能就这么一条数据,我们可能是多条数据,所以在这里边把这个TR直接CTRLCVV。三几个了,三个四个。五个。五个对吧,在一行显示五页嘛,五条数据嘛,用户列表五条数据是不是有了,然后数表放上来是不是变成这样效果了,对吧?那好了,那它搞定了以后,接下来呢,咱们再来看啊,这个下面是有条标边线的,它的上面有没有边线我忘了,我们来看一眼啊,在这里面人家下啊下上是不是都各有条边线,对吧?所以在这里面我们还需要进行设置一下,说什么呢?也就是在这个TR的。给他一个什么包?哎,没有top是吧,那OK,我们先不管它啊,它没有border top,我们先给他吧,叫border-top啊,这个没有,一会我们得去测试,但是呢,它。
12:02
在这个TR的里边,我们需要给他一个border button,对吧,那同样格萝卜这里边再继续点border b RD border。Top等于包的。Top epx so,井号CCCC,我们先给他好了,那现在我们再来看它的这两个样式。来用户列表。哎,没加上来。TR给了一个class,叫做BGF7,然后B点距离底部移项数对吧?这距里就是底部边框移项数的边框。因为我给的是TR嘛。@一笑,说,没问题呀。这个TR怎么没加上呢?来用户列表。在这里面再来个不仅TR,还有的那个包的人的什么也没加上是吧,TR这里边。
13:02
他就好使了,看到了吧。那给我讲哪去了?这里呢?他没给我加上啊,那没加上的话也说我没看着,那好说,那就是说这里边我们不加了呗,不加给谁加呢?你给下一个加呗,我给我给所有的TH加可以吧,比如TH啊,我们给他加一个,你看class放到这儿啊,我们就放一个,你看有没有来。点击用户列表。是不是有了,那我把所有的TH组装成一起是不是就行了,哎,那TH的话咱就不用给他这么写了啊,那因为TH太多了啊,TH这里边我们是不是找到这个TH,看看这里边有没有TH。PH是不是在这我给他一个什么呀,给他一个包高epsd啊不对,是井号C好了,然后呢,在这里面我们去配置配置这种给完以后我们还可以给他一个BD啊包杠top杠。
14:04
Top等于epx so LB井号CCCC,好了,完事,那有这例子,这里边看一下啊。这个TR我们给它去掉了,只是给了背景色,这个tbo呢,我们给它加了一个什么,加了一个。Pre配吉他,OK,没问题,On top这个没有用,给它删掉。好,现在我们再来看这个表格。来优酷列表。OK,正好有了对吧,底下呢,底下的是不是也有了,哎,那现在是不是他们就搞定了,搞定以后内容区域搞定了,接下来什么,接下来是不是就它上面那个搜索条条件呢?搜索条件是什么?是一个div,那我们看在table这里面这块是不是有个设置div,那我把div也给它设置一下啊,叫做点设置。点设置给它一个宽度,宽度为少为这个800,它肯定跟上面一样对吧,然后BOD啊包一像素实线的井号CCCC,然后给他M牙键马九上下为零左右自动。
15:03
A auto,然后一样M牙切Mar-top为20像素,单独给他300。咱们再来看啊,用户列表是不是就有了啊,因为它div没有高度嘛,那没有内容啊,所以在这里边我们开始给他内容,在这里边m form,然后再来,比如说有input冒号test的这个家伙,但是只要给一给test,这个时候你看啊用户列表我的大文本就出来了,对吧?所以它肯定是什么,它肯定是缩小的才行啊。所以这里边我们先给它设置一下啊,包括它的这个box-size等于包box,让它变成什么,变成伸缩那个怪一盒啊,来用户列表这里边好了,变成关系盒这边是不是对齐了,哎,然后这个input呢,咱肯定不需要那么大了,所以在这里边我要重新设置一下,也就是search里边的input啊,设置里边form里边的input标签让它干嘛呢?但它的这个宽度为NNE不设置了啊,高度也为这个n na啊不对,N是自动啊,自动这个也变成自动a to auto。
16:06
Auto啊,自动的话就让它还原它的默认大小了啊好了,这个时候来用户列表OK,自动还原默认大小了。对吧,换过程大小以后呢,同样你看银子里边有没有加什么东西啊,有加了一些PA定值了,对吧,所以这里边我们也给它加一些PA定值,那也就是说在这个设置里边,我们给他一个pad拍顶,呃让它上下。为20左右为零,左右为十吧,左右为十啊来用户列表。这位置不就有了,看眼睛原来有这么大吗?上下15吧,太大了啊。好。然后我们开始加内容。找到我们的代码。这里边。叫什么按照用户名搜索的用户名的对吧,然后还有什么按照性别的性别,性别什么性别是不是就input ideal radio,然后叫six,然后这里面比如说写上女CTRLCVVV。
17:06
三个女男。保密好了,咱们再来用户列表。是吧,按照性别女男保密对吧,然后还有什么呢?还有这个,比如说这个后面都给他一个冒号吧,都给他冒号啊,然后以及按照这个注册时间。再来一个。注册时间。注射时间啊,那注射时间我们用的什么?下拉列表select,然后这里边放一个op。杠杠杠杠,这个叫请选择对吧,然后都有哪些时间呢?我们给一些比如说op t o,然后这里边叫做一天的ctrl c v v v v OK给四个可以了,一天之内注册的,还有三天之内注册的。三天还有什么呢?一周一周内的以及一个月内的,OK,我们可以这么几个统计啊好了,那点击用户列表。
18:01
这里边是不是也有了是吧,那这个东西啊,感觉有点不算太好看是吧,那不是太好看,我们是不是也可以调整一下,哎,那调一下,比如说这里边叫做格global继续回来,那它依然是点设置里的,对吧,SEC就设置里面form里边我们叫SE。耐克对吧,让它的宽度比如说变成多少,变成这个,呃,100吧,变成100啊,高度变成30,好,这个时候我们来看啊,点击用户列表。OK,见了吧,哎,请选择是不是这些好好了,那这些完事以后,最后是不是还有一个提交按钮,那再加一个提交按钮,也就回到这里面来,我们再点击一个搜索的啊,也就是说在这里边来个input。Input,这个叫查询。用户用户诶用户列表查询有了对吧?但这个查询肯定不行,我们肯定得去改变它才可以啊,但是应该叫sub me sub MIT input type等于sub me,他怎么没给我继承啊,不是没继承,是继承完之后我在这里面改了啊,我重新改了它的宽度和高度了,对吧?所以这里面的宽高我需要再去设置,你也可以看下原来啊,原来它这里面没有是吧?啊只有这些,它这个高度更更难看啊。
19:17
好了,那我们再来。在这里边。查询叫是吧,那也就是说在这里面的第二。ER ch点设置里边f fom,里边的SME给它的宽度,宽度也一样,让它为多少呢?让它为80,然后高度也为30好。所以再来看。周妮。点击用户列表。用户列表。我选的是谁呀,那submit呀,是input吧,哎,Type t type等于submit的这个家伙啊,好了,来用户列表OK,有了一点击查询,这个查询可以放到什么,放到这个最后边对吧?所以这个查询我直接可以给他一个,呃,等等,F floor float float啊不用他直接是在文本里面算了,还float吧,Float它right让它右不动,放到最右边去。
20:11
用户对吧。能过来吗?不行是吧,啊,因为为什么不行,因为我没有给他设置这个应该是。来,我们看一眼啊,给他一个BD1像素实现的红色。来用户列表你看。那他过来我让这个查询按钮上到最右边没问题啊O打错了啊。用户列表好,这回是不是过来了,你点击查询是不是查询的,哎,好了,那完事了,这个东西不要了啊。来用户列表我们是不是就搞定了,哎,用户列表搞定了,那接下来什么是不是就是我们的这个添加用户了,哎,那行,这节课我们先到这里,下一课我们再给大家做添加用户的操作。
我来说两句