00:00
我们继续来上课,那么上节课呢,我们制作完了我们这个精品文章推荐啊,那么这节课呢,我们再来看一下,我们再把我们下面这个精品相册做了,那么同样精品相册跟精品文章中间呢,还有一个广告的这么一个站位,对吧,那么我们再把它也来做一下啊。那么先给他这个广告的站位,我们先给他加上啊,在这里边,呃,我们看一下啊,编成一些精品文章在这里边,对吧,那么同样我们给了一个广告的单位。广告。单位好吧,然后这里边给他一个div。然后class依然叫ad对吧,然后M杠凹以及W-幺二。零零好,那这个时候我们先看一下我们的这个效果来刷新一下。OK,有了没问题对吧,那同样这个外层的这个底部,我们应该给它加大一些,对吧?所以在这里边我们再去看一下我们的这个广告,这里边的拍顶值啊,拍顶上下为20,上边为20左右为零,下边为30 OK,加大一些。
01:12
好了再来刷新,OK,没问题,那接下来就是广告位,那广告位再往下呢,就是我们的下面这个精品相册了,对吧?那精品相册这里边其实跟这个广告位这个头部差不多广跟我们这个编程语言这块就是精精品文章推荐这个头部差不多,对吧,你看。是不是也是这样的,只是在这里面多加了一个什么一个这个标签啊,所以呢,在这里边。那我们再写一下啊,把这个慢这里边找到咱们来看他那头部我们是怎么写的,编程语言是不是在这儿。对不对,哎,那一样,我们把它拿过来啊。直接放到我们这个底下来啊,这个叫做。精品。相册推荐。然后这里边少一个结束的div OK,这几边已经有了,这咱们这个呢,不叫这个编程语言,而是叫做精品相册,对吧。
02:09
精品。相册好,咱们来看一下啊,小心。OK,基本相册有了对吧,有了以后呢,同样它底下也有它的这个内容呢,这个内容我们就正常写我们的对吧,该叫div的叫div啊,然后呢,在这里面。我们还有一个什么呢,咱们来看它这里边啊,它这里边是不是还有一个什么,还有一个叫什么叫做这个我用它来选了啊,你看是不是还有诶哪去了。啊,您是不是还有一段这个普通的一个文字啊,对不对,所以这么还有一个这么这么个标题,那我在这里面再加这么一个标题啊,比如说在这里边我们再给他一个标题叫做呃,Div。给他一个class,叫做呃。上册精品相车mainanin-one吧,然后杠sub b sub s。
03:05
T。TR。好了,这是我们的副标题啊,那副标题这里边我们把这个内容给他拿过来。Control。Said。把它粘过来好,粘完以后现在我们再回到我们自己的页面来看一下,刷新一下。在这里。这个副标题怎么在这里呢?嗯嗯嗯啊,我给错位置了是吧,我说怎么在这里呢,来。在这的副标题是吧,好,给它放到这里来,再重新刷新一下。OK,没问题对吧,这里面我只需要做一件事,什么事啊,给他来一个takes center,让它居中就可以了啊。好了居中了,居中完往下再往下就是我们的相称的底部了,对吧,也就说这里边我们给他一个class ma-p hoa。
04:04
好,再来杠Bo To Button啊,这是它的底部内容,那么底部内容这里边一样先给它一个包,先给一个边框啊,我们先来看,那现在这里面什么都没有,我们给一个边框呢,效果也不大啊,所以我给个A先来占位,这是它底部的内容,那么这个内容呢,我可以让它距离上面远一点,所以这里边M杠凹凸,我们没有给马的其他值是吧。那我们就自己来设置吧,来在这里面。继续注释,加上这块叫什么叫做这个首页,这个相册推荐对吧?好了,那这里面应该找到这个点它,然后给它一个这个R间Mar上下,比如说为十上下为20啊。上下为20。然后左右自动a auto。OK,那他下来了啊,下来以后接下来这里边这里边要有什么东西,我们就来分析一下了,你看里边应该是有一个div div分成左右两部分,对吧,左边呢,有这个这么个东西,然后还要有什么,还要有这个呃。
05:11
书对吧,然后右边呢,就是我的这个文本串了,没错吧,那OK,那也就是说在这里边我需要给两个div啊。那返回到我们这里边来,在这里边给他一个。Div,然后再来一个div,那么这个div呢,我们给它起个class,比如说叫做in,嗯。Bo不是Bo,呃,是E啊,然后杠,比如说这个叫做left。这里面再来class man杠,嗯,Phone杠。对吧,那这个就是FR,这个呢,让它变成FL。对吧,哎,变成这种形式的啊好了,那接下来我们再来看。
06:02
这里面现在有两个元素,一个FL,一个F2,对吧。那这里边呢,先是有一个图片的image,比如说当前目录,呃,Image下边。图书拿过来,然后呢,还有什么,还要有一个文本的对吧?嗯,那div div图片,那这里边我直接再给他一个文本啊,再给他一个div,就是说这个叫做class,等于man。杠one杠,这个这个image里边的怎么样。Test啊,或者直接放test也可以啊,啊给它简单一点啊,那OK,那现在这回这边呢,我们还有两个标题对吧,所以这里边嗯,我再来给两个div。叫做呃,Manin。杠,One再来杠,叫做T。
07:02
一个副标题,我看看啊,这里面OK,一个副标题,一个子标题吗。div.man杠。One-sub MIT。TATLE。这里边我们先给他一个A,这里面我们也给他一个A。这个带不带链接呀。该链接我们还要给超链接对吧,上面标题带这个不带,那OK,那标题这里面我们还要给他一个链接啊,所以这里面应该是一个A标签里面加一个A啊好了,那现在我们再来看我们的来刷新。OK,都在这儿呢,对吧?这两个AA也在呢,那么此时呢,由于它们两个是浮动的,浮动的,所以它的负元素,也就是它找不到里边的这个子元素对吧?所以这里边我们需要给他一个O了,等于hid hidden让它能感知到里边的子元素,那么这个时候我们就给它放大,OK,这没问题了,那么一左一右两个对吧,包括我两个也其实都可以,不用说一左一右我两个也都可以,干嘛呀,FL啊,都可以FL让它变成左就可以了啊。
08:10
好了,那么接下来我们开始进行设置对吧,那设置的话咱们先来看啊,在这里边。咱们要看人家这个啊,人家这里面也有对吧,图片呢,人家也是400乘400,那我们这个图片呢,我们还没有设置对吧。所以我们给它设置一下啊,在这里边的图片也就是。嗯。Left里边的这个图片吧,那OK。嗯,把它拿过来啊,CTRLC。来设置。点它里边的一面,它的这个宽度应该是多少,400像素我们给它设置对吧,那么同样它的这个left我们也给它设置为400对吧,Manin。那就直接往这写了啊,叫做点man。啊,不行,单独写吧,因为一会儿我们还要给他做那个定位manin-phone-left给他的W也变成400PX,好了,那现在我们再来看刷新五的页面。
09:09
OK,没有问题,没有问题以后,然后们这里边我们还需要干嘛,是不是还有个文本信息啊,文本信息我们应该写的零一是吧,看它这里面是不是写的零一,OK,零一,然后呢,我们去调它的样式,也就是这个加号CTRLC。然后在这里面。这个文本我们给他一个叫做呃,BDRR不用了,直接给背景夹色吧,那个格给他这个。颜色变了颜色以后,现在我们来看啊刷新。是不是在这对吧,那么它默认是满屏宽的啊,那我肯定是不需要的,对吧,所以我先不管它process,给他定位一个absolute,然后这个呢,那我也给他做一个定位叫做po。Po等于啊,然后这个时候定位的时候是不是就可以left为零对吧?诶怎么切回来了。
10:01
好了,刷新一下。哪去了?没过来是吧。Left为零,Top也为零,好了。现在我们来看啊。再来刷新,OK,在这里呢,对吧,零一有了有了以后接下来干嘛?我们给它进行放大啊pad呃ing拍顶让它上下为。20左右为40。让它大一点,然后呢,里面放的个size SI z,比如说它为25PX c color为几号FX白色。刷新OK,有了对吧,有了以后它的图片本来是比较高的啊,所以这里边我应该是让它为40为20啊,上下为40左右为20。这个上下四太大太大了,30吧。或者是40,就40,这个为30。
11:00
OK,没问题,然后背景颜色它就变成透明色,那op给他一个点三。Put。有了对吧,有了以后接下来呢,咱们来看啊,它的图片不是这样的,而是什么超出这么一些些的对不对,哎,超出了一些些,所以这里边我们也给他一个叫left呢,我们就给他多少呢,比如说25像素,而top呢,我们给他负20,那么上去。呃。再来刷新,诶有了对吧,由于我这里边给他做了一个什么,给他做了一个超出部分隐藏,对吧,所以呢,他这个时候他在干嘛,他才是让这个家伙。你看我往上去它就显示不到了啊,你看啊。这里边我们把操作部分隐藏给它去掉,大家看一下什么效果啊,找到它我们看把操作部分隐藏去掉,你看去掉以后是不是就超出来了,对吧,但是呢,这个负类是不是就感知不到子类的高度了。哎,所以这里边呢,它就冲突了啊,那要想解决这个问题怎么办呢?那这个东西我肯定第一不能给他操作部分隐藏吧,哎,但是不给他操作部分隐藏呢,它就没有效果啊,所以我们要给他高度啊来把它。
12:10
这样,然后给他设置一个高度,变成a u auto自动。看可不可以,不可以的话,我们还给它加高度,你看是不是不行啊,哎,不行的话怎么办,我们就需要给它加高度,但是加高度的由于它里边的所有东西。你看啊,这里边。我们现在找的是谁,是他?对吧?哎,它这里面的这个所有的元素都是浮动的,你看它是浮动的,它也是浮动的,所以它将感知不到里边的这个高度,对吧,那有什么办法可以去解决。我是不是也可以让它浮动,但他要是一浮动的话,就会遇到一个什么问题啊,来你看float,呃,L浮float left,如果它浮动的话来刷新。这是没问题了,但是呢。好像可以了是吧。但是什么呀,我们这个高度就不对了吧。
13:00
来看。这个他的。是最外层的对吧。哎,这里边我们给它加了一个浮动,那加了一个浮动以后,它确实可以感知到直类的高度,但是它没有宽度对吧,所以这里边呢,我就这再来WDTH宽度1200PX。走,你。这个再来看,诶。好没问题对吧,那行,那就这样,那现在我这一个元素是不是就搞定了,搞定以后同样这里边啊,我让他pad拍丁,我上下左右都为20像素啊,再来刷新一下。好了,这没问题了,好原头摇头干嘛往下一点对吧?哎,往下一点以后,那这个left咱们同样啊,给他一个build啊,包着一像素实现的红色,我们再来看一下这个红色的这个区块。OK,在这这是没问题的对吧,那好,那最外层的蓝色,最外层蓝色我们靠borderder来给它突出的,对吧,那我就不要了啊。好了,然后再往下来这个红色我们也做完了,红色呢,我们也给它取消掉。
14:05
取消掉,取消掉以后再往下来盖子什么盖子是我们的右侧的内容了吧,那右侧的内容找到这个慢,右侧内容是谁啊,右侧的内容是不是就是这个。这两个东西对吧,这两个东西是我们的这个它啊。我们再去设置它。就它首先他先给他一个什么,给他一个包的移像素,实线的红色,我们先把它的位置啊,和这个距离也都调好对吧,那它的位置肯定是让它再往后,所以马刚left,比如说我给他50像素。啊,往后写呢。刷新模糊了对吧,然后同样这里面再来这个。Gin。Top也为50。好了下来了,对吧,你看人家原来的这个位置呢。是不是也是往下的对吧?好了,我们也是往下的啊,50小了,我可以干嘛再加大,那我们先不管它了,然后这里边的内容我们开始往上加,第一个A叫做什么PHP运算符,当然这里面随便写啊,因为后期我们都从数据库里面查出来,都会给你替换的啊。
15:12
然后再往下呢,在这里边的内容呢,我们把这些东西给他拿过来啊。好了。放到这里面来,OK,然后我们再回到我们的页面来刷新一下。在这儿呢,看到了吧。哎,为什么在这儿来了,因为。我没有给他浮动吗?看一下。这里边的这个。这是副标题,这是这个主标题,这是它的这个元素对吧?哎,这里边我有没有给他浮动,我也是,我是有给他浮动的,但是这里面的内容由于是内容过长,我没有给它设置宽度,对吧?所以这里边我给他设置一个宽度,那个是400嘛,对不对,那个宽度是400的话,那这个宽度我也可以给他加一下啊,这个叫做这个。
16:00
Red,这个比如说这里面wi with你是400,我这个比如就600或者500吧,啊500就够了啊。再返回来。核心。好了,你看是不是上来了,哎,上来以后接下来一样,我可以给他干嘛,再进行填充一下对吧,或者是让他往后一点啊,往后和填充来往后的话,那就是这里边,比如说我给他100,然后呢。哎呀,那何必给他100呢,反正咱们给他500嘛,对不对,然后这里边我们给他SR嘛。F2,让他靠右吧。刷新。OK,到右边来了对吧,但到右边他俩距离是不是太远了,所以我问他在干嘛呢,在距离右边给他多一些啊,这里边。叫做F。好了,再来刷新一下。OK,这个没问题对吧,但是我想想啊,他要是靠右的话不行,他要靠右,因为你是这样的啊,为什么我说不行呢?你看我们下面这一张,这一张是图文一左一右对吧,而这下面一张呢,是文图是不是一左右,哎,所以这里边最好我们还是别这么给了。
17:12
好,别让他靠右了,还是给他money left吧啊。Magle。然后这里边还是让它FL吧,啊,都让它向左一会,我一复制就好了。方便我下一个的复制啊,就是这个意思,OK,就这个位置,然后Mar top的话,我再给他加一些啊,然后这里边来Mar top,我给他80。张心,OK,下来了,下来以后接下来调里边的怎么样文字样式对吧,那这个文字样式应该是这里边的A标签,那也就是在这里边的A标签,我们要给他FT fo-size。位置就位置吧,加粗,然后再来front个size,给它30像素,然后c color给它来一个blue蓝色对吧?那现在我们再来看刷新,OK,第一个搞定,然后接下来什么里面的内容对吧?那在里面的内容之前呢,我们先不管它,我先给他Mar marin button,给他30像素,有距离,底部要有30像素,给底部的东西顶下去。
18:15
他是个A标签,我们应该给这个。它才行是吧,等C。算了,别给他了,那它就不要了,我们下面是不是还有一个呢?哎,用用它来控制吧,来,那这个就不要了啊,不要了以后用它点它给它一个什么呀?Mo pop为30像素,这个时候我们再来看。走,你。没问题对吧,然后开头我们也可以给他干嘛,空两格K杠,嗯,In等为re。走,你是不是也过来了对吧,然后这个30可能有点大呀,我们给他20万啊。小鸡,好了,那我这段内容是不是搞定了,搞定以后我的这个边框这个500我可以再加变成600啊。
19:00
OK,也不会除去对吧,然后呢,这个边框我们给它注射掉,那现在咱们来看我这一个元素是不是就搞定了。对吧,哎,这一个元素搞定了,那我们就跟其他元素做一下对比吧,你看这里边。是不是也是这样的?是吧,那接下来呢,接下来是不是就是复制再复制这几个,那也就是说啊。这两个。找到我的底部是不是它呀,哎,不对,底部是整个这个是吧,整个这个我给它CTRLCVV。两个三个四个五个六个,好了六个啊,那么接下来就调第二个,第二的话,我只需要干嘛,把他们两个位置一颠倒。是不是就可以了,那这个时候我们来看。刷新一下。来,你看这是不是一左一右,一左一右对吧。然后同样这也一左一右,这些都是什么,都是那什么了吧,所以我需要干嘛对应的进行调整,还有这个的第二个也让他。位进行一个。互换啊。然后。
20:01
还有这个位置也让它进行一个。好,当他互换完以后,我给他一个FR吧。这个也给了一个F2。F2是不是就向右浮动啊,这也来一个F2好了,这个时候我们来看刷新一下啊,来吧,你看一左一右对吧。一左一右。先在先是这对吧,一左一右,然后这一右一左对吧,然后再一左一右,再一右一左是不是都OK了。是吧,那剩下的这些像这些标准那就无所谓了,对吧,那这第一个,比如说你看,呃,这是left。在这开始是吧,这里面第一个零一,这没问题,第二个是不是就开始是零二。然后再往下来。这是第三个。零。三。然后。零四。
21:02
零。五。然后再往下还有一个是零六,OK,搞定好了,那现在你来看我的整个首页是不是就搞定了,你看543,然后二。是不是都可以了,对吧,那当然啊,这个高度我觉得这个定位的高度啊,定位高度差不多是吧,跟这个。啊,是不都差不多了。啊,都差不多啊,那好了,那这块不就搞定了吗?搞定以后接下来是不是还底部还有最后一个单位的,那最后一个单位的就直接给他一个什么,直接给他个ad是不就可以了,那就拉到最上面。这块啊,最后一个广告单位直接给他一个CTRLCCTRLV,那现在咱们来看我的首页是不是搭建完了。诶诶诶在这呢,啊,它在这呢,为什么?因为三本元素都浮动了,对不对,所以这里边我想给他清除浮动,我们再给他一个C。点C是不是不动走,你来下来了。看是不下来了,那现在是不是搞定了,哎,好了,那这都搞定了,我们目前首页是不是就搞定了,哎,那OK,那大家今天要完成的是什么呢?就是你参照我的首页的制作,你要把什么呢?把这个列表页。
22:13
看到了吧,这是我们的列表页啊,把六表列表页做出来,然后还有什么呢?还有我们的这个。文章页啊,文章页我们也要给它做出来,那文章页完全还有什么呢,还有我们的这个。登录页面何老,这我们登录页面以及我们的注册页面啊,通通按照我们今天制作首页这个方法啊,给它做出来首页是最难的,那么我带着大家已经把整体的首页局都给大家做出来了,对吧?那么大家就参照我们整体的首页布局,把其他的页面做出来,那么另外呢,我们还需要什么,需要一个个人中心页,个人中心页里面有什么呢?我们可以参照我们的PPCMS自己来去设置啊,注意这个里面要求的是大家自己来去做什么。做这个设置啊,就说别参照我的了啊,咱们来看。
23:03
比如这里边啊,我给大家访问一下,我们在第一课里边,我是不是给大家安装了一个这个CS对吧,那这里边我们来访问一下叫做。Localhost下面的PPS。没有吗?Localhost下边的。疯了。那边的零一。来自零一。PPS,好了。在这里面,我们找到它下面的index。是home。Mean。登录。嗯,PPSPPS。分三。谁了?好了不保存,OK,然后我们去站点首页,咱们看站点首页里边我们是不是可以再登录啊,对吧,登录一下子我们忘我忘了用户名了啊,随便再创建一个吧,比如说这个来一个大熊,密码也是大熊,然后在大熊。
24:14
AI的a.a你。AA。然后昵称你好吗?然后同意点击注册,这叫大熊啊,操作失败。为什么?我们注册了一个我的密码。已经被注册了是吧,那OK用的密啊来ADMN密码ADMKY。密码叫啥PP3S吗?KYTDB。登录。密码错误。完了还是注册吧,忘忘了密码了啊。来叫做大雄密码。诶,他说已经被注册了。那我登录一下。大熊大熊,然后6D。
25:02
RT2好,点击登录。OK,登录成功好了,成功以后你看是不是进到这个个人中心了,哎,你的个人中心里面有什么,第一你可以干嘛呀,管理他的这个,修改他的信息啊,就说把他这个信息这一块可以显示啊,可以显示可以干嘛,可以进点进进行修改,明白吧,哎,你就你这里边有什么信息,有什么信息你就给他什么信息,对吧,包括可以修改头像,明白吧,哎,你不需要做这个页面,你不需要做这个样子,你可以都在一个页面中体现也行,还有什么呢?还有一个在线投稿,就是你可以发表什么发表文章。看明白吧,还有这个功能以及什么呢?还要有一个这个评论的功能,也就是说你都给谁了评论了,这个记录也要做显示,也就是说这三个记录明白吧,哎,那你在你的页面中,只要给我体现出个人中心里面只要体现出这三个就可以了,第一个是干嘛可以修改个人信息啊,第二个呢是干嘛呢?是可以发表文章啊,可以在线投稿啊,然后第三个呢,是我们的这个什么,你给别人历史的回复啊,就是给哪哪篇文章做了回复啊,都要有这三个啊,这个是咱们的个人中心啊,那OK,那我们今天的内容就到这里。
我来说两句