Web响应式布局项目实战 23.设置网站底部 学习猿地原创

好，那我们继续来上课，那么这个导航部分我们做完了，接下来开始做这个网站的这个公共的底部，啊底部呢有两个样式看到了，当我们是PC端的话，那它这个会显示这些内容对吧？如果是不是PC端，那就没有这些内容看到了吗？是不是没有这些内容啊，哎，那OK，我们把这些内容给加进来啊，当然这些内容其实我们还少一个，少一个什么呢？应该做一些有情链接对吧，那到时候后期我们再来调整它啊，那么咱们先看先做它，那么打这里边我们先来新建一个我们的H文件叫O。那这是我们的网站底部对吧，那么一样，这里边我需要去连接我们这个CSS的样式对吧？那我就把这两行代码都来了啊几行三行底部需要，那什么比要底部不需要，我就直接这两行啊，好给它粘过来。过来以后这块改成加CSS，那同样我这里需要新建一个文件叫做。Foot foot特点，CSS。填错了啊。

给它删除。然后再来新建一个叫做fo。好了，那么负ERCSS里边也一样，我会需要用到一些标签的，Hier不用了，这个header CSS我们要不要用？也不用了，这两个都不用了，对吧，直接去找什么，找我们这个首页布局实战的时候，我们去写了这个福的标签了，对吧，那福特这里边一个有上边，一共有下边，那我直接把它拿到我们这个标里边，因为最终这些东我都会，其他标签都会除对那再往下来呢，还有这个福CS，我们需要去到它的这个CSS里边，我们拉到最下边有福特的CSS的地方，把它给它复制过来，你看福特CS总共有这些地方对吧？那OK，直接CTRLC。拿过来粘到我们这里边，然后还有什么呢？还有它的这个。移动端的样式。先复制过来。

注意这移动端的样式啊，这移动端的样式我在这里边写，最终合的时候我是不是也要合过去对吧？那合过去在一个页面肯定不能查两次，明白吧，肯定不能查两次啊，那我最终还要把代码合进去才行啊，那先不管他，我们直接把网站底部看没有了，对吧？就这块网站底部，直接把网站底部肯定就是C。拿到这里边。诸位。OK，没问题了，没问题，这两个不要了，卸磨杀滤删掉，删掉以后我们直接访问肤，我们先看基本样式，我们是有的。有什么有？没有吗？大屏显示是这样的，小屏显示呢，应该是有的吧，小屏显示的话是取消掉一个的，我记得是不是。诶，都没有是吧，为什么没有看一下吧？呃，当前目录CSS下边，而我的这个附特CS建哪就建这了，是不是拿错了，给它移移过来啊，重录一下好了，这回我们再来看啊，保存一下。

刷新一下OK，网站底部对吧？哎，如果是大屏的情况下是两部分啊好了，那网站底部的内容我们直接拿过来就可以了，直接把这个内容复制过来，能不能复制，这样复制不了。去掉这么样的复制。好，CTRLC，然后拿到我们的这个代码里边。网站底部的内容粘过来，粘过来以后，现在我们再回过来上我们自己的这个项目开不要了，关掉了啊，这个来刷新，刷新完以后这是它底部的内容，对吧？那底部的内容现在有了，那底部内容这个大字体的大小，我是不是也可以进行一些相关的调整啊。哎，那所以这里边我们可以直接进行foot里边的内容进行调整啊，那找到这个foot。是吧，它里边的比如说这个大小叫做方刚。Said。SI给设置多大，设置14像素好了，直接我给他设置14像素啊，让它小一点。OK，这没问题对吧，然后在这里边你看好了银子里边。

缩小。是不是也这样的，哎，都是它都是居中的对吧，其实我们可以再调整看怎么做，看我们怎么做了，对吧，比如说啊，这里边是不是就他在这呢，对不对，哎，负这个东西不是负这个东西啊，你看好了，我不给它设置字体大小了。注意啊，我没到这里面，没到这里面，所以没超出大屏，现在都是小屏啊，我们就先把小屏的问题解决了啊，比如说现在小屏它就是这样的这么大对吧，然后我让他控制，他是不是控制这个文字的，你看好了，给他一个包的一像素这个实线的，呃，红色ID。红K应该也能看得出来啊。看到了吗？我把它缩小，它缩多小呢？比如说WDTH，它的这个宽度为80%，然后marg，呃，不对不对，对marg Mar上下为零，左右自动。

