css 实现抽屉效果

划走你就草率了， css 非常棒， 记得点赞关注哦！

这样的导航栏怎么做？这是 h t、 m l 代码，这段代码的作用是创建一个简单的侧边栏菜单。接下来是 c s s 代码。设置元素的定位方式为绝对定位，将元素向左移动一百二十像素。 设置元素的过渡效果，时间为零点三秒。设置元素的那边距为十五像素。设置元素的宽度为一百五十像素。去除链接的下滑线样式，设置字体大小为二十像素，设置字体颜色为白色。 设置元素的边框圆角弧度。这是在鼠标悬停时应用样式，将元素的左偏移设为零，即使链接又移回原始位置。 这段代码是为前面提到的侧边栏菜单中的每个链接定义了一些样式规则。这段代码的作用是为每个链接指定不同的位置和背景颜色，从而在侧边栏菜单中创建不同风格的样式。

这个效果怎么样？看着很唬人，是不是纯 c s s 实现的？一百九十多行，大佬们来说说你们的实现思路。

大家好，我是爱编程的清新老师，今天我们给大家讲解常见的三十个 css 网页布局小案例当中的第三个案例，就是这样一个产品展示的效果，那么接下来我们就正式开始写代码了， 那么首先我们要在这里新建一个网页文件，我们给他取个名字啊，叫做产品展示效果，点 html 回车。 好，接下来我们按住 shift 键感叹号，按住回车键就可以调出我们这个网页的骨架啊，我们把左边这里收缩起来。好，然后我们来给他取个名字啊，零三杠，产品展示效果。 好， ctrl g s 保存。那么接下来我们就看一下我们今今天要开发的这个效果啊，我们来看一下。首， 首先我们第一步应该从哪里开始入手啊？首先第一步我们是不是要在页面当中构建这么大的一个长方形的区域，用来放我们这个内容啊？好，所以首先我们在页面当中构建一个长方形的区域啊，我们得用 div 来写啊，间括号 div， 然后我们给它取个名字， class product。 好，那么接下来我们要给它添加样式， style type t s t 杠先生， 好，那么接下来我们要给他添加宽度和高度，构建一个长方形的盒子，所以我们首先点拉 dog 大括号，我们给它添加宽度啊，那么它的宽度是多少啊？我们需要用的一个工具来 测量，我们来看一下啊，那么就是这个工具，我们来给大家看一下这个工具啊，那么这个工具的话叫做 ps， 靠的也就是我们的像素。大厨啊，如果需要的话可以在啊评论区留言啊，可以获取。好，我们来看一下啊， 那我们来量一下这个图片这个区域他有多宽，我们可以选中，这里有个看到没有个尺子，尺子这样的一个小图标，然后从最左边这个线这里点一下，然后往最右边拉一下，拉到这个边框这里，大家可以看到，是不是就可以看到了啊？ 那么它的宽度是多少？二百六十八像素啊？好，所以我们给它添加一个宽度二百六十八。 ps， 然后我们再给它添加一个高度，当然它的高度一般来说是随着内容往下乘的啊，那么在这里我们先给它写死， 我们不需要把它删掉就可以了。现在是为了给大家看效果，然后我们给他加上一个背景颜色红色的 ctrl s 保存，保存好了之后我们来右击啊，我们来查看一下效果。 好，大家看到没有？这个时候我们就看到了这样一个长方形的这样一个区域，好，我们把它往外面拖一点啊，大家看一下。 ok 了之后我们来看一下，那么这个红色的盒子与上面这里是不是有一间距啊？ 这鱼左边这个地方也有一些空白的间距，那么这个间距是因为我们的浏览器在最开始编译的时候，他给谁加的呀？我们来看一下，给我们这个玻璃加的，看吧。 当我们选中这个拨底的时候，他与浏览器上面和左边是不是有这个八像素的间距啊？看这里也可以看得到是吧？啊？打开啊，所以我们需要把这个默认的外边去给他清除掉，所以我们把给拨底 清除掉，默认的外边距啊，零抗才加是保存好，保存好了之后我们来看一下啊，就没有了。好，那么接下来我们要干嘛呀？我们来看一下， 那么接下来我们要把这个盒子设置在水平居中的位置，我们来看一下，也就是说这个盒子它与浏览器的顶部有一点一定的高度，然后怎么样在水平方向是居中的，也就是说左外边距跟右外边距相等。好，我们来给它加上一个设置居中的代码 monkey， 然后我们给他加上一个上外编剧，五十左右外编剧自动相等，然后下外编剧是零。 ps， 我们来看一下啊，这里第一个是上外编剧，是五十左右自动相等 a u t o 下外编剧是什么？零， ctr 加 s 保存好，我们来看一下 a 就可以了。 好， ok 了之后我们接着往下看，那下一步我们看一下他是不是有一个这样的一个边框线呀，所以接下来我们要给他添加一个边框线，边框 border， 我们给它添加一像素 solider 啊，井号三个 d 是灰色的意思啊，那么这里就相当于是给它添加了一个边框啊，它是什么？一像素 实线，然后什么灰色的边框。 ok， 好， ok 了之后我们来看一下啊，当然这个背景太亮了，所以看不到，我们把这个背景颜色给注视掉，按住 ctrl 加一个反斜杠啊，就就可以把它注视掉了。好，大家看一下这样是不是 ok 了， 那么 ok 了，这我们接着往下看啊，那下一步我们要干嘛？这里面是不是有一张图片呀？所以接下来我们要在里面插入一张图片。 好，我们来在它里面插一张图片 img， 按住回车啊，就可以调出这个标签。好，然后我们来把这张图片插进了 images 杠。啊，在哪里啊？我们来看一下啊，这张水壶的图片是哪一张图片？就这个啊？ ok， 好，我们来看一下我们的图片在哪里啊？我们的图片是放在这个 inmite 文件夹里面的，所以我们从这里，对吧？这个页面去到这个 inmite 文件夹里面去找这张图片啊，所以是 inmites 这里啊，好，然后我们给它加个描述水壶。 好， ok 了之后我们来保存一下啊，保存之后我们来看一下效果啊，当然这张图片很大，是不是啊？所以我们要把这张图片给他缩小一些，我们来给他加上一个什么宽度啊？好，那么他的 宽度是多少？我们可以看一下这里的宽度啊，我们可以在这个地方审查元素，这里有个检查啊，打开了，然后这里有一个图片，看到没有啊？这个图片给他设置的是一百九十五，看到没有啊？一百九十五，好，所以我们给他加上一个宽度一百九十五 啊，我们一般添加图片的这个宽度和高度的时候啊，我们要么加宽度，要么加高度，我们会让他自动缩放的，这样的话他就不会变形， 先把这关掉， ok 了之后我们来看一下啊，那这样子是不是 ok？ 好， ok 了之后，但是这张图片他没有在水平方向居中，而我们这里是要在水平方向居中的，所以接下来我们要控制这张图片在水平居中。 好，那么我们来看一下，我们要控制这张图片在水平居中的话，他是放在这个 div 里面，是吧？所以我们可以给他加上一个 k， 刚来神童啊就可以了。好，我们来看一下。哎，大家看一下是不是在水平方向居中了，备注一下，水平方向居中。 ok， 好， ok 了之后我们接着往下看啊，那下一步我们要干嘛？你看这里有个快，怎么样？快速煮水，安心饮用是吧？我们要控制这个文字的样式。好，接下来我们来给他加上一个 p 标签啊，用来控制我们这个样式啊。我们把这个文字拿过来， 然后我们可以给这个 p 标签取个名字啊， display 啊， display 啊，描述是不是。我们来叫 disk river。 好， okay 的，这我们同样的，我们来看一下效果啊啊，当然 这个手机好像看不到，是不是还看不出来？我们可以先给这个批标签加上一个，不要乱点了。我们来给这个批标签加上一个边框，我们来看一下。点上 river 啊 border， 我们给它加上一像素的边框啊，看看效果啊。哎，大家看一下啊，当然它与这个上面这个间距啊，肯定比我们之前的要大，所以我们来看一下啊，来检查一下， 我们来看一下这个 p 标签，我们就可以发发现啊，我们来看一下，我们来看一下。当我选中他的时候啊，我们来看一下这个和模型，看到没有，他是不是有一个默认的十六像素的外编剧啊？也就是这个 p 标签他也有怎么样自带的默认样式， 所以我们也要把它给干掉啊，所以在这里加上一个 p 就可以了，加完之后大家看一下他鱼上面就缩回去了，是吧？ 来看一下，我把这干掉，你看一下是不是往下移了一下，好，我们来把它干掉啊，好，那么 ok 了之后我们接着往下看啊， 那么接下来我们要干嘛啊？接下来我们就要控制这个里面文字的颜色了，对吧？啊？当然他为什么会是在水平方向居中的呀？ 因为我们在这里加了个 tice 浪，是不是啊？所以他这也是居中的，他会把这个样式继承过来啊？好，那接下来我们要控制这个里面文字的怎么颜色，我们来给他加个颜色呗。卡了， 那这个颜色是什么颜色？我不知道，所以我们同样的要用到我们这个工具来，怎么样看啊？好，我们来看一下，我们选择这个抓手的工具，看到没有？点一下，点一下之后我们可以按住 ctrl 加加它就可以放大 啊，然后我们这里有个吸管，看到吧，然后在这个地方我们来标注一下就好了啊，哎，再放大一点吧。嗯，在这个地方 点一下。好，那我们来看一下这个颜色啊，这个颜色是多少井号？八四五什么来着？看一下，八四五 f 三 f f 三 f。 ok， 好，我们来回到我们的浏览器，我们来看一下。哎，这个时候看一下它的颜色就变了，是吧？啊，当然这个字体的大小我们也控制一下啊， 放他干 size， 我们给他十六号纸就可以了。 ok， 好， ok 了之后我们 接着往下看啊，那么下一步我们要干嘛了啊？这个效果我们已经做完了说，那下一步我们就要做下面这个区块了啊，所以我们同样的来分析一下啊， 那么接下来我们同样的要在下面构建这么大的一个盒子，是不是？然后这个盒子他有一个灰色的背景，然后还有一点我们来看一下，就是这个盒子里面的内容，大家看一下是不是与这个盒子之间是有一些间隙的，上右下左，是吧？ 啊？所以我们来看一下怎么做啊？对，首先我们要在这个地方来构建一个 div 和模型，点上 product gun taste。 好，然后我们来看一下啊，接下来我们要干嘛？我们来看一下，点上 product， 然后点上 product gun taste。 我们 同样的啊，宽度我们先不加啊，因为他自动会有宽度，是不是我们给他先加个高度啊？这高度我们加个一百，当然后面我们不需要的啊，这个高度后面也是需要什么删掉的，我们这只是为了给大家看效果啊， 所以我们给大家加上一个高度啊。好，然后我们给大家上一个背景颜色，白格兰的卡了啊，背景颜色同样的，我们来吸一下吧，我们把这个放大放小吧。好，这个抓手啊，选中这个抓手， ctrl 剪剪就可以把它缩小，然后同样的这个吸管我们来吸一下吧。 好，然后这个背景颜色是井号 f 八， f 八， f f， 对吧？ f 八，好， ok 了啊， ok 了之后我们来看一下效果，来，大家看一下他是不是就有这样一个灰色的背景啊？好， ok 了之后我们接着往下看 这个灰色的背景，这个盒子与这个上面这个标题，我们来看一下他这里是不是有一定的间距啊？ 标签我们来看一下，也就是说他们这个地方是不是有一定的间距啊？对吧？好，所以同样的我要给下面这个盒子给他加上一个 marking， 刚套二十像素， ok， 好，当然你如果很要很精准的话啊，你可以在这里什么呀？同样的，这有个测量工具尺子，你知道吧？从这里往上面拉一下就好了，就可以了。好， 那么 ok 了，这么接着往下看啊，那么下一步我们刚才说了，是吧？这个盒子里面的内容，我们来看一下， 这是盒子，是吧？这个盒子里面的内容跟这个盒子四边是不是都有间距啊？它其实是给外 这个盒子加的内边距，所以我们可以弄一些文字放到这个里面来啊，把这个文字乱七八糟的丢进去啊， 我们先来看看效果啊，先放进去，放进去之后我们来看一下，大家看一下这个文字是挨着这个盒子的，是吧？好，那么接下来我们要给这个盒子加上一定的内边去拍点， 我们给他加上上下十五像素的那边去。哎，大家看，这个时候那种与盒子之间就有间隙了。 ok 了啊，好，那么 ok 了之后，我们先把这些代码删掉啊， 文字删掉。好， ok 了， ok 了，这我们接着往下看啊，那下一步我们要干嘛？下一步我们就是要做这个效果，是吧？好，那么这个效果我们来看一下啊，我们同样的，我们来用一个 div 把它包裹起来， 所以我们给他来个 product， 干嘛？标签啊？好，然后我们来看一下，接下来我们在这个盒子里我们要干嘛？这里其实是四张小图片，所以接下来我们要把这四张图片给插入进来，我们来插图片吧。 i m a j e s。 杠，好，我们来看一下第一张图片，直播中，好，看一下直播中。 好，然后我们来按住 ctrl 键、 alt 键啊，哎，再看，按住 ctrl 键，哎，按住 alt 键和 shift 键啊，然后向下的箭头可以复制好，然后我们来看一下第二张图片， 第二张图片是特惠啊，特惠是好像是这个啊，我们来 看一下第三张图片是三十天保价，第四张图片是售后啊，好， ok 了，咱们把这个文字也改一下啊，这个是特惠优惠的惠， 然后三十天保价，然后是售后免邮。 ok， 好， ok 了之后我们来保存一下，我们来看一下效果，大家看一下这个图片太大了，是不是？好， 所以接下我们要把这个图片把它给设置一下尺寸啊，我们统一给他设置一下高度啊，把他的高度设置为二十就可以了，大家看一下啊，大概就这么大，所以我们统每一个都设置一下。 好，这个也设置一下， 这里要空格一下，好保存，保存好了之后我们来看一下，哎，这些图片就排在这里了，是不是？好，但是这里有一个细节啊，大家一定要认真啊，注意看一下啊。 我们来看一下这个图片跟图片之间是不是有一点空隙啊？大家有没有看到，按照正常来说，我们图片跟图片之间是不可能产生空隙的，他为什么会产生这个空隙呢？我们来看一下，比如说我们把这张图片，我们把它跟第一张图片给挨着，大家可以看一下，要把它挨着，这里 没有任何的缝隙，我们来保存一下，大家看这个时候他这个空隙就消失了，对不对啊？所以说他这个空隙是怎么产生的呀？就是因为我们加了画行之后啊，他会把这个画行跟这个空格进行编 编译，编译之后啊，他就会有这样的空隙，但是不同的浏览器这个空隙的大小肯定是不一样的，所以为了保证兼容性，我们肯定是要把他这个默认的空隙给干掉，对吧？然后我们自己来单独给他架，所以这里是一个非常非常重要的知识点啊，同学们一定要认真听。 ok 啊，如果等一下我讲的有用的话，大家就刷波小鲜花好不好啊？点个赞关注一下。好，我们来看一下啊。我们刚才说了，这个空隙是因为换行是不是和空格被编译之后造成的，所以我们要把这个空隙给去掉的话，我们来看一下啊，非常的简单，我们只要做一件事情啊，我们来看一下， 点上一个 product， 点上 product est， 然后再点上 product 杠嘛。好，我们来看， 也就是找到他下面的他，下面的他，是吧？好，然后我们来看一下我们加什么啊？我们加一个代码加的方子杠赛，我们把它设置为零， 哎，大家看一下，这个时候他是不是没有了，相当于我把这里面的字体大小设置为零，所以你编一直写空格，相当于也就什么也就是零像素了，所以这个空格就消失了啊。好，所以这里非常重要啊，可以来波小鲜花。 好，我们来看一下啊，就是怎么样去掉图片空隙 啊，这是需要开发经验的是吧？没有开发经验你都不知道他是怎么出来的啊，所以这里很重要，一定把它记牢了啊，后面经常会遇到这个问题啊，好， ok 了之后，那接下来我们需要单独来给他添加外编剧来产生空隙，是不是？所以我们可以干嘛？我们可以单独给图片加空隙， 好，加外编剧了，来看一下啊，复制过来吧，敲好， i m g， 然后我们给他每张图片加上一个上下是零左右两像素的外边距来看一下。哎，大家看一下，这样就 ok 了。好， 那么 ok 了之后我们接着往下看啊，那下一步我们要做什么？做这个圆米电水壶啊，那么这里的话，它是一个标产品的标题，我们可以用我们的 h 三标签来做啊，好，所以我们在这个大家看一下。我在哪里写啊？我是在大家看一下，在这个标签的下面啊，你说包裹在这个灰色的这个 div 的盒子里面， 好，在这里加上一个 h 三标签啊，圆明水电火把它拉过来。 好， ok， ok 了，这我们来看一下啊，哎，大家看一下这个圆明水电湖茉莉的雨，这个上面也有这么大的一个间距，是吧？这间距又是从哪来的呀？啊， 反正我不知道是不是不知道怎么办呀？检查呗，来看一下呗，是吧，这鬼东西从哪来的是吧？好，我们来看一下，当我们来选中这个 h 三的时候，我们来看一下。哎，首先我们来看和模型看一下。 哎，你看又有一个默认的外编剧了，是不是说明 h 三标志他也有默认的外编剧，所以首先我们也要把他的默认外编剧给干掉，所以我们在这里逗号， 是吧？把 h 三也加上看，这加是保存一，保存一完，你看这个间距就不见了，是吧？乖乖的没有了。好，那么 ok 了之后我们来看一下。啊，那接下来我们要干嘛？我们要控制这个文字的大小，同时也要让这个文字与这个上面有间距，所以我们要做的事情就分两 两步了。啊，我们来看一下，点上 product， 点上 product tst， 啊，好， x 三， ok， 好，我们来看一下啊，是不是找到他下面的他下面的 s 三呀？ ok， 好，所以我们首先我们要给他加上一个什么，我的塞子二十， ok 啊，好， ok 了之后我们来看一下这个文字有没有加粗啊？没有，所以这里是加粗的，是不是？所以我们要控制一下文字的粗细方程， gun one， 好，我们给他个四百啊， 大家看一下，哎，就没有了。好，然后我们要有这个文字与上面有间隙的话，其实是给谁加呀？其实是给 h 三标签加外编剧，所以我们来给他 加个边框看一下吧。 好，大家看一下是不是？那我要与上面有间距，是不是给这个 s n 加个外边去就可以了？所以妈给杠透给他加个十像素就可以了， 当然你如果要精细化的话，你就按刚才我这里说的啊，你就去量就好了，比如说你从这里量量量量，哎，好像有十五像素，是吧？那我们就改成十五吧， 就这样。好，然后我们来看一下效果啊，基本上就这样了。好， ok 了，这我们接着往下看，那下一步我们来看一下，就是这个，是吧？这个价格，这个价格很简单的，我们用个 p 标签包裹就可以了。好，我们把这个价格复制过来。 好，同样的我们来看一下。哎，大家看到没有是吧？好， ok 的时候我们也要对他进行样式的设置啊，我们来看一下，我们把这个复制一份， 然后 p 啊括号，首先第一个，我们来看一下，控制什么？第一，大小要控制一下，颜色要控制一下，是吧？好，所以我们来看一下。卡了， 我们把它的颜色，颜色是哪个颜色，我们来看一下，我们来吸一下呗，吸颜色选中这个吸管啊，来吸， 哎呀，放大一点吧，太小了不好吸，看着佳佳啊，我再强调一下，然后再把它往上拖一下，我们来吸一下啊，吸哪个位置的？我看一下啊，放大之后有点 哦， a 九二，我看一下啊，井号 a 九二什么来着？ a 九二，幺幺 幺幺二，就这个颜色好，来看一下啊， ok， 好，然后控制字体的大小放在刚塞子啊，二十像素啊，因为我写过，所以我知道啊。好， ok 了之后我们来看一下，当然这个文字与上面也有一点间距，是不是来看一下啊？啊，所以我们也可以给他加上一个 monkeying 刚透像素吧。 ok 了， ok 了之后接下来我们要干嘛？我们来把这些辅助线给他干掉， 好，这个效果就这样子，然后再把上面这个辅助线也干掉 开了啊，好，我们刚才说了这个高度是我们给他加的，是不是？我们说了按正常他的高度是随着他的内容自动往下撑的啊？刚开始我们是为了给他看效果，所以我们把最外面这个盒子加的高度也给他干掉， 来看一下是不是 ok 了，然后这个灰色的区域，我们刚开始也给他加了个高度，一百，看效果是不是？所以我们也要把它给干掉， 所以大家有没有发现啊？我们前期的时候我们可以给他加一些高度，是为了方便大家看效果，然后后面我们做完了之后把他干掉就好了啊， 好，那么这样一个效果是不是出来了啊？ ok 了之后我们看一下啊，当然还有最后一个效果啊，我们一般这个产品列表他是可以怎么样？鼠标点击之后是可以跳转的，对啊，他可以跳到一个页面去的，所以我们要 给他整体加上一个超链接啊， a 标签，那么超链接加到哪里啊？全部要我们就加这个最外面啊，就可以了，你看到没有？加个 a 标签，超链接标签啊？好，然后把这个 a 剪切一下，放到最外面，放到最后面包裹他就可以， 我们把它缩进一下，按住 table 键把它缩进啊，好，就这样 ok 了之后我们来保存一下，保存好了之后我们来看一下啊，这个时候大家看鼠标放上去是不是 ok 了啊？当然也可以点了，是不是啊？点击之后，比如说我们可以给他加上一个三， 我们来看一下啊，我们跳到官网去，嗯，杠三 w 点 icod， 然后我们让他在新窗口打开啊，他给 干不浪看见儿时保存，保存了之后啊，让我们来看一下啊，那接下来我们来点击一下，点击之后大家看一下他是不可以跳转 ok 了啊，好， 但是问题又来了，是不是？你有没有发现，我们明明布局的挺好的，结果加了个 a 标签超链接之后整个就瘫痪了是不是？你看什么下划线也来了 是吧？文字颜色也变了，是不是啊？所以这个地方大家一定要特别注意啊，这就是因为我们的 a 标签造成的啊，我为什么留在最后加？就是想要让大家看到 a 标签加了之后会给整个页面带来什么样的问题， 所以第一个 a 标签他会默认的给他包裹的文字加上下划线，所以我们不需要，不需要就要把他给干掉啊。我们在哪里加？我们在最外面加啊，用标签选择器全部干掉啊，所以选中 a 标 标签，然后加上一个 taste decorate， the decoration， 是不是？然后我们把它下回线去掉。什么浪 啊？大家看一下，是不是没有了啊？全部都没有了是不是好？没有了之后，接下来我们来看一下，哎，这个地方这个文字颜色怎么变了，是不是？我们来看一下这个地方啊？ 这个地方是谁啊？是这个 s 三标签是吧？那么这个 s 三标签的颜色我们要把它改一下啊，所以我们来看一下啊，那在这里加颜色，我们来看一下，我们来加个颜色呗。 什么颜色？加个黑色？因为因为你没有给他加颜色的时候，他的颜色会默认的是继承谁的呀？他默认的就继承了这个超链接的颜色，加完之后就没有了，他为什么没有改？因为我们开始给他控制的颜色，是不是我们给 s 三再加个颜色就好了，就这样 ok 了啊，那么整个效果就没有问题了啊，当然这里还有一个隐形的问题，可能没有暴露出来啊，我给大家加个边框，大家就能感受的到啊，认真听啊， 这个问题很重要啊，我们给 a 标签加上一个 bother， 然后加上一个红色的边框，我们来看一下 b o r， 好保存，保存之后你发现这啥玩意啊？ 这啥玩意是不是？这是啥呀？是不是啊？这个地方很神奇，是不是你都不知道这啥玩意啊？所以这个地方很重要哈。我们用这个 a 标签包裹的时候，因为这个 a 标签啊， 他是一个什么元素啊？他是个行列元素，行列元素的话里面一般是不能放会计元素，一放会计他就会有 问题，是不是？但是 a 标签他比较特殊啊，他可以放，但是我们也要把它转换成一个会计，所以在这个位置一定要加上一个 display， 等于 block， 这样子就正常了啊，大家看到没有，这样子，你看的是不是 ok 了，相当于所有的东西包裹在 a 标签里面了啊。好，所以这里是一个非常重要重要的知识点啊，所以用到这里一定要把它加转化为会计元素。 好， a 标签啊，这个很重要啊，他是一个隐性的问题哦，我们把这个边框干掉就好了，还是为了给他看效果，那么这样就没有问题了啊， 好，整个页面的效果就制作完成了啊，如果对大家有帮助的话，大家可以点个小红心关注一下啊，需要这，当然这个课程的话，我们给大家准备了这种详细的文档啊，就是比如说 第一步要干嘛呀，是吧？比如说我们这个效果做出来第一步干嘛？第二步我们要做什么效果呀？然后代码对应的代码就是这写好了，大家看一下产品描述样式，看啊，大家可以看一下我们有详细的文档的步骤啊，大家看到如果大家需要这个文档的话，也可以私信啊，我们来获取。 好吧，那今天的课程我们就给大家讲到这里了，希望对大家有所帮助啊，拜拜。

