Web响应式布局项目实战 26.首页商品展示(移动端+PC端) 学习猿地原创

好，那么继续来上课啊，那么上节课呢，我们把我们的这个秒杀已经做完了啊，来拖上来啊，秒杀我们已经做完了，这节课呢，我们再来看做商品这块，也就是我们首页中这最后一块内容，对吧？为你推荐这块啊，那么其实只要把这一块内容剩下，我们再加别的内容，只要只所有的都是这一块内容的复制啊，所以这块呢，就做一个就可以了啊，你比如说再来一个什么最新商品，那我们直接干嘛复制一块，把它改成最新商品，是不是上面下面是不是还是一样的样式。所以就是这样的一个效果啊，好了，那咱们来看啊，这里边。那么为你推荐肯定也就是上，也就是我们上面这块需要也有也是有上下两部分对吧，上面呢是这么一个东西，下面呢就是为你推荐的地方，对吧？那OK，我们也一样，直接还是在这个页面里面写吧，那我们在这里面找到这个区块啊。我把这个今日秒杀整个的都缩小了，缩小以后接下接下来什么就是商品展示的区块，对吧？商品展示啊，我们做的是为你推荐。

好了，那这里边selection我给它设置一个叫做product Du OK，这是它的最外层的元素啊，那么最外层元素里边会包含着两部分，一个selection叫做点吧p Du-top顶部的。是吧，然后还有一个。底部的ec，然后点pro。BUCT。杠b button OK，上下两部分好了，那接下来我们开始进行对它进行设置啊，那么一样找到我们这里边最下边。OK在这，那么接下来什么我们的这个商品区块，对吧，商品区块的样式。好，那这里边井号它，然后给它先设置它的这个宽度，WDT依然是说100%对吧，100%的宽度，然后它有没有背景色呢？我们来看一下啊。它是不是也有背景色，它的背景也是这个灰色对吧，那OK bakg井号1F1。

颜色有了，然后我们给它做一个边框嘛，B包的移像素实现的红色。So。红色好到现在我们再来看。刷新。在这里边有一项素红线，这个实线的红色对吧？然后接下来呢，咱们在这里边开始去写它的这个样式去，不是写的样式，写它的内容去吧，哎，其实在这个慢这里边大家这个不是首页布局实战这里边啊，咱们打开，其实在这里边我们已经给他做完了，对吧？咱们来看一下这里面做的是什么样效果啊，你看为你推荐啊，我们没做对吧？产品展示其实也不是没做也做了对吧？其实我们直接把它拿过来就可以了啊，那你看。到这里边是不是就两条产品展示啊，哎，但这个做的有点不算太好啊，不算太好是吧，那我们就重写了啊，既然已经写到这儿就重写了，来，那把它关掉了啊，关掉以后呢，接下来这里边我们第一个是为你推荐，我们先写上来啊那。

把它关掉了。然后这里边。这个叫做为你推荐啊。为您推荐。OK，好了，然后现在我们来看一下我们的。稍息。诶有内容了对吧，有内容以后一样，你看好了人这个为您推荐啊，什么样的啊。就是与上面有点距离对吧，然后下面给它上下也有点距离对吧，上下有上下左右相当于都有距离吧，那都有距离的话，我们就直接找到它啊，然后给它进行设置呗，那也就是点它。然后给他一个width宽度，它的宽度依然是什么100%吧，哎，它的宽度是100%，然后B，呃，不用设置别的对吧，给他设置一个拍顶，拍顶上下左右都为十。好，现在你再来看。刷新。没问题对吧，然后同样刚才给的这个边框，那么诶给的不是他的边框，是它的边框啊，给他一个borderder为这个e border-bott。