刷新。整个内容是不是小了，诶，但是特点它小了哦。哦。我的这个颜色是直接给了他的是吧？哎，这里面不有黑色吗？黑色直接给了他了，所以他不使，那OK，那既然是这样的话，就不给他了。这个也不给了，让他满屏宽吧，自生自灭吧。刷机。好了啊，现在回来了，回来注意这个边框是不是还有这个八项数呢？注意这里边我需要给它去去掉啊，那直接body给它一个叫pad为零对吧？A，呃，Mar。为零好了，然后干嘛呢？我说了，我让他把这个文字稍微调整一下，对吧，别用这个效果。不好看，那我们可以在这里面看好了。既然我是用它控制的所有的这个内容，对不对，那这里边我直接再来一个来个什么，然后把这个文字的内容。CTRLX减T粘到这里边来啊，上这里面来，我是不是就可以控制它了，让它减小了，现在你看啊来刷新，现在最外层是满屏的对不对，然后里边的这还有个selection，那我这里边我是不是就可以直接来控制叫做什么？

点fo杠，Bo Tom里边的secret selection，它的这个W，其宽度为80%，那现在你来看啊，来缩小。缩小。我写错了吗？B。T Tom。来吧，说一下。OK，这回缩小了吧，缩小以后进来干嘛，让它居中呗，Mar Mar上下为零，左右自动对吧，然后这里面文本方式不需要居中auto。走你好了，现在不需要居中，是不是都是居左的了，看到吗？但是整个内容在这里面是居中的对不对？哎，那OK，这是我们的底部的最底下内容搞定了啊，当然这些东西肯定我们还有调整，不可能有这么多对吧，而且我们比如该换行的肯定也都是换行的啊，那先不管它，先这样有了就行了，然后接下来什么，接下来是大屏的时候吧，那大屏的时候你看好了，它也是这样的，看到了吧。

哎，大屏数这样，这都无所谓，因为这个文字我们好调不好调是在哪呢？不好调的是。这块内容我们大屏显示了，我们还有它呢，而且这个大屏的时候文字也要什么也要变小吧，所以在这里边，那我一样，我大屏的时候HTMLHTML，我所有的文字的fo-size别变成14像素啊，小屏的时候我让它默认16，大屏就是14让它小一点。看到了吧，文字小了吧，文字小了以后，接下来这里边是不是要放什么，看好了人家放什么放的是。直接放大啊，先是有，反正有这么几个东西，这都这这几个字是图片对吧，后面是文字，那先不管它，也就是在这里边有四个selection呗，那找到大屏文字这块。给它删掉，这里面会包含四个selection对吧，第一个selection是一个image，然后image后面我们会放一个，比如放一个标签吧。

然后这里面写上叫什么七天无理由。会获。是吧，七天无理由退货，然后给个七是吧，那OK，我们在这里边一样，这个图片里边有没有七啊。应该是图片里有，不是图标。对了。来翻过来好了，这里面几个，总共四个对吗？Ctrl c ctrl v ctrl v ctrl v ok4个，然后这里边既然FOOT1，我蒙一下啊二。负的三。说的是。回过来。有了图片不对吗？图片，哦，不对，图片应该什么？应该是当前目录ima images下面的这个对吧，那OK ctrl c复制一下。这个也一样，这个也一样，好了，现在我们再来看图片能不能出来啊周尼。

OK，图片也出来了吧，图片跟文字都出来了，那最终注意啊，在这里边我是不是这个selection的外层还有一个top呢，对吧，那这个top我需要给它重新设置一下，那设置成什么呢？找到这个top，它的这个高度啊，我们是不需要给他设定了，我们可以给他嘛呢，比如说我这么设置，我说一个最小高度，你最小是最小是50像素对吧？或者最小是100像素都行啊，如果给的最小高度是50，那OK，其实他现在你看现在是不是就让它大一些了，然后同样这里边比如说pad in定上下左右都为十。我再给你说一声对吧，再让他往里边说。这样就好看一些了，对吧，然后接下来干啊，接下来是不就设置它了，那首先一样，它的这个总宽度，我给它设置一下width总宽度少呢，为这个70%，它的总宽度为70MAR marin上下为零。左右自动。

现在你来看啊。总理。OK，是不是居中了对吧，那同样咱们把下面的这个。放到上面来，因为我现在调它呢，看下的它的边框是不是在这呢，在这以后接下来是不是我要把这四个session都要在里面平均分配啊，对不对，而且我要需要什么让他在里边都给我居中，那这个时候咱们来看啊，直接play给它设置为伸缩核，然后呢，再往下来叫做。哦，它是ne了是吧，那OK，没问题啊，它ne我是不是在哪，在移动端的时候我给他设置啊，来移动端咱们来看移动端的foot top变成这个没错是吧？哎，那现在也不影响啊，它现在就是深盒对不对，那接下来就是就是我们调整它的位置就可以了啊。找到。把他们我们已经用完了，不需要了啊，我直接给它缩小，这两个都缩小，直接现在就改它就行了，它继续，它既然已经是三核了，我继续干嘛呀，叫做gus content为这个。

