0基础前端项目实战，CSS实现效果电商商品展示效果原创

大家好，我是爱编程的清新老师，今天我们给大家讲解常见的30个CSS网页布局小案例当中的第三个案例就是这样一个产品展示的效果啊，那么接下来我们就正式开始写代码了，那么首先我们要在这里新建一个网页文件，我们给它取个名字啊，叫做产品展示效果，点HTML回车。好，接下来我们按住shift键感叹号，按住回车键，就可以调出我们这个网页的骨架啊，我们把左边这里搜索起来，好，然后我们来给它取个名字啊零三杠产品展示效果好，看JS保存，那么接下来我们就看一下我们今今天要开发的这个效果啊，我们来看一下首先我们第一步应该从哪里开始入手啊，首先第一步我们是不是要在页面当中构建这么大的一个长方形的区域，用来放我们这个内容啊，好，所以首先我们在页面当中构建一个长方形的区域啊，我们得用div来写间括号div，然后我们给它取个名字class product，好，那么接下来我们要给它添加样式style太TXT杠，好，那么接下来我要给它添加。

宽度和高度构建一个长方形的盒子，所以我们首先点拉大大括号，我们给它添加宽度啊，那么它的宽度是多少啊，我们需要用到一个工具来测量，我们来看一下啊，那么就是这个工具，我们来给大家看一下这个工具啊，那么这个工具的话叫做PS code，也就是我们的像素大处啊，如果需要的话可以在啊评论区留言啊，可以获取好，我们来看一下啊，那么我们来量一下这个图片，这个区域它有多宽，我们可以选中这里有个看到没有个尺子尺子这样的一个小图标，然后从最左边这个线这里点一下，然后往最右边拉一下，拉到这个边框，这里大家可以看到没有，是不是就可以看到了啊，那么它的宽度是多少？268像素啊好，所以我们给它添加一个宽度268PS，然后我们再给它添加一个高度，当然它的高度一般来说是随着内容往下沉的啊，那么。

在这里我们先给它写死，后面我们不需要把它删掉就可以了，现在是为了给大家看效果，然后我们给它加上一个背景颜色，红色的countl加S保存，保存好了之后我们来右击啊，我们来查看一下效果，好大家看到没有，这个时候我们就看到了这样一个长方形的这样一个区域，好我们把它往外面拖一点啊，大家看一下OK了，之后我们来看一下啊，那么这个红色的盒子与上面这里是不是有间距啊，这与左边这个地方也有一些空白的间距，那么这个间距是因为我们的浏览器在最开始编译的时候，它给谁加的呀？我们来看一下给我们这个body加的，看到没？那我们选中这个body的时候，它与浏览器上面和左边是不是有这个八像素的间距啊，看这里也可以看得到是吧？啊打开好，所以我们需要把这个默认的外边距给它清除掉，所以我们把给波底清掉默认的外边距啊，0CTRL加S保存好，保存好了之后我们来看一下啊就。

没有了，好，那么接下来我们要干嘛呀？我们来看一下，那么接下来我们要把这个盒子设置在水瓶居中的位置，我们来看一下啊，也就是说这个盒子它与浏览器的顶部有一点一定的高度，然后怎么样在水平方向是居中的，也就是说左外边距跟右外边距相等，好，我们来给它加上一个设置自动的代码马，然后我们给它加上一个上外边距50左右，外边距自动相等，然后下外边距是0PX，好，我们来看一下啊，这里第一个是上外边距是50左右自动相等，A to，下外边距是什么？0COUNTL加S保存好我们来看一下诶就可以了，好，OK了，之后我们接着往下看，那下一步我们看一下它是不是有一个这样的一个边框线呀，所以接下来我们要给它添加一个边框线，边框border，那么给它添加移项素so里啊井号三个D是灰色的意思啊，那么。