OM为2PXSO红色。现在再来。走你最下边有边框了，对吧，然后这个字体颜色，它是什么颜色，我们看一下啊，也是红色对吧，而且加粗了啊，那我们在直接在这里面调了叫做color为红色，然后呢，Front fo front和set是with为build，让它加粗，好现在我们再来看。处理OK，第一块搞定对吧，搞定完以后接下来下面是商品的东西对吧，那这个里边呢，既然我们设置了边框，同样我们给它设置一个什么叫做box-session然后给它设置一个这个对吧，那同样我们把这个负元素里边也给它设置一下啊，然后因为负元素里边我们也设置了一个红线的边框嘛。好了，那那都回来，回来以后接下来什么，接下来是不是就底部商品了，底部商品在哪，在这对吧，那这里边我们就直接给他一个secret selection叫做点p product啊，就直接是商品区块了，那商品区块里面有什么东西，我们就来看一下啊。

来有图片，有名称，有价格，看到了吗？图片名称价格就是三三块啊，那OK，我们在这里边先去做selection，第一个这是里边要放的是图片对吧，那以image，然后再来select，第二个这里边要放的是名称对吧？那就直接有一个内容先不写了，然后再来一个select是不是价格。对吧，那OK，这里边我就直接给它定成class class等于什么p product杠图片，那就叫image image，然后再往下来继续，Class等于P，这个叫做呃，描述，对吧，Summary吧。或者叫标题也行啊，这里面不能说描述，应该是标题给他title吧。TL。然后这里面再继续还是一个class，等于什么pro pro。杠，它这里面最下面放的是什么价格吗？看一下来。

OK，是价格啊，那我们就直接把它。P翻过来好了，那这些都有了以后价格咱们先写上一个叫做什么，呃井号，比如说54.00。点零零，OK。一个搞定，然后再往下来呢，还有什么，还有这个描述的内容，对吧，描述的内容呢，我们把这个内容。他这还有一个这个动画效果是吧，来我把这个内容复制出来啊。找到这里边。这块是个A标签是吧。OK，我们也要把它改成A标签，因为你的这个也相当于一点，它是有跳转的效果的，对吧，所以你这里面也有A标签啊，那我们也同样也要给他A标签，那来直接给它A标签，就价格是点没有效果的，对吧，那包括这个图片要不要给要给啊给他一个A标签。

CTR放到这里面来，OK，这些内容都有了，那接下来我们再来看我们自己的啊，来刷新。没问题对吧，没问题以后呢，这里边还差一个什么，还差一个这个图片嘛，当前目录以内的是下边的，那随便咱们找一个商品去做。在这里面就用它对吧，重命名，Ctrl a ctrl c，把这个名粘过来，粘过来以后，现在我们来看啊，再来看这个效果是什么样的。来刷新。OK，这没问题对吧，但是大家知道我们是不是我的这个宽度啊，是不是要给它做什么，做成小一点的对吧，而且我一个页面只显示两个没错吧，所以这一个页面只显示两个的话，那这个product的宽度我就要给它进行一个设置了吧，哎，包括它这个button同样要做成伸缩盒，对吧，那一个个来啊，先去找到。他的这个八掌。Button，这里面我们还没设置啊，CTRLC。找到。

点button给他设置一个什么this play为这个对吧，然后呢，在这里边一样BTW不用了。嗯，给他一个这个这个这个width宽度为100%。也是为100%的对吧，那现在你来看啊刷新。没有任何影响对吧，因为我测的是最外层，里层是谁，里程是不是就是这个点pro。P是不是它呀，诶它的宽度w wi。DTH它的宽度是多少？它的宽度是不是要等于？Clc，我们要计算一下对吧，叫做100%除以。二相当于50%呗，对不对，哎，那这里边咱们也不可能给他50%，那我就不用算了，我就直接给他一个48%。48%的宽度对吧？哎，给了48%的宽度，那这个图我们再来看啊，来总理。有缩小吗？好像没什么反应是吧？来BD包一像素实现的红色。

