Web前端网页制作初级教程 42.网站后台左侧布局 学习猿地原创

好，我们继续来上课，那么这节课呢，我们再来看一下我们的这个左侧的内容啊，也就是在这里边的这一部分的内容啊，那这部分内容你看首先呢，也就是一样，我们这里边就是什么，就是有一个标题对吧，剩下的就是我们的每一项了，比如说网站配置呀，信息修改啊，那我们也去做一下。找到我们的，那么我们将左侧的内容给它删掉，对吧，然后呢，这里边比如说我们给了一个HR标签，叫做后台。首页，然后接下来往下就是每一个内容了，对吧，比如说给个u Li Li Li里面我给个A。然后同样啊，大家来看这里面它也有什么，也有这个小图标，对不对，所以它有小图标的话，那我这里边。在这个A的前面吧，我也给它加一个I标签啊好了，那这第一个叫做什么叫做网站。网站配置对吧？然后呢，这里边我们先去把这个CSR文件引入过来啊，Link个标签，然后有一个叫做格global的格lo BL，不对，应该是CSS目录下边的格global的CSS，那这是一个，然后再来呢，还需要什么？注意我们这里边又需要用到这样的一个小图标，那我是不是还得去引入阿里的图标啊，对不对，那么有如阿里图标，这些图标我已经是提前都搜索完的啊，在这里边我说了，你比如说你想搜索分类，你就直接打一个分类，对吧？那么在一搜索的时候，这里边有各式各样的分类，那你看你用哪个用哪个，你就给它加入购物车，填到你的项目里边就行了啊，那么一样，我再回到我的这个项目中，回到我的项目中，因为我这里面已经添加过了，所以我直接点击复制这个代码，把这个CR文件引入过来啊，所以这里面立刻标签，然后HTTP冒号，S冒号，谢谢。

啊，不用斜线，它自带斜线。对吧，好了，这个地址也过来了，那么过来以后，接下来网站配置完事了，对吧？网站配置完事了以后，这里边有N多个啊，我们先给它复制两个三个，四个，五个，六个，七个，八个九个，我也不知道有多少个了啊OK，我们先对应的一个一个改啊，比如说第一个网站配置这没问题，第二个叫做什么信息修关联信息修改是吧，管理员。

管理员信息修改。然后还有什么，还有用户列表，用户列表，然后用户添加对吧，添加用户，然后还有这个分类。列表。列表，然后还有什么，还有这个添加分类，添加分类对吧，以及文章列表，然后对应着添加文章。然后再往下来看，这边还有什么啊。然后回到我们这里面来添加文章，然后这里面再来一个是什么，是我们的这个，嗯，啊对啊，就是这个就是的有点跑偏了是吧。啊，那OK，这就对了啊Li Li结束里边两个他好了，那添加文章完事以后是这个相册列表是吧，相册列表，然后再往下来。

就是我们的添加相册啊。添加相册，还有我们的广告列表。广告列表添加广告，公告列表添加公告，友情链接添加友情链接，还有这些啊好了，那我们来看文章相册列表完了，添加相册。啊，相册列表添加相册好了，昨晚在相册点就不是了，对吧，应该是广告列表，然后。添加。广告。啊，还有这个公告。列表啊添加。公告。以及。最后应该两个是吧，一个叫友情。

链接啊，然后这个叫添加友情。链接好了有这么几个对吧，那么现在我们写完了以后，我们先来去看这个页面啊，一样来再来刷新，刷新完以后这边是长这个样子对吧？当然我们这个格global文件是没有给他引入过来啊。CSS下边那个。当前目录。点杠CSS下边那个lo gl BL的CSS啊，没有错啊，再来刷新一下好了，这个对了对吧？哎，所有的还原默认了啊好了，那接下来呢，我们就开始往里面去配置什么呀，配置这些图片去啊，配置这些小小logo，那么配置小logo的时候我们就要看一下，比如用户这里边我们用了一个。什么样的图标？这是我们的用户的图标对吧，然后添加用户呢，我们用的用的是他是吧，所以在这里面我们找到它那第一个用户这块，我们给他一个叫什么class icon icon front，然后用户了，然后再往添加用户呢，Class一样icon。