这里就相当于是给它添加了一个边框啊，它是什么移像素实线，然后什么灰色的边框，OK好OK了之，我们来看一下啊，当然这个背景太亮了，所以看不到，我们把这个背景颜色给注释掉，按住count加一个反斜杠啊，就注就可以把它注释掉了，好大家看一下这样是不是OK了，那么OK了之后我们接着往下看啊，那下一步我们要干嘛？这里面是不是有一张图片呀，所以接下来我们要在里面插入一张图片，好，我们来在它里面插一张图片，Img，按住回撤啊，就可以调出这个标签了，好，然后我们来把这张图片插进来，IMAS杠啊，在哪里啊，我们来看一下啊，这张水壶的图片是哪一张图片就是这个啊，OK，好，我们来看一下我们的图片在哪里啊，我们的图片是放在这个image文件夹里面的，所以我们从这里对吧，这个页面去到这个image文件夹里面。

去找这张图片啊，所以是image这里啊，好，然后我们给它加个描述水壶。好，OK了之后我们来保存一下啊，保存之后我们来看一下效果啊，当然这张图片很大是不是啊，所以我们要把这张图片给它缩小一下，我们来给它加上一个什么宽度啊，好，那么它的宽度是多少啊，我们可以看一下这里的宽度啊，我们可以在这个地方审查元素，这里有个检查啊，大家看到没有，然后这里有一个图片，看到没有啊，这个图片给它设置的是195，看到没有啊，195好，所以我们给它加上一个宽度，195啊，我们一般添加图片的这个宽度和高度的时候啊，我们要么加宽度，要么加高度，我们会让它自动缩放的，这样的话它就不会变形啊，我们先把这个关掉，OK了之后我们来看一下啊，那这样子是不是OK了，OK了之后，但是这张图片它没有在水平方向居中，而我们这里是要在水平方向居中的，所以接下来我们要控制这张图片在水平居中，好，那么我们来看一下，我们要控制这张图片在水平居中的话，它是放在这个。

Div里面是吧，所以我们可以给它加上一个杠center啊就可以了，好，我们来看一下，诶，大家看一下是不是在水平方向居中了，备注一下，水平方向居中，OK好OK了，这我们接着往下看啊，那下一步我们要干嘛？你看这里有个快，怎么样快速煮水，安心饮用是吧，我们要控制这个蚊子的样式，好，接下来我们来给它加上一个P标签啊，用来控制我们这个样式啊，我们把这个文字拿过来，然后我们可以给这个P标签取个名字啊display啊啊display啊描述是不是我们来叫好OK了，之后我们同样的，我们来看一下效果啊啊，当然这个时候你好像看不到，是不是还看不出来，我们可以先给这个P标签加上一个啊这。

不要乱点啊，我们来给这个P标先加上一个边框，我们来看一下，点一下啊border，我们给它加上一像数的边框啊，看一下效果啊，哎，大家看一下啊，当然它与这个上面这个间距啊，肯定比我们之前的要大，所以我们来看一下啊，来检查一下，我们来看一下这个P标签，我们就可以发发现啊，我们来看一下，我们来看一下，当我选中它的时候啊，我们来看一下这个核模型看到没有，它是不是有一个默认的16像素的外边距啊，也就是这个P标签，它也用怎么样自带的默认样式，所以我们也要把它给干掉啊，所以在这里加上一个P就可以了，加完之后大家看一下它与上面就缩回去了是吧，我们来看一下，我把这干掉，你看一下是不是往下移了一下，好，我们来把它干掉啊，好，那么OK了，之后我们接着往下看啊，那么接下来我们要干嘛啊，接下来我们就要控制这个里面文字的颜色了。

对吧？啊，当然它为什么会是在水平方向居中的呀？啊，因为我们在这里加了一个takes along是不是啊啊，所以他这也是居中的，他会把这个样式继承过来啊好，那接下来我们要控制这个里面文字的怎么颜色，我们来给它加个颜色呗，Color，那这个颜色是什么颜色我们不知道，所以我们同样的要用到我们这个工具来怎么样看啊，好，我们来看一下，我们选择这个抓手的工具，看到没有点一下，点一下之后我们可以按住CTRL加加它就可以放大，好然后我们这里有个吸管看到吧，然后在这个地方我们来标注一下就好了啊哎，再放大一点吧，嗯，在这个地方点一下，好，我们来看一下这个颜色啊，这个颜色是多少？