最后，我们再来看总理。有吧，你看这块是不是有重叠了，只是这个图片太大了，对吧，所以我需要干嘛给它设置一下这个图片的大小啊，那图片这里边咱们也一样给他给了名啊，叫做他。找到这里边它下边的谁呀一啊，因为这里边有A标签，所以我们就没给这个箭头对吧，那它的这个WT，它的宽度我可以是什么100%满屏宽，那现在再来。刷新。OK，这回没问题了对吧？哎，宽度给它设置好了啊，那宽度设置好了以后，那你看这里边所有内容都没问题，没问题以后呢，在这个里边，同样我给他设置一个PA顶pad ing，所有的东西前后左右各为十项数进行一个。缩放对吧，然后呢，在这个把它的这个变成什么，变成这个怪一盒。For the dogs。刷新。OK，这没问题对吧，没问题以后，那接下来这里边其他的东西都没有了，接下来是不就是文字的一个调整了，对吧，里边的每个文字的调整啊，这两个文字。

呃，先调整一下。再继续。第二。文字这个。它里边的。A、标签。对吧，给他的这个首先文字K-a Lin啊，不用给错了啊，咱这个文字我看一眼。太大了，那小一点对吧，Front-size变成14像素，然后c color为井号，井号什么颜色，它那个我看一眼啊。切到这里边来，这有点灰，还不灰。不灰呢，还有点灰。来看一眼井号666是吧，那OK，我们也给他设置井号666 OK。好了，最后再来刷新。OK，文字这里面有了对吧，那这个文字这里面是不是还有下划线呢？也就是说A标签我要取消它下划线的样式，那我就拉到最上边来啊，在这里面直接逗号再来一个AA标签，我要干嘛呢？我要take-grason为na直接取消全部的。

好了，那没有它的下划线样式对吧，那没有了以后，接下来再往下什么，再往下就是它的这个价格了吧，哎，价格的话它设置是什么，设置红色的对吧，那OK，这里边继续。直接飘到这来啊，这里边的价格，那价格应该是下一个了，叫做P-P是不是它呀，哎，它这里边就直接设置，因为它里面没有其他东西对吧，所以直接是放到刚set。Fo-SI为14像素，然后再来一个这个Co color为红色，好，那现在咱们来看我的商品，一个是不是就搞定了啊？刷新。没问题对吧，哎，没问题以后，那接下来咱们是不是有多个商品呢，有多个商品的话。

这里边啊，我缩小一点啊，来50%看啊，你看好了。宽高没问题对吧，没问题，以后接下来咱有多个商品，我是不是就直接复制这一个就行了，那先复制一个，它肯定也是不好使的嘛，对吧，来product的这个东西直接CTRLCCTRLVVVV继续继续有。再来再来，OK，给了一堆对吧，给了一堆以后，现在我们再来看。走，你。看好了啊，是不是都在一行呢？哎，我是不是需要他干嘛让他强制换行才行啊，所以在这里边我再去给它做伸缩核的时候，找一下我们做伸缩核的属性在哪呢？在在在这里边对吧，当我们给它做三肖核的时候，我需要干嘛呀，强制让它换行啊，等于wa。等于好了，那这个数。再来。刷新。好，这回是不是可以了，哎，这回可以了，以后。你注意啊，这里边你看它每一个元素啊，并没有说它这边是靠的头没问题，但这边是不是没靠头对吧，你看往下拉往下拉啊，我们整个整个正好是六个是吧，那OK，我再加一个让它七个啊，就是出一个单完了我们再去调它的样式，CTRLCCTRLV。

牛逼诶。就多复制一个好。再来刷新，诶，这不是我们的。这个啊。刷新一下。你看是不是出个单了啊，现在没问题了，出个单，但是大家知道我这边的所有内容，是不是让它紧挨着右侧才对啊。对不对，哎，所以这里边我需要怎么办，你看啊，我能不能给他这个叫什么扎。Content为什么为between，是不是两边靠啊？但你看这个时候我能两边靠吗？刷新。可不可以，这没问题，你看所有的都是两边靠拢了吧，哎，两边靠拢这没问题了，那同样这每一个元素之间，每一个这里边的这个元素之间，我都让它妈精杠top啊妈。杠，Top top。