波NT，然后再往后，他的应该是添加的那个，也就是这个啊，给它粘过来好了，然后再往后诶。错了啊。第一个怎么是用户呢？第一个是网站配置吧，是不是。这是用户列表。这是我们的添加用户。这块给的可class。粘过来sun放着对吧，好了，那这两个就不是了，给它删掉啊，这两个是网站配置和信息修改对吧？网站配置的话，这里面有个配置，咱们用它，还有个人信息，我们用个人信息啊，这是网站配置，然后个人信息我们就用这个个人信息。

好了，然后用户列表这两个要完事了，然后接下来什么分类的对吧？分类列表呢，一个是这个，一个是一个圆圈，一个加号啊，那我们先把这个class都给它补全啊，Icon icon放到，然后这个也一样，Class icont放上好了，分类列表我们看一下，我们用的是这个分类对吧？然后给它粘过来，然后接下来呢，还有个添加分类，添加分类我们用的是哪个用的小圆圈加加号，那就是这个，然后这里边我们再给它。复制过来好了，添加分类的，然后再往下来呢，还有什么文章，文章列表和添加文章对吧？那文章列表我们用的是哪个，也依然是用的这个对吧？那我给它复制一下啊，在这里边文章列表给它起个名class等给他，然后I con放的，这两个必须都得加，对吧？然后这个也一样，Icont con放的，然后添加文章这块，我们用的是那么一个中括号这个。对吧，然后给他加过来好了。

然后再往下再看什么相册列表啊。在这里边我们给他一个class。Icon放这里边也一样，Icon放的两个都有了啊，然后相册的话，咱们再看相册是两个一样的是吧。来找一下相册在这。把它叫过来啊，就我们这还有个相册对吧，添加相册，比如我用这个。啊，这里边啊，好了，我用的这两个啊，然后再往下呢，相册完成是什么？是我们的广告了，对吧，来这里边看啊广告和添加广告对吧，那这里边也一样，我们返回来广告列表，这里边我们再继续class I con问题放到这块也一样，给它继续class放，那OK，然后这里面都看到的都都给一下吧，Sun。FT放的现在是广告列表和添加广告，那广告列表我们用的什么？用的这个ad。

给他。加过来。广告列表，然后添加广告呢，我们用的是哪个呀？再找添加广告，我们用的就是一个方块加一个加号的就是。这个吧，是吧，来。给他加过来好了，还有什么公告？添加广告，添加广告我们是不是复制错了，广告是这广告是这个是吧？哎，那OK，把它粘过来啊，这是添加广告，然后接下来是什么公告列表对吧？那么公告列表呢，咱们用的是哪个，再来看公告列表用的是带小箭头的，是不是他呀公告。那OK，拿过来。然后接下来什么添加公告，添加公告一样，这里边我们继续给它class I con con放到那，添加公告的话，我们用的是这个括号加。这个东西对吧，给它复制拿到我们的代码里面来好了，然后最后还剩个有形链接class icon放icon f放到，然后这里边也一样，再给它class I cof问题放到好了，然后添加友情链接，我们用的是这个一个友情链接。

诶，然后添加呢，我们就随便找一个，这里边应该它没有用过吧，我们把它放到这里来好了，现在我们再来看我们的页面啊，来刷新。OK，所有的图标我们是不是也加进来了，哎，加进来以后接下来干嘛，我们就就改一下它的样式，控制一下它的这个样式就可以了，对不对，那咱们来看。嗯。这里边。一样，它需要一个left对吧，我们单独给一个left的文件啊，我们单独去调它，那叫做left left啊不错了啊，叫做。Link需要的是什么？当前目录CS下边l left.css但是还没有，那我在这里面新建一个，呃。

C文件叫做lft left CSS，好了，那这里边我们需要控制的是什么东西，需要控制，咱们再来看找到left是不是就需要控制一个HR给它放大对吧？然后就是里面的每个Li的这个横高和这个宽度了，对吧？那在例子这个里边直接找到HR标签，HR标签然后我们给他一个这个padd in。拍顶吧，啊拍顶上下为十左右为20，然后这个时候我们再来看刷新。过来了对吧？哎，过来以后呢，那同样这里面上下为15吧，为15啊为15左右为20之前都行啊，然后T-N等于center，那咱不用给它加它了啊，咱就只设置拍点就行了，那最终我们要想让它。那什么的话，我们是不是直接可以给他一个T-center没定义吗？没定义center是吧，那我就需要在这个global里边去定义一下点case杠。Center定义了呀F，呃，叫做takes-A等于一个center，好了，那现在看能不能居中。