有时呢我们会经常呢看到这样的一些这个效果啊，就是这样子的，我们刷新一下，就是这里面呢有类似这样的一个抽屉啊，这个弹出显示的一个效果，然后当我去点击这个界面的时候， 这个抽屉的这个效果就怎么样？就就就消失了啊，然后呢在这个抽屉里面呢，我们通常都会去放置一些这个内容啊，这种这种胶布呢也是这个比较这个常见的， 那么今天呢就来看一下呢，如何用这个 u 三加上这个 ts 来实现类似的一个抽屉的一个这个效果。那这边呢，我们是已经把这个这部分代码怎么样把它给写好了啊，来到这个地方啊，那这里面呢，我们重点的敲里面的 几部分这个代码要一起给大家一起来看一下啊。首先呢上面这一部分呢，就是这个我们整个抽屉 效果，它里面的这个结构的这一部分啊，那在这个结构的这一部分呢，我们在这个地方是做了一些这一个试针啊，什么试针呢？首先最外面这一层呢，我们把它试成了一个弹性盒子， 然后呢让他怎么样让他在这个数值方向里面去排列啊？这是第一部分，第二部分呢就是里面的这个呃织造层啊，就是我们可以看得到啊，在抽屉的这后面的这个地方呢，这里有个灰色的这一部分啊，这个是我们里面的这个织造层， 那么制造成呢，这一部分呢，我们是这么来设置的啊， protection 设置，它是 fix 啊， topling leptic 零万零八点零，宽度高度百分之百，让他怎么样满屏去设置同时设置一下里面的这个背景颜色啊，把它层级设成这个一百，那下面的这一个这个 setbox 呢这个地方呢 我们怎么样也来试对一下这个啊？决固定的这个定位啊，然后让他距于顶部这里是零八层是零啊，然后呢呃给他也有宽度是这个百分之三十啊，在 index 呢比我们的这个 mask so 这个元素怎么样？他还要大。 那这样子的话这个元素呢就怎么样就就叠在他的这个上面的这个地方了。 ok 啊这个是这一部分，然后呢另外一个呢？就是，哎一开始呢进来的时候呢先让这一个里面的这个抽屉啊怎么样 是先让他往里面去挪一段这个距离啊，负的让他让他看不见。好当我去这个去切换要显示的时候呢我就把他的位置挪回来啊，同时呢我们在这个地方加一点这个渐变的这个效 裹上去啊，这是这结构这一部分的这个样式啊。呃那结构那这一个代码具体代码是怎么来写呢？我们这个地方呢来看一下啊在这里面呢我定义了一个用 t s 定义了一个 这个接口啊这个接口呢就是嗯这里面这个返回的这个数据它里面有的一些这个类型 in the face data if 呢这个地方呢我们这里面呢是仿有一个这这个结构啊，它里面是有这样 叫 cos 啊这样的一个函数，然后呢我们在这个在它旁处里面呢呃去干嘛呢啊？首先 去征听啊。征听什么东西呢？征听一下啊，看这个这个盒子啊他是否是啊要显示或者是隐藏啊？同时呢当这个啊 值啊，他发生这个变化的时候呢，我们就把这个值呢付给这个，这个，我们这个 data 啊，这一个，这一个，呃组件它里面的这一个啊， 啊这个桌手啊，这个桌手就是用来控制这个啊，抽屉他显示会很长的， ok 啊？空门这个地方呢，我们是从一个文件里面怎么引进来的啊？在这个文件里面我们是定义了一个变量啊，这个变量是用来啊控制一下我们这 一个盒子啊，他抽屉他是否这个显示的，那么在下面的这个地方呢，我们是用 react reactive 这个函数呢，去定义了一个这个呃响应式的这个数据啊， 这响应数据末日值就是从我们功能模块里面来的。那然后同时我们这个地方呢还定义了一个 close 这样的一个函数啊， 当你去执行这个函数的时候就 data 啊，就是我们数据里面的这个 draw show 呢，把它变成了这个 force 啊，同时改一下这个空门它里面的这个这个值啊，那当你这个空门里面的这个值发生变化的时候呢，他就会把这个 data 啊周呃瘦那里面的这个字怎么样把它给改回来啊？同时呢把它怎么样返回回去啊？在界面这个地方呢就呃做了一些 这个处理啊，首先呢是这个织造的这一部分呢，我们让他点击的时候干嘛呢？去调用里面的这个 close 这个函数啊？ close 这个函数好。 然后呢呃我们这这个在这个地方，在踏步的这里面呢，是有去啊，去约束了一下啊，在踏步的里面的这个返回的这个类型啊，就是我们的 r e f 它里面的这个内容啊，然后呢在下面的这个抽屉人这个地方呢啊，我们就这里呢 通过不干外区动态版的一个 plus 啊，然后呢在这里面呢这个呃设置了一个这个瘦这个 plus， 那当这个桌瘦呢是真的时候是个瘦，就会加上去 把它洗了的时候，就怎么样就就不会这个加上去啊。然后呢这中间这一部分呢就是我们里面的这个内容啊，做 了这一些之后呢，我们再回过头这边来看一下那界面这里呢默认就会呈现这样的一个效果。然后当我们去点击关闭的时候啊，他就会把这个抽屉啊，把它关掉啊，这个是 一个比较常见的一个这一个场景啊，就是一个啊贴抽屉的一个显示的一个效果。