井号。845。什么来着？看一下845F3F f3FOK，好，我们来回到我们的浏览器，我们来看一下，哎，这个时候看一下它的颜色就变了是吧？啊，当然这个字体的大小我们也控制一下，放这个size，我们给他16号字就可以了，OK，好，OK了，之后我们接着往下看啊，那么下一步我们要干嘛了？那这个效果我们已经做完了是吧？那下一步我们就要做下面这个区块了啊，所以我们同样的来分析一下，那么接下来我们同样的要在下面构建这么大的一个盒子是不是，然后这个盒子它有一个灰色的背景啊，然后还有一点我们来看一下，就是这个盒子里面的内容，大家看一下是不是与这个盒子之间是有一些间隙的呀，就上右下左是吧，OK了，好，所以我们来看一下怎么做啊，所以首先我们要在这个地方来构建一个div和模型点上好了。

Product-test，好，然后我们来看一下啊，接下来我们要干嘛，我们来看一下，点上product，然后点上product杠，我们同样的啊，宽度我们先不加啊，因为它自动会有宽度，是不是我们给它先加个高度啊，这个高度我们加个100，当然后面我们不需要的啊，这个高度后面也是需要什么呀，删掉的，我们这只是为了给大家看效果啊，所以我们给大家加上一个高度啊好，然后我们给大家加上一个背景颜色来格拉的卡啊，背景颜色同样的，我们来吸一下吧，我们把这个放大放小吧，好，这个抓手啊，选中这个抓手count减减就可以把它缩小，然后同样的这个吸管我们来吸一下吧啊然后这个背景颜色是井号F8F8FF对吧，F8，好OK了好OK了，之后我们来看一下效果，那大家看一下它是不是就有。

这样一个灰色的背景啊，好OK好好OK了，之后我们接着往下看这个灰色的背景，这个盒子与这个上面这个标题我们来看一下它这里是不是有一定的间距啊标题那我们来看一下，也就是说他们这个地方是不是有一定的间距啊对吧？好，所以同样的我要给下面这个盒子给它加上一个marin-TOP20像素，OK，好，当然你如果很要很精准的话啊，你可以在这里什么呀，同样的这有个测量工具尺着你知道吧，从这里往上面拉一下就好了啊就可以了，好，那么OK了，这我们接着往下看啊，那么下一步我们刚才说了是吧，这个盒子里面的内容我们来看一下，这是盒子是吧？这个盒子里面的内容跟这个盒子四边是不是都有间距啊啊，它其实是给外面这个盒子加了内边距，所以我们可以用一些文字放到这个里面来啊。

就是我把这个文字乱七八糟的丢进去啊，我们先来看看效果啊，先放进去，放进去之后我们来看一下，大家看一下这个文字是挨着这个盒子的是吧？好，那么接下来我们要给这个盒子加上一定的内边距拍点，那么给它加上上下15像素的那编辑，那大家看一这个时候内容与盒子之间就有间隙了，OK了啊好，那么OK了之后我们先把这些代码删掉啊，文字删掉好OK了OK了，这我们接着往下看啊，那下一步我们要干嘛？下一步我们就是要做这个效果是吧？好，那么这个效果我们来看一下啊，我们同样的，我们来用一个div把它包裹起来，所以我们给它来个product。

干嘛标签啊？好，然后我们来看一下，接下来我们在这个盒子里，我没有干嘛，这里其实是四张小图片，所以接下来我们要把这四张图片给插入进来，我们来插图片吧，IMAS杠好，我们来看一下第一张图片，直播中好，看一下直播中好，然后我们来按住键out键啊，诶大家看按住count键，诶按住out键和shift键，然后向下的箭头可以复制啊然后我们来看一下第二张图片，第二张图片是特惠啊，我看一下特惠是好像是这个啊，我们来看一下第三张图片是30天保价，第四张图片是售后啊有好OK了，我们把这个文字也改一下啊，这个是特惠优惠的惠。