没有居中的效果是吧，那我们就来看一下来left.css我们global。GLPL的三引入了对吧，然后我去给它test-center也确实呢可以加了刷新，但是没有居中的效果，那这个时候怎么办？我们在这里边给它设置一下，叫做border为一像素实现的红色，我们先看一下对吧，来刷新一下。看到为什么没有居中，你看啊，现在我这就是一个HR的这个标签对吧？这没有问题啊，包括这里边我也可以给干嘛让它向上一点，比如说r margin-TOP5像素，就是距离顶部五像素，让它下来一点对吧？下来一点呢？这个元素在这里面没有居中怎么办？我们来整合一下呗，在这里边找到这个元素，然后找到这个元素以后，咱们来看我们给没给它加上来啊，HR这里边有加T等于center吗？

说没有对吧，哎，只有这个默认效果啊，并没有那个A，那我们看一眼我加哪去了。HR标签class叫做t ST center。沟通过去能不能调过去。Takes。等于santa。TXT。没有问题呀，怎么不好使了？对，推center。这个也叫test center。没有错是吧？右侧内容我先关掉它啊，现在我们用不上诶，但是他没给我加上我的HR标签。Class test-center嗯，这里边我引没引入格萝卜，这里边引入了当前不格萝卜了，然后我给的test-center不好使，不好使的话呢，在这块我这么样一下啊，比如说我给他一样设置一个宽度为100%。

走，你。哎，好了对吧，好了以后，但是它的宽度是不是有所增高啊。对吧，哎，也就是说当时现在他这个样式不好使的原因是什么，是我们没给他宽度啊，你看。这个数。宽度100分是不是就过来了，对吧，如果把它去掉。吹到现在也好使了，再见。不用了啊，咱就直接把它去掉了啊来。走，你。是不是也可以了，哎，这个好了，那刚才可能是没刷新过来，那把这个边框我们就去掉了啊，去掉以后，但他们我们需要干嘛，把这这里的文字要给放大一下，放到刚size等于20像素。来给它放大。好了，这会它放大了对吧，好，它放大以后呢，接下来咱们接下来是不是就里边的每一个L了，对不对，那你看。在我们这里边。这里面。它完事是不是下来就是每一个每一个这个ul Li的标签对它进行设置了，对吧，那同样这里边我们把它打开啊，然后。

这个，那接下来就是这里面的u Li对吧，那u Li Li里面的Li给Li，我直接给Li了啊Li什么的，Li我给他一个这个呃，Pad ing拍顶，那上下为十左右，上下左都为十吧。啊，左右杯15也行，左右杯15啊好，现在我们再来看找你。距离拉开了对吧，然后同样每个Li我们都给了一个背景色BABA叫做井号F7，然后同样我们再给他一个叫做包德B，包德杠八，包德杠八他们五已经有了啊，那我就可以直接什么直接在这里边。因为我多个Li再添加工具还比较麻烦，我直接这写吧，Background background有了给个board border对吧，等于border-BOT DOM bottom EPS sod，井号CCC，好，现在我们再来看。

走，你。OK。在这底下呢，对吧，哎，每一个都有，但我们的上下可能有点小是吧，上下20。这里是左右20啊。上下为20。左边咱们这样吧，重新改下，左边为零啊，下边也为20，然后这边也为20。来刷新。啊，这个距离是不是打开了，哎，打开以后那一样，接下来呢，接下来这些文字啊和这些图标，我们是不是可以给它设置一定的距离，你看你这里面的文字和图标是不是都有一定的距离啊，哎，那好说直接干嘛呀，我们给这个A标签是不是一个距离就可以了，所以这个Li。里边的A对吧。它这边我可以不给，不给他给空格也可以啊，然后让它有个距离，那就margin Mar间margin-left Mar间margin-left给他十像素的距离，然后这个时候我们再来这里边刷新一下。

是不是拉开了，那OK，那我这块内容是不是就搞定了，哎搞定以后接下来什么，当我点点击网站配置的时候，是不是右侧就要显示网站配置，我点击管理员信息修改的时候，右侧是不是显示管理员信息修改对吧？点击用户列表的时候，右侧是不是显示用户列表了。哎，这是我们最终要实现的效果啊好，那我们左侧布局完，那么这节课先到这里，下节课我们再来布局我们的右侧和点击跳转了啊。