比between吧，呃，贴到两边对吧，然后贴到两边，因为我这里边给了他这个拍景石像数了，所以他头也贴，头跟尾都贴不着啊，然后再来it。为center，让它垂直也居中，居中完以后现在咱们来看刷新。变成这样效果了，但是图片跟文字我是不是还得调啊，那图片跟文字是不是就是这个下边的。Selection对吗？那它也继续干嘛？Play，然后为。呃，水平那就是这个，然后再往下来呢。这个。等于居中，那现在我们再来看。走，你。是不是它俩居中了，哎，它俩居中以后一样，然后让它每一个里边，就是每一个内容之间有点有点什么，有点距离呗。因为我已经给了这个了，咱们来看它的这个元素大小，应该就是这么大了，所以中间没有距离。

你看。刷新。是不是元素大小就这么大了，哎，所以我可以把它的元素的宽度是不是可以给它设置一下，它就会有距离了，With，它的宽度应该等于什么？等于CA。CLLC。干嘛自己计算嘛，那是不是就就相当于是100%的宽度除以四，它这里面总共是四个，是不是除以四就行了，哎，这就是他每一个宽度吧，那OK，走你。你看这个宽度是不是就有了，有了以后你看它的内容是不是就贴贴过来了，但是你内容贴过来，注意啊，你内容贴过来是贴过来，它这里面是只是有这么一点距离了，对不对？哎，所以我不能让它，不能让它怎么样。不能让他这么贴。啊，不能让他这么贴，因为这么贴的话，你注意它是不是还有个边线的，你看因为这里边是不是还有边线呢，看到了吗？哎，所以这样话肯定不行啊，那这里边我除以四给它宽度设定了是没有问题了。呃，诶错了这里。

继续。那既然都这么设定了，我就拍顶，然后上下为零，左右为20。看好了，继续往里说。看到了吧，哎，这个时候他们两个文字是不是就相当于挨在一起了，但挨在一起了，因为我的这个叫什么，呃。PA顶值给的太大了，文字是不是缩小了，因为我外层还有一层PA顶呢，对吧，那我把外层拍顶给它取消掉啊，外层拍顶不要了，找到我们外层的PA顶，上下左为十，这个不要了，不要以后现在我们来看。他的这个。正好是这样的啊，那也不算太好看文字。文字这块依然是不行，来我们看一下啊，怎么调整会比较合适。这里边。那我就直接给他一个什么，给他一个这个吧。叫什么box变成什么，变成这个怪一盒呗，来刷新。

还是怎么样，内容不够，看到了吗？是不是还宽度不够啊？哎，上下左右为20，确实有点大为十吧。左右为十，这就已经是20像素了，来刷新，OK，这个可以了，对吧，那可以以后接下来什么，接下来是不是就是这个，每一个每一个后面都要有个斜杠，但是最后尾，你看最后尾有斜杠了没有，对吧？所以这里边我们再来给他进行一个调整啊，包括它图片也是比较大的，看到了吗？图片是53 53，这里面图片是多少。然后也是53 53。哎，那我这里怎么这么大，我浏览器说忘了吗？啊，没有。它这里边你看好了啊，它这里面的宽度都1710了，对吧，我们宽度很大，1516是不是不一样啊，哎，这里面我们没给他说那么大啊，但是你看。说说说说说。说到这时候才没有对吧。哎，你看往下的时候，它肯定是都是那什么的啊OK，那这一样，这里的文字我们再给它可以再变小一点啊，它这里面的文字多大哈，它这里文字哎哟也是14。

我们这里的文字呢？我刚才有没有设置。看一下文字大小。文字也是14吧，也是14啊，没有14改16了，那就很大了啊。那就把图片，图片也不用动了，图片既然没有问题，那就这样吧，然后我们把它的selection让它包的。杠red，我这里面是不是有个包的有啊，咱就直接设置这个让它杠r red还是一像素实现井号CC灰色边框。好了，那这时候来看整体。有了吧，有了以后一样，外层的最外层的这个红色边框，咱们也可以去掉了啊，也可以去掉了，来再来刷新。是不是也有了，有了以后呢。这个时候咱们来看啊看它。它这里边比如缩小缩小，你看啊，缩小缩小。

他再说说到这说到他说到这组就已经没有了，对吗？你看他说到900多就已经没有了，因为他这里面兼容了pad端对吧，哎，这么说文字再再缩小，这没问题对吧，我们这个呢，由于什么我们没兼容pad端，所以我就只能一直在说说说你看。文字最后变成一行了，对吧，变成一行以后才什么才没有的吧，哎，所以这里边我也可以给他设置，比如说干嘛呢，我让它最小的宽度，比如说这里边啊，咱们设完了这个宽度了吧，Min。Min最小的。宽度200像素啊，最小让你变成200像素，好了，那现在咱们来看刷新一下。二百二百四百，这就800了。这是没问题的，对吧，这个宽这宽度是没问题的，但是我要往里缩缩缩啊，一旦它我给它设置最小宽度的时候，它是不是就不会变了，始终都保持这样的，看到了吗？哎，除非到什么到他没有的时候啊那。这个就别设置了啊，设置就不好看了啊好了。