然后30天保价，然后是售后面有OK好OK了之后我们来保存一下，我们来看一下效果，大家看一下这个图片太大了是不是好，所以接下来我们要把这个图片把它给设置一下尺寸啊，我们统一给它设置一下高度啊，把它的高度设置为20就可以了，大家看一下啊，大概就这么大，所以我们同每一个都设置一下，好，这个也设置一下，这里要空格一下好保存，保存好了之后我们来看一下，哎，这些图片就排在这里了，是不是好，但是这里有一个细节啊，大家一定要认真啊，注意看一下啊，我们来看一下这个图片跟图片之间是不是有一点空隙啊，大家有没有看到，按照正常来说，我们图片跟图片之间是不。

可能产生空隙的，它为什么会产生这个空隙呢？我们来看一下，比如说我们把这张图片，我们把它跟第一张图片给挨着，大家可以看一下，要把它挨着，这里没有任何的缝隙，我们来保存一下，大家看这个时候它这个空隙就消失了，对不对啊，所以说它这个空隙是怎么产生的呀，就是因为我们加了换行之后啊，它会把这个换行跟这个空格进行编译，那编译之后啊，它就会有这样的空隙，但是不同的浏览器这个空隙的大小肯定是不一样的，所以为了保证兼容性，我们肯定是要把它这个默认的空隙给干掉，对吧？然后我们自己来单独给他架，所以这里是一个非常非常重要的知识点啊，同学们一定要认真听，OK啊，如果等一下我讲的有用的话，大家就刷波小鲜花好不好啊，点个赞关注一下，好，我们来看一下啊，我们刚才说了这个空隙是因为换行知不知和空格被编译周造成的，所以我们要把这个空隙给去掉的话，我们来看一下啊，非常的简单，我们只要做一件事情啊，我们来看一下。

点上一个product，点上product yest，然后再点上product干嘛？好我们来看一下，也就是找到他下面的他下面的他是吧？好，然后我们来看一下我们加什么啊，我们加一个代码叫做fo-size，我们把它设置为零，诶大家看一下这个时候它是不是没有了，相当于我把这里面的字体大小设置为零，所以你编译这些空格，相当于也就什么，也就是零像素，所以这个空格就消失了啊啊，所以这里非常重要啊，可以来波小鲜花，好，我们来看一下啊，这是怎么样去掉图片空隙。

啊，这是需要开发经验的是吧，没有开发经验你都不知道他是怎么出来的啊，所以这里很重要，一定把它记牢了啊，后面经常遇到这个问题啊。好，OK了之后，那接下来我们需要单独来给它添加外边距来产生空隙是不是，所以我们可以干嘛？我们可以单独给图片加空隙，好加外边距了，来看一下啊，复制过来吧的敲好IMG，然后我们给他每张图片加上一个上下是零左右两项数的外边距来看一下，诶大家看一下，这样就OK了，好，那么OK了之后我们接着往下看啊，那下一步我们要做什么？做这个元米电水壶啊，那么这里的话，它是一个标产品的标题，我们可以用我们的H3标签来做啊好，所以我们在这个大家看一下我在哪里写啊，我是在大家看一下，在这个标签的下面啊，也是包裹在这个灰色的这个div的盒子里面，好在这里加上一个S3标签啊，元米水电火把它拉过来，好OKOK。