给了多少？给了五项数的距离。啊，或者给慈善数句都行，对吧，来。它有这么一个距离，好了，这是不是距离拉开了，哎，那OK，都完事以后，那咱们再来看它这个原原有的啊，原有的这个直接我给它缩小了。嗯。怎么没有说话呢？这个没问题的啊，这是说话的啊。我先给它放大。放大以后用手机端来检测啊。来这个再缩小好了，缩小到这样以后，你看这都没问题了，对吧？哎，这都没问题了，那没问题以后接下来这些边框我是不是都可以去掉了。对吧？哎，但是你注意啊，我鼠标放上来，你看鼠标放上来的时候，它有没有一条边框，它是有的对吧？那也就是说在我最外形放元素的时候，我左右两边是不是也要给它一个距离空出来才行，那最外层是谁？是不是它的外层是它呀，所以这里边的拍顶pd ing拍顶左右两边我要给它一个五像数对吧？上下我看需不需要了啊，上下的话我们不需要了。

上下不需要了，对吧，那就剩左右两边了啊呃，左右两边的话，我就直接0PX5PX好。再来刷新。你看啊，这边没问题了，对吧，而这个右边的右边是不是还没有啊，右边的话，这里边我没给他设置。叫什么吗？Box-size等于border box对吧？没给他设置这个啊。那变成怪盒啊，OK，那这回它就开始进行缩放了，对吧，那进行缩放以后，那接下来是不是就它有鼠标放上去它有边框对吧？鼠标放上去它有边框的话，我就没有必要让它有个马top了，因为它其他都不显示嘛，对吧？来把它注册掉，注册掉以后现在你来看啊。刷新。没有问题对吧，没有问题，接下来是鼠标放上去才会有边框，那鼠标放上去的话，这里边直接给它点P冒号，How。

然后给他一个build啊，BORDER1项数实现的井号CCCC，这么边框Bo啊。好。然后再来。刷新，然后这个面看鼠标放。放是不是带边框了，看到吗？放是不是带边框了，哎，带边框，但是人家那个边框是什么样的，你看好了，人家那边框是带阴影效果的，看。看到了吧。是不是有一这个阴影效果啊啊有一点点阴影效果，所以这里边我也给他一个阴影效果啊，叫做这里给他一个什么呢？叫做box-settle然后比如给他2PX2P模糊度也2PX井号CCCC，好现在我们来看。哎，我先看人家的是权。哦。也是全部阴影对吧，那OK，那全部阴影的话怎么办？我就是0PX，横向不偏移，纵向不偏移，然后呢，让它外延值偏移一个2PX对吧，给它模糊度一个模糊度一个外延值，那OK，那现在。

再来。刷新。好来，你看鼠标放。这没问题对吧，随便放没问题，但没问题大家看了上下是不是就重合了，哎，所以上下重合了，那刚才我在设置拍顶的地方，我给了个上下左右为十，还有这块的拍顶，这块拍顶的话，我是不是也就一样了，直接给他一个拍顶。十像素就可以了。走，你。是不是又缩小了，这回你看周尼诶诶这个没问题了吧，你看边框阴影是不是都有了，哎，都有了以后一样啊，我这个给它放大一点啊。啊，我觉得5%十来100%。好。来走，你这个没问题了吧，但是大家还有一个问题，什么问题呢？就是人家放在顶是有一层，有一层什么，有一层这个内容的，这就是有一个你看。是不是有一个这个。叫什么玩意儿，有两个东西相交对吧，然后最后重叠到在一起了，没错吧，哎，所以这里边我也需要去给它设置，那怎么设置呢？反正它是一前一后呗，对吧，这是每一个元素看好了，我在每个元素前面selection给它来一个空的selection做定位就可以了啊这块我也来一个selection空的selection做定位，那么这个selection我给他也一样啊，定一个class，比如说这个class等于什么呢？等于这个叫做P杠阴影。