今天来分享一些 css 的知识点，怎样实现这种布局？看到这样的布局，很多朋友第一反应应该是一个副 tiv， 里面四个子 tiv 不错， html 部分确实是这样，那 css 该怎么实现呢？首先我们设置一个负盒子 class 为 boss， 四个子盒子 class 为送。先给负盒子和子盒子的基础样式设置， 设置完是这样的，纸盒子现在是跨元素，我们需要让它水平排列，所以设置纸盒子的 tcplay 为英莱 block。 然后设置纸盒子的外编剧，统一设置每一个纸盒子的右下外编剧为二十像素， 发现他溢出来了。原因是因为第二个纸盒子和第四个纸盒子我们不需要设置右编剧，所以我们使用 nt s 刚 off 刚太谱来给第偶数个子盒子的右外编剧设置为零像素。这个时候我们发现子盒子的排列还是没有任 和反应。首先我们的 css 盒子默认都是标准合模型，而我们这里需要的是 ie 合模型，也叫做怪异合模型。那么什么是标准合模型？什么是怪异合模型？我们下个视频讲。这里我们设置子和字合模型为怪异合模型，理论上就可以了， 可是他还是没变。当我们把所有纸盒子放在同一行之后， 发现效果就有了，但我们不能把所有元素都放在同一行，不易阅读和维护。那为什么会出现这样呢？原因是我们每个纸盒子之间存在空格节点，空格节点也会占用空间。当我们给负盒子设置字体大小为零像素， 这些空格节点占用的空间就消失了。当我们需要设置字体大小时，单独为元素设置即可，这样看起来是没什么问 问题了，但是当我们检查元素后，发现后面这两个纸盒子还存在着下万边界，那么怎么一次性解决掉呢？我们可以使用 cs 的波浪选择器统一设置表示该元素，后面的送 统一设置下外编剧为零像素。这个视频包含了一些琐碎的 cic 的知识，希望能帮助到你。