在这我们来看一下啊，哎，大家看一下这个原米水电湖默认的雨，这个上面也有这么大的一个间局是吧？这间局又是从哪来的呀？啊，反正我不知道是不是，不知道怎么办，检查呗，来看一下呗，是吧？这鬼东西从哪来的是吧？好，我们来看一下，当我们来选中这个H3的时候，我们来看一下，诶首先我们来看核模型看的诶你看又一个默认的外边距了，是不是说明H3标记它也有默认的外边距，所以首先我们也要把它的默认外边就给干掉，所以我们在这里逗号是吧？把H3也加上C加十保存，你保存一完，你看这个间距就不见了是吧，乖乖的没有了，好，那么OK了，之后我们来看一下啊，那接下来我们要干嘛？我们要控制这个文字的大小，同时也要让这个文字与这个上面有间距，所以我们要做的事情就分两步了啊，我们来看一下，点上product，点上product t ST啊，好，S3 OK，好，我们来看。

看一下啊，是不是找到它下面的，它下面的X上呀，OK，好，所以我们首先我们要给它加上一个什么，我的SIZE20OK啊好OK了之，我们来看一下这个文字有没有加粗啊，没有，所以这里是加粗的是不是，所以我们要控制一下文字的粗细，方杠Y好，我们给它个400啊，大家看一下诶，就没有了，好，然后我们要有这个文字与上面有间隙的话，其实是给谁加呀，其实是给H3标签加外边距，所以我们来给他首先加个边框看一下吧，好，大家看一下是不是，那我要与上面有间距，是不是给这个S3加个外边距就可以了，所以妈给杠透给他加个十像素就可以了啊，当然你如果要精细化的话，你就按刚才我这里说的啊，你就去量。

就好了，比如说你从这里量两两两啊，哎，好像有15项说说那我们就改成15吧，就两好好，然后我们来看一下效果啊，基本上就这样了，好OK了之后我们接着往下看啊，那下一步我们来看一下，就是这个是吧，这个价格了，这个价格很简单的，我们用个P标签包裹就可以，好，我们把这个价格复制过来，好同样的我们来看一下啊，诶大家看到没有是吧？好OK的时候我们也要对它进行样式的设置啊，我们来看一下，我们把这个复制一份，然后P啊括号，首先第一个我们来看一下控制什么，第一大小要控制一下，颜色要控制一下是吧，好。

所以我们来看一下。我们把它的颜色，颜色是哪个颜色，我们来看一下，我们来吸一下呗，来吸颜色，选中这个吸管啊来吸，哎，放大一点了，太小了是吧，不好吸，抗着加加啊，我再强调一下，然后再把它往上拖一下，我们来吸一下啊，吸哪个位置呢？我看一下，放大之后有点那个，嗯，这个颜色哦，A92我看一下啊，井号A92什么来着，A9211112啊，就这个颜色，好，我来看一下啊，OK，好，然后控制字体的大小，或者杠size啊，20像素啊，因为我写过，所以我知道啊好OK了之后。

我们来看一下，当然这个文字与上面也有一点间距，是不是大家看一下啊啊，所以我们也可以给它加上一个马ing刚TALK5像数吧，OK了OK了之后，接下来我们要干嘛？我们来把这些辅助线给他干掉，好，这个效果就这样子，然后再把上面这个辅助线也干掉，OK了啊好，我们刚才说了这个高度是我们给他加的，是不是我们说了按正常它的高度是随着它的内容自动往下撑的啊，刚开始我们是为了给他看效果，所以我们把最外面这个盒子加了高度也给他干掉，来看一下是不是OK了，然后这个灰色的区域我们刚开始也给他加了个高度，100看效果是不是，所以我们也要把它给干掉，所以大家有没有发现啊，是吧？我们前期的时候，我们可以给他加一些高度啊，是为了方便大家看效果，然后面我们做完了之后把它干掉就好了啊好，那么这样一个效果是不是出来了啊，OK了之后我们来看一下啊，当然还有最后一个效果啊，我们一般。