这我在刷新。文字图片文字图片文字，那OK，那我们就这么设置一下吧。嗯。点foot top selection是吧？点下面的selection，下面的image。对吧？哎，以面积的这个大小，我们给它设置一下，比如说width宽度，嗯，应该怎么选啊。它的宽度这是一个啊，我们先放在这儿，还有一个selection下边的SPA标签，它的found-size，比如说我给他直接设置12小数，让它小一点啊。这里边的宽度呢，里边的宽度。先不给他设置啊，先不给他设置来。核心。文字又小了啊。反正怎么样，他最终都会折叠到一行对吧，但是呢，咱们来看啊，这没有没有什么事啊，你看因为我们最终肯定不是这么选的，我们肯定是你是什么什么设备对吧。

你是什么设备走什么，那如果我是这个电脑端，比如说我用这个ipad，那这样的话是不是也没问题了。对吧？哎，然后只是需要调什么，调它上下间距就行了啊，那这块咱就不用设置了啊。因为B再怎么设置它都不可能是一样，除非我们把图片跟内容都缩小，那才可以，对不对，哎，然后给它设置一个马值，上下各为十。左右为零。我这块是。啊，那这块就直接十上下为十左右自动就行了，对不对，好了，我只是要呢，这个跟上下都有一些距离啊，刷新一下好了，这距离是不是就拉开了，那你看这里边人家这里边有没有距离。啊，也有一些距离对吧，哎，距离拉开了，那OK，那这块就被搞定了，那同样人家还有什么，还有一个这个。边框的嘛，哎，那你这里边也可以给它进行设置包杠。不就直接border吧，一项数实现的井号CDC，然后谁没有边框border-BOT to OM为na给它取消。

再回来，走，你。好了，我的底部是不是就好了，但底部好了注意啊，你看好了。就它的这个边框还是给谁给最外层的啊，那OK，那我们这个边框不能给它给错人了，给它先拿走，拿走以后咱们来看啊，看什么呢？你看人这里面的最后一条边有线吗。你看一下有线吗？是不是没有，我们的最后一条边有没有线，有吧，所以这里边我要给它再进行设置一下吧，也就是点错了，我要在他的下面设置啊。在这里点foot呀，Foot-top里边的selection冒号last杠有的最后一个对吧，Border。为NNE啊right也行对吧，因为我们是给它设置的，那我就right为N好了，那现在咱们再来看刷新。最后一条边是不是就没有了，哎，没有以后那一样，我还是调成这个。

好了，那接下来是不是它最外层的那一个要有一个边框，那我看看我没有它有没有最外层啊，最外层它是一个70%在外层，诶没有了，看到了吗？啊，它在本上是不是又没有了，那没有的话，那也一样，我不可能再去给福特来设置了，对吧，因为它这里边。他的这个我就给他设置了70%，那怎么办，我这里面再加一个。全的呗，Selection设置框，我加一个什么，再加一个。这个东西。对吧，哎，我在它最外层去加一个selection是对他没有任何影响的吧，你看好了来刷新。是不是没有任何影响，哎，但是这回我设置肯定没问题，怎么设置，这里边是不是foot的第一个selection对不对，那OK，那也就是在这里边我们去找找什么foot啊，Foot里边的selection我不能都选择，它会把底下选择直接冒号first杠有第一个selection，它的宽度为100%对吧，然后呢，它的这个border为一项数实现的井号CCCC，但是为了不影响到其他的，那我要给他设置一个伸缩那个怪音盒对吧？然后再来borderder。

B。ER为N底部我不需要，那现在你看。刷新。是不是就有了，有了以后注意啊，这两个边是不是没接上，没接上原因什么，它是不是有十像数的什么间距吧，我记得给谁的给的这个top设置了一个十像数吧，你看marin top对吧，那OK，不给他设置了，他继续为零。你看好了。现在是不是接上来了，接上来以后接下来呢，让它这里边的内容填充就可以了嘛，让它的这里边pad拍定上下为十左右为零。那这个时候是不是距离也有了，哎，那OK，那现在我们网站底部是不是就搞定了一样，我说到最小的时候没有东西了，对吧？哎，最小时就剩这个这个文字了，当然啊，这个文字可以在小屏的时候也小，也小一点会好看一些，对吧？那我直接在小屏的时候设置它大小就可以了，对不对？哎，那OK，那网站底部现在我们是不是也搞定了。

哎，好，那这节课我们到这里。