啊杠阴影好了。我就先做一个就行了啊，点它。然后它的宽度是多少，100%宽对吧，它的高度h he ID是多少，是不是也100%高，因为它需要跟什么，就是我负原素多宽多高，我就多宽多高，对吧？然后我们给他一个边框啊，Board border移项数实现的红色，好了，现在我们先看它在哪啊。这不是我们的，这是我们的来刷新。诶在这呢，看是不是给他顶下去一个对吧，那么咱说了这个家伙他是在哪里的，你看好了啊，看好这个代码关系，这个家伙是不是在product里边对不对，所以它我得干嘛，我得做的，给它做成什么定位才可以啊，那他怎么定位呢？首先这里边。

我说它不能占据原有的物理位置去定位吧，哎，所以我们去找到这个product。井号product的商品区块不对，我是不是有个点product呀，在这呢啊，我给他做一个什么this DS play为这个。呃，错了，不是display，叫什么position么？POI position po为相对定位，它是相对定位的话，那它下边是不是就可以做绝对定位了，哎，我那个。写哪去了？Product。我YY呢啊，YY在这呢，啊YY不往这写往下写。商品这个动画效果。好往这写了啊，往这写以后，那咱们说了它应该是什么，它应该是绝对定位po。

POI position等于阿8UTE对吧，绝对定位以后，接下来咱们来看，这个时候它就不会有那个那什么了，它是不是在这儿啊，哎，那在这以后一样，它负类是多大，咱们来看啊，这是不是product的，你看product，你看product这么大。它呢，它也大概大概这么大对吧，但是它的定位是没变的嘛，来left，比如说为零对吧，然后top也让它为零好了，这个时候咱们来看啊。刷新。你看是不是就跟它的一边大了，看到了吗？但是呢，它注意它我鼠标在放的时候，它是不是相当于再从哪再从这个角度这么往上过来，下面还有一个下面是从这个角度过来，最后他们两个重叠，然后形成了这么一张一个效果，对不对，你看这里面是不是也是啊，你看我手要放看到了吗？一个是从上面过来的，看到了一个从下面过来的，没错吧，哎，我们先不管下面的，我们就先管上面的，那这个东西我肯定要给他定位走，而且我要给他什么，给他一个背景色才行嘛，你看人是不是有个背景色。

哎，这个背景色，我看一下这是选的什么颜色的背景。颜色。这呢吧，就用这个，咱也用这个颜色了啊，CTRLC我给他拿过来。好，它的背景色。B GR ground给他一个这个颜色好了，给完这个颜色以后，这回咱们再看咱们自己的啊，来刷新一下。你看是不是也有了哦，有了有了，但这个颜色哦，这个颜色不是那什么，它得有一个什么透明度吧，那OCI，比如说为点点三吧，给它一个点三透明度啊。走，你。你看是不是就有这个透明度了，有了这个透明度，注意它是从上面下来的，所以我要给它定位到上面才行吧，所以这个left我它距离这里边应该是负的100%，负100%啊，然后top呢，距离上面也是负的100%，这样的话它是不是就上左上角去了，对吧，都为负100%，是不是上到这个角来来你看刷新。

你看是不是上到这来了，看到这块了吗？哎，但是大家知道上到这肯定咱也不能让它显示对吧，不能让显示，那它归谁所有，是不是归product所有，所以这个product我们就该设置什么呀，设置一个O啊。Flow等于hidden，是不是超出部分隐藏？那现在你看还能看到它了吗？诶是不是就没有了，没有以后接下来鼠标放到它以后，鼠标放到这个pro大以后，是不是它还要再显示，所以这里边啊，我就直接在下面再写了啊，你看好了点pro。Product冒号号，当鼠标移动它以后，移动它以后干嘛呢？我让它里边的谁呀，点product-YY这个家伙的定位left为零对吧，然后top也一样为零，是不是就回来了。哎，那现在你来看啊，我来刷新。刷新完以后鼠标放上来，诶。不选它啊，你选它不好，看来放你看是不是就回来了，看到了吗？鼠标离开是不是就没了。