这个产品列表它是可以怎么样，鼠标点击之后是可以跳转的，对吧，它可以跳到一个页面去的，所以我们要给它整体加上一个超链接啊A标签，那我们超链接加到哪里啊，全部要我们就加这个最外面啊就可以了，你看到没有加个A标签，超链接标签啊好，然后把这个A剪切一下，放到最外面，放在最后面包裹它就可以，我们把它缩进一下，按住table键把它缩进啊好，就这样OK了之，我们保存一下啊，保存好了之后我们来看一下啊，这个时候大家看鼠标放上去是不是OK的啊，当然也可以点了是不是啊，点击之后，比如说我们可以给它加上一个三，我们来看一下啊，我们跳到官网去，嗯杠3w.i.edu点，然后我们让他在新窗口打开啊，Target干烂，看这S保存保存。

了之后啊，那我们来看一下啊，那接下来我们来点击一下，点击之后大家看一下它是不是可以跳转啊，OK了啊好，但是问题又来了，是不是你有没有发现我们明明布局得挺好的，结果加了个A标签超链接之后整个就瘫痪了，是不是？你看什么下划线也来了是吧？文字颜色也变了是不是啊，所以这个地方大家一定要特别注意啊，这就是因为我们的A标签造成的啊，我为什么留在最后加，就是想要让大家看到A标签加了之后会给整个页面带来什么样的问题啊，所以第一个A标签它会默认的给它包裹的文字加上下划线，所以我们不需要，不需要就要把它给干掉啊，我们在哪里加，我们在最外面加，用标签选择器全部干掉啊，所以选中A标签，然后加上一个。

Taste decre是不是，然后我们把它下划线去掉什么long，好大家看一下是不是没有了啊，全部都没有了是不是？好没有了之后，接下来我们来看一下，诶，这个地方这个文字颜色怎么变的，是不是，我们来看一下这个地方啊，这个地方是谁啊，这这个S3标签是吧？那么这个S3标签的颜色我们要把它改一下啊，所以我们来看一下啊，那在这里加颜色，我们来看一下，我们来加个颜色呗，什么颜色加个黑色，因为因为你没有给他加颜色的时候，它的颜色会默认的是继承谁的呀，对他默认的就继承了这个超链接的颜色啊，加完之后就没有了，他为什么没有改系，因为我们开始给他控制的颜色是不是啊，那们给S3再加个颜色就好了，只有这样就OK了啊，那么整个效果就没有问题了啊，当然这里还有一个隐形的问题，可能没有暴露出来啊，我给大家加个边框，大家就能感受的到啊，认真听啊。

这个问题很重要啊，我们给A标签加上一个波，然后加上一个红色的边框，我们来看一下B啊，保存保存之后你发现这啥玩意啊，这啥玩意是不是，这是啥呀？是不是啊，这个地方很神奇，是不是你都不知道这是啥玩意啊，所以这个地方很重要哈，我们用这个A标签包裹的时候，因为这个A标签啊，它是一个什么元素啊，它是一个行内元素，行内元素的话里面一般是不能放会计元素，一放会计员它就会有问题是不是？但是A标签它比较特殊啊，它可以放，但是我们也要把它转换成一个会计运算，所以在这个位置一定要加上一个display block，这样子就正常了啊，大家看到没有这样子，你看到是不是OK了，相当于所有的东西包裹在A标签里面了啊啊，所以这里是一个非常重要重要的知识点啊，所以用到这里一定要。

把它加转换为会计元素快好A标签啊，这个很重要啊，它是一个隐形的问题，我们把这个边框干掉就好了，还是为了给他看效果，那么这样就没有问题了啊好，整个页面的效果就制作完成了，如果对大家有帮助的话，大家可以点个小红心关注一下啊，需要这当然这个课程的话，我们给大家准备了这种详细的文档啊，就是比如说第一步要干嘛呀，是吧，比如说我们这个效果做出来，第一步干嘛，第二步我们要做什么效果呀，然后代码对应的代码就是这写好了，大家看一下产品描述样式看到啊，大家可以看一下啊，我们有详细的文档的步骤啊，大家看了啊，如果大家需要这个文档的话，也可以私信啊，我们来获取，好吧，那今天的课程我们就给大家讲到这里了啊，希望对大家有所帮助啊，拜拜。