哎，我刚才点错了啊，来放回来了，离开是不就没了，哎，但是他回来是慢慢回来了，所以这里面我们需要给他设置一个什么，设置一个动画吧，叫什么传。设置一个过渡对吧，所有的标签点三秒完成，然后用它用LA的方式来，这个我们再看啊。刷新一下。好。诶，这个是不是过来了，看到了吧，哎，再刷新看啊。是不过来了，当然啊，这个边框我们肯定不能要了，对吧，红色边框可以给它去掉了啊。诶，不是这个页面，这个页面刷新。点啊，是不是过来了，哎，那么同样他再过来，下面是不是也有一个，那下面这个我再来一个。这个叫什么？也叫做class，等于叫做p Du阴影，这个阴影E啊YY1，那YY1的设置方法跟Y2是略有不同的，它需要靠底部对吧，所以这里面点YY1它的一样宽度依然是100%对吧，高度呢也为100%，然后还有什么，还有它的定位方式还是po SI position等于阿八，但是它的life的距离左侧是不是100%对吧，这个100%，然后呢，它的top呢，距离顶部也一样是100%，都是正值，因为它要靠右下角对吧，然后BA它的颜色依然是为这个颜色。

好，然后最后OPACI等于点三都一样的对吧，那同样当我干嘛呀，当我这个再给他一个how的时候，那是不是逗号，还有谁好呢。还有它和我CTRLCCTRL为这个叫做Y啊，YY是不是它俩一样的，哎，都为零就可以了啊，那现在你来看啊，这里边我们来刷新一下。刷新完以后等于看好了点。诶诶。我不就YY1有有错了，哎，好了啊好了，刚才可能没刷新过来看这回看。

啊，我只给这一个设置了啊，其他的没设置，所以不好使啊，那OK，那现在完事了，那最终我是不是要改一下，也就是这个product，这下边所有的都需要干嘛删掉，我只留这一个最终版的product，对吧，我多一个商品，我就循环这么一个product。哎，那OK。几个了，一打三。4567个对吧，那OK，我还是留个单出来啊，因为留个单我们好调啊，我们好看。好了，那现在你看所有的product是不是都有这效果了，哎，那有完以后，接下来的多余的边框我们就不要了，就给它去掉吧，找到最外层的边框，先看一眼啊，先看一眼。原版的啊，原版的没有边框了，对吧，没有边框了，它这里边。啊，这块还有下边框对吧，那OK，那我就把最外层边框去掉就行了啊，最外层的边框在这里边，我们来找一下叫做井号吧。这是动画往上来普大点，找井井号普大的这个把它去掉好了，去掉完以后这回我们再回到我们自己来刷新。

OK，没有问题对吧，下面为你推荐，为你推荐完了以后，接下来就是每个商品对吧？放大放大放大商品放大一直在放大，注意当我大到多少，大到七百五的时候，也就是说当我大屏的时候，大屏的时候是不是就要变换样式了。没错吧，所以在这里边我就直接把大屏的做到了啊。来大屏这块咱们来看一定要找到pro pro这呢。对吧，它当前宽度是48%，那如果到大屏的时候呢，那我就要看大屏里边，我要需要给它显示几个显示几个，我是不是对应的给它缩小啊对不对。所以这里边那到大瓶这里边啊。叫做。商品啊。好拿过来，当它到大屏里边，它的WTH宽度，Width宽度多少呢？就等于clc，比如这里边我开始做算了，100%的宽度让它除以，除以多少呢？除以个。

除以个五吧，啊，就相当于每行显示五个了呗，对吧，那现在我们先看啊来刷新。看啊，这都没问题对吧，它只是在放大放大放大放大到到多少，到700以后来。是不是对了，但是注意啊，对是对了，你看到了，由于什么我们给他了什么东西给了这个叫做。这叫什么玩意儿？呃，伸缩核的方式，我是不是设置了让他强可以让他换行，但换行以后注意，换行以后它的每一行是不是都是开头空点，结尾空点，所以到大屏以后，我还能让他这么换行了吗？是不是不行了，我必须都让他什么以左侧开始了，所以这里边我要去找找谁呢？找我们换行的那个地方，看给谁给他换行。找到伸缩盒的位置。看到了吧，是不是他给换行了，所以他到大屏的时候不能去换行了，对吧，那OK，我给他一个注释。不是注释啊，在这里边他到大屏的时候，不是不能换行了，可以换行，但是呢，你的这个。

摆的样式就不对了，对吧，那就是just content，为什么为这个。Star，从开始啊。对吧，从开始，那你看刷新。这不就过来了，看到了吧，哎，这就没有问题了，然后一样。你看好了，我把这个关掉了啊，这次就是我大屏的吧，但这大屏你看好了是不是太大了。对吧，这个内容我是不是得缩小啊，所以我应该呢，把它的最外层，最外层是谁，最外层是不是就是井号那个家伙，哎，井号PD它我们的宽度要给它设多少，设置为七十百分之七十，对吧，然后Mar井Mar gn Mar井上下为零左右自动好。这个时候你再来看啊。刷新。OK，是不是到这儿来了，哎，看好了，这回对了吧，哎，到这儿来以后，哎哟，它的这个下边是不是还没有变换背景颜色。看到吧，那也不好看吧，那是不是他到这块的时候，整个这块也得变换背景颜色，那就何必麻烦自己呢。

我就不用这么设置了啊，到大屏的时候看好了，这是不是大屏啊，大屏的时候我让这个HTML的背景颜色BA井号F1是不是全都变了。哎，这回就没有影响了啊，来刷新。你看这个是不是全都变了对吧？哎，全都变了啊，全都变以后，诶我之前有没有白色的我就忘了啊，这块是白色，OK，这块是白色没问题对吧，然后底下这里边一样，底下这块商品区肯定也是白色的吧，应该你看看是不是啊这里边。这里边。来换成大屏。给它缩小掉。哦，人家人家还不是呢，人家本来就是白色是吧，人家本来就是白色啊，那我们可能给设置错了是吧？那OK不要紧啊，既然我们都设置到这儿了，那就设置到这了，但最终呢，这里边的内容是白色，那我就给里边内容改为白色啊，里边内容是谁，是不是还是一样，它它的BAGR为井号。

F，我给它变成白色啊，好了再还回来。刷新。就变回白色了那一样，这个为你推荐字体是不是要大一些，哎，不能那么太小了，你看人针就很大对吧，人家这哎这呢这就很大对吧，所以我要给他也变回来啊，那找到孩子自己推荐自己推荐是谁呀，来直接在这块我们索引过去。他。调回来，然后一样在这里面继续点它，它的方杠S为多少？为16PX。Withs。现在你来看啊，因为这个大屏的时候，我默认是14对吧。调过来这回没问题了吧，没问题以后来取消，其他的取消，你看这回我的页面是不是就OK了，哎，OK以后那其他的肯定都没有问题了啊，这回其他的没有问题了，没有问题以后接下来干嘛呢？您的这个是不是还有个边框，你看是不是啊。这里边。

还有一个什么，还有一个边框嘛，那我是不是也得找到这个元素给它加个边框，但是它的这个元素是谁呢？是下边的这个东西对吧，那下就是它呗，它给它一个boardd啊，包移像素实现的井号。CCC。好了，大瓶的我们也搞定了。是不是有个边框对吧，但我看一下这个边框对不对啊，我感觉这个边框跟原样也不一样啊，因为边框往下一点对吧，所以我们在大屏的时候，这里边我们给它设置一个marin top Mar margin top为十项数。现在再来看。刷新OK，边框是不是就有了，哎，这其他都没问题了，那现在我们再来检索一下啊，检索成小屏的。来，你看好了。就看在说到七百五左右的时候有没有问题啊。一套七百三没有问题吧。

对吧，你看到七百五的时候没有问题，只那内容字这么大，那没办法了，对吧？哎，那往下来你看是不是就回来了对吧？那同样我们拿IPHONE6来看IPHONE678，你看我的文字对吧？这些都是没有什么没有问题的吧，哎，同样这里边我选中哪个该怎么变化怎么变化对吧，你看。有啊。是不是就没问题了，哎，那怎么这样的话，我们整个首页是不是就搞定了。