css2音源教程

哎，旺叔聊英文啊，咱们今天来讲一个 css 弦乐啊，这个弦乐大家都基本上用过呃，但是呢，我这里会把所有的功能全给你讲讲到啊，这个也做成了一个翻译图图，可以进去咱们的群来领取，可以看我的简介或者看置顶链接啊， 咱们呢还会针对这个 css 大家解决一下。延迟怎么去抵消啊？这个音源呢，有小题一，小题二，中题大题背题也有。 ostreins 一加载就是全部的这个音色全部都加载了，然后它会自动帮你分配好音区，是吧？好，我们现在来看一下这个音源的界面啊，它一共有八种演奏法， 切换这些演奏法的时候呢，右边也会相应的做出一些变化啊。好，第一个是 sustan 啊，也就是长音切换键在心灵的地方，也就这个地方啊，然后你一按这个地方呢，他就会切换到这边，切换键也可以在这边，这边可以点啊，是吧？好， sustan 是长音呢，大家可以听 下啊。哎，大家可以看到右边的这表啊，在动哈，是吧？好，右边这个表是连奏的速度啊，如果我两个音符像这样一样，是吧，重叠在一起了啊，那么第二个音符就会触发这个连奏速度啊。 好，我们可以看一下这个图啊，这个是低延迟模式啊，然后呢，切换到右面是表情模式，低延迟模式的时候呢？呃，速度只有两档，力度是一到六十三的时候呢，他会触发中速滑音，如果是高力度的时候呢，他会触发这个快速滑音，是吧， 然后呢，如果你切换成了表情模式，也就是往右拨一下，如果是呃低于六十四的时候啊，他会触发慢速的话音啊， 比这个刚才的这个中速化音呢，要更慢一点。六十五到一百的时候，力度的时候他是中速化音，然后是一呃高，高于一百的时候他是高速化音啊，这个是一个表情模式的一个切换，大家在用的时候呢，如果你没有特别 慢呃演奏，比如说这种，哎，这种特别慢啊，是吧？那么你就可以直接就用这档就可以了啊，没必要用这档是吧？用这档会带来更大的延迟啊，这个延迟是多少呢？我在这个表里边也写了哈，低延迟模式的时候啊，小力度的时候是二百五十毫秒的这个延迟啊，如果是大力度啊，也就是快速滑音的话是一百毫， 然后如果你切换成了表情模式的话呢，最慢的有三百三十三毫秒啊，起音的延迟，起音也就不是他，他不是连音的时候，是第一个音的时候呢，他也有六十毫秒的延迟啊，所有的音都会增加一个起音的延迟是六十毫秒。怀音的时候， 哎，最慢是三百三十三毫秒啊，然后是二百五十毫秒和一百毫秒，这跟这跟这个这个是一样的，是吧？他只不过多了一个三百三十三毫秒的一个延迟，我们在用的时候呢，可以多用这个低延迟模式，然后如果是你是 需要这么慢的滑音的时候，你再用表情模式啊，然后这个雷嘎的目的呢？这个连奏模式我们是可以通过 c 零的力度来，我轻轻弹他就会切换到这个第一延迟模式，如果重一点弹这个 c 零，他就会 自动切换到表情模式，我不用去拿鼠标去点他哈，我们也可以在演奏的过程中啊，然后去切换他，如果说你懒得切换，你当然也可以是吧？都用高力度，我就保持这个力度，始终在这六十五以上就可以了，他就不会触发特别慢速的这个滑音啊，延迟特别大的这个滑音了。 好了，下边这两个按键啊，如果你把这个连奏关了的话，他是可以同时弹一个和弦的啊，如果关掉啊，他就右边就没有了是吧？也没有滑音了， 他就可以弹和弦了是吧？然后这个地方呢，我还可以，甚至还可以改他的这个起音的速度，比如我可以慢一点，让他慢慢的起来，是吧？然后呢，如果我后面呢 瑞丽斯调到零的话，他就会就直接断掉是吧？我一抬手就断掉了，哎，这就不真实了是吧？想真实一点的话，我可以让他的这个瑞丽斯长一点，但如果瑞丽斯太长的话，和弦和后边的和弦接的比较紧的话没有断掉，然后后边的音就触发了。 这个是弱音器啊，如果打开的话，声音是加了弱音器的这个效果，哎，音色都不一样了哈。 所以说你需要这个弱音器的时候你再去加它啊，一般不去动它。好，我们再看第二个演奏技巧。 c 生灵的时候是 tremolo， 这个 tremolo 是 呃，提琴组里边的每一个人，他不是统一的去演奏这个川明楼这个阵音，而是自由的去演奏，所以他叫自由阵音是吧？那么会产生一种比较比较乱是吧？自由阵音的右边就没 没有这个控制的东西了，只有这个，还是雷格斗和这个润音器是吧？然后继续下一个。第三个技巧啊，是这个地灵在这呢啊，他不在下边啊，不知不知道为什么要这么排列啊。这个是同步阵音啊，和自由阵音不一样，他们是所有的乐手 一起下功，一起上功，一起，虽然是碎功，但是他们是跟那个节奏可以同步的啊。啊，这个演奏技巧啊，这不是按住了以后就可以的啊， 它只有两个音是吧，一个是下弓，一个是上弓，哎，要齐奏的时候啊，大家可以不用这个断奏，用这种震音的模式，这个会更真实一点。右边的这个 tempo 呢，是 改你整个的拍速的啊，假如说我现在是七十一的拍速，那这时候我就直接应该改成七十一，对吧。更快的方式呢？是直接点这个啊，跟主机同步啊，一点他上面就没了是吧，他直接就变成七十一了，所以说， 哎，听见了吗？我现在按的这一个键啊，就是上下两下是吧，一个下功，一个上功，他就会同步到七十一，所以说啊，咱们要去同步主机的速度，然后再去用这个啊。好，同样啊，做十六分音符也是可以的啊，我们只要把这个音符换成十六就可以了，他会自动同步那么一个音符，这是下功，这是上功啊，听 是吧，那如果我改成八分音符可不可以呢？也是可以的，他会自动帮你变成这个十六分音符啊，大家可以听一下啊，我现在是八分音符， 他一拍也是四下，对吧，这样是没有区别的啊，他都会帮你变成八分音符，他也就说最低是八分音符，是吧？因为再低的话你就用不着震音了，是吧？好，那么下一个 trust 是颤音。颤音和震音不一样，颤音是音高上的浮动，震音是上弓下弓啊，不一样， 摁两个音他才能颤，他才知道要颤多高。如果你摁的是半音的话，他就是半音颤啊，如果是摁全音就是全音颤啊，如果你把里嘎的关掉了，那么颤音也是可以做和声的啊，也就是说你需要同时摁四个音，对吧？这样的 是吧？这是一个和声啊，这是可以用的。那么 d 声铃再往上的是一零啊，一零是一个哈莫尼，哈莫尼克去按完了以后，你发会发现这个底下都没有了，是吧？因为他是不带基因的是吧？他只有泛音， 去掉基因了以后发音会比较飘，是吧？然后会用在一些比较诡异啊，或者说特别轻柔的乐段啊。一零在网上是 f 零是斯大嘎斗啊，斯大嘎斗有四种斯大嘎斗演奏技巧啊，这个速度都是不一样的，我们可以看一下我们的图，这个断奏的时候呢，呃，这个，这个控制器是可以切 换这个四个演奏技巧的，是吧？可以这样去去滑动他，当然了，我们在演奏的时候不可能去拿鼠标去动弹啊，我们需要去用控制器的啊，你可以用两种方法去控制他的这个演奏技巧。第一种方法呢是用 c c e 控制器，哎，这样去 控制啊，最大的力度的时候就是这个突腔音，然后最小力度的时候呢，就是这个跳功。还可以什么呢？用 f 零的这个力度去切换啊，比如说你这个呃 case 位置切换键，你可以用 f 零的这个力度，你看如果我大力度话，就是这个突强音，如果我特别特别轻的话就是跳弓， 所以说我们有两种方法，如果说，呃，这整段都是这个跳功的话，我们就可以直接去用这个力度去切换，那么如果这段前边啊是一个连奏是吧，他正正用着 c c 一呢，这时候我们就可以用 f 零的力度去切换这个图像音的这个效果，是吧？呃，我们切换到跳 跳功的时候，他也是在任何力度下都有一个和表情模式一样的这个起音延迟的啊，就是每一个音他都有一个六十毫秒的一个延迟，这个大家要注意一点哈， f 生灵是马卡特是这个强音啊，也就说每一个音头都特别强，他是会顿一下的啊，但是他也是长音， 咱们来听一下对比啊， 他就是这样的区别哈，然后这种强音呢，也会用于在这种，嗯， 是吧啊，颗粒分明的这种啊，这叫 run 跑弓啊，这种跑弓时候也会也是可以用强音的啊，他会让音符每一个都颗粒分明，而不是呜呜划上去是吧？那么强音也是有这个六十毫秒的这个起音延迟的啊，也就是第一个音他都有一个六十毫 延迟，那么这个键呢，是在强音上面覆盖一层这个死皮嘎抖的跳功啊，也就说他是两层采样叠在一起的，单听强音再听跳功的更更强一点点，非常微妙啊，如果我们跑功的时候也可以去掉它啊，这样跑功 哎，听起来也是颗粒感比较十足的是吧？好，最后一个是技灵啊，皮特卡特就是播奏 是吧？他也有三种播奏的这个方式啊，一个是这个是公敢击弦啊，公敢击弦我们可以看一下这啊，公敢击弦，然后是巴特克快速播奏，是吧？然后是拨弦，普通的拨弦我们可以听一下不同的哈。 哎，这个是拿弓的弓背啊，打木头的那边去打弦，他的这个颗粒感非常强啊，然后呢？巴托克击弦啊啊，特别强，这是最强的是吧？然后呢是拨弦哎，普通拨弦比较圆， 圆润一点，所以如果我们需要特别强的这种，他是把这个弦呀低了起来，然后再重重的拍到纸板上。好，那么所有的演奏技巧都讲完了，我们现在来讲一下左边的这个部分啊，左边这部分很简单，上边是控制你的混响量是吧？然后呢，下边是这个，第一个呃，点麦克风，第二个点麦克风，然后是主麦克风，然后是房间麦克风。 最后一个 miss 啊，是制作者帮你以混好了的，如果你懒得动左边的，你直接用 miss， 那么我们需要注意的是打开一个话筒，那么就会加载一遍彩样，那么你打开的话筒越多呢，你占用的内存也就越多了啊，所以说，那么我可以看到点话筒，这两个点话筒他都帮你做好 升降了啊，还有这个啊，他们俩也可以通过 a 升零和 b 零这两个键去控制开关啊，控制键是大力度开启，小力度关闭啊，这个大家了解一下就好了。然后我们来看一下设置啊，这边有一个小齿轮，点开以后是可以看到每一个 c c 的控制器的，是吧？第一个是呃 c c 的技巧切换啊，也就说 c c 五十八号啊，可以代替这个 c 零到 g 零去切换这个呃技巧。如果你觉得这个老上下翻飞的这么去 看比较累呢？你可以在底下直接打开这个控制器，如果你觉得用 kisswage 这个方法去切换控制键的话，有点来回移动的话，你可以直接去打开底下这边是可以打开一个 cc 是吧？在这边点这个下面的小箭头啊， 控制栏设置，然后点这个设置可用的控制器，然后会出现一个菜单，我们只需要把这个你想用的这个 cc 数值啊从这边找到，然后点添加他就到右边去了，然后点确定，这个时候呢，你就可以添加五十八号控制器了，用 cc 五十八去切换演奏法 变了是吧？下面一个是 x v 的， x v 的的意思是每一个音源都是会采样不同的力度层的，比如说比如咸鱼 月的时候，他可能是比如四个力度层的话，那么是最轻的，然后中的再大一点，然后最后强力度去拉弓。我们用 c c 一就可以在不同的力度层的采样中切换了啊， 你们知道弦乐的时候下弓的力度就是代表了他的音量对吧？大音量就是要下弓力度更大，所以说 c c 一啊，不仅切换的是力度层的音色啊，他也切换这个音量，对吧？在这个音源里面用 c c 一去控制音量，是同时可以控制音量和力度层的，是吧？他还有一个呃，只控制音量的是吧？ c c 十一相当于是一个推子，推大音量和缩小音量，但是呃不改变音色，比如说我想维持一个力度层的音色，但是我又想改变音量，怎么办呢？我们可以用这个呃 c c 十一去控制， 当然同时用 c c 一加 c c 十一控制也可以，我们可以做出动态更大的起伏。之后这个是 c c 二， c c 二是颤音的这个呃速度啊，下面这两个是滑音的两个参数啊，一个是滑 滑音的力度值，一个是滑音的音量啊，他们都是触发这个滑音的时候，我们可以用 cc 十这个控制器去控制这个呃后一个音符，也就是叠着的后一个要滑过去的音符的力度啊，从而触发慢速的连滑音，我们这个参数可以不动弹啊， cc 五去控制在滑音的过程中的这个音量啊，是这个意思，如果你需要那种特别柔的，轻柔的滑上去的话，你可以用 cc 五去控制滑音的时候的音量啊。 我们最后我们看一下这个键位学习啊，我们只需要按住 shift， 然后去点任意一个 kisswitch， 他就可以出现这么一个菜单，是吧？这边可以看到他是什么技巧啊，他现在是用什么键去触发的？在这边我们直接去设定啊， 有设定是这个键哎，我们点了一下这个第一，是吧，从 c 零就变成了第一，那么这个地方他你看他这边显示第一了。假如说我们只做小提琴，是吧？我们就可以把整个这个键位啊 都学习到这边来，那么他就会和你的音区就比较接近了，是吧？那么这时候我们在那么这时候我们就不用上下翻飞去找这个 kisswitch 了啊，我们就可以在他的下边就可以用到这个 kisswitch 是吧？好，这是一个小方法哈。好，接下来我们来说一下关于弦乐的连奏与延迟啊，因为只要连奏都会有延迟，对吧？ 那么如果你写了两个音符，像这样一样，他们中间给连上啊把，那么他们会就会产生这个连滑音是吧？以斯里嘎斗要更慢一点， 只要出现连滑音了，那么后一个音符滑到这个位置的时候，他才是这个音高，那么在中间的时候他是滑的过程对不对？那么滑的过程取决于你后边的音符的一个力度。滑音不会换弦啊，滑音是直接呃直接滑上去的，而不是的的这样， 这是雷嘎豆是吧？这可以雷嘎豆啊，一攻他是可以雷嘎豆的，但是滑音是直接在一个弦上面摁住了滑上去啊， 所以说如果你考虑真实的演奏法的话，一个弓啊，没有办法拉特别长的时间没法一直滑，所以说我们做弦乐的时候，我们最忌讳的是噔，这样一直滑啊，一直滑把所有的音全都连起来，然后后边的音符的力度都特别低，那么这时候呢，就会一直触发这个连滑弓，那么就会听见特别假哈。所以如果你要想写 真实的弦乐的时候，你就要考虑到呃，换工的时机，这个是非常重要的，换工的时候呢，也是这个弦乐的呼吸的地方啊，就像人说话的时候会呼吸一下好，换工的时候呢，中间他会音量会降低的，对不对？所以你在做 c c 一的时候，你要去模拟这个换工时候力度啊， 最后啊，关于这个 c s s 的延迟呢？呃，有一个处理的方法，我们可以在 b 站上直接去搜索啊，直接搜索这个 c s s q base 啊，它就会出现啊，这知识分子呢，做了一个 个可以帮助你抵消延迟，是吧？我没有下这个界面，我用的是他之前的这种方式，之前的方式是用呃 quis 里边的红控制去控制的。那么新的方法呢？就是直接去用这个这个大佬去做的这个界面，然后去直接可以控制，甚至可以控制技巧啊，然后呢一键抵消延迟。

哈喽，欢迎来到莫西，我是维林。这期视频来讲一下 cinematic students trains， 翻译过来是影视工作室闲月，一般都称它为 css 这款音乐的一个使用方法。 contact 里面呢，点开会看到这么一个目录，上面这里是一个文链夹，写着 classical legato patch， 里面是他以前版本的连奏记法。那咱们基本上用不着，因为新版本的效果更好。下面这两就对应的不同的音色，那第一个是小题一组，第二个是小题二组，第三个是背大题琴，第四个是大题琴，然后下面这个 for n 三步啊，他是指的全奏就背大题，大题啊，中题小题全都有。然后下面这个 light and 就是一个经典版的全奏，占用性能和可能小一点。最下面这个呢是中体型。好，这边加载一个小题一来做演示啊，那首先呢， cs 这个音乐他是没有编制选择的，就他的声音呢，听起来都是比较大的编制啊，编制就是说 这个演奏人数，比如说小提一是两个人演奏呢还是独奏呢，还是十个人的之类的啊？咱们听一下。 首先能看到左上角这块区域啊，这里有个 reverb， 是他自带的混响，咱们可以拉大点听一下。 下面这里有四个麦克风可以调整。先看到最右边这个 mix， 这个呢是音量大小，上面这里是左右声向的调整， 这个 mix 是出厂预制的，就是厂家很好。这个麦克风，他调整好这个音色，然后左边这三个也任意点亮一个呢，他就会切换到第二个模式。这里呢一共有三个麦克风， plots 麦克风啊，对应的进场录音的时候，离前面最近的麦克风，它可以捕捉到很多细节。妹，麦克风是对应的中场录音的时候是录整体 的声音，润麦克风啊，他离咱们闲院会比较远，录的是环境的声音。我们如果需要调整音色的话呢，可以通过调整这三个麦克风的音量比例来获得不同的音色。比如说我想要一个贴耳一点的听感，那我可以把 clothes 调大一点，这个闷音和润稍小一些。 那我如果想要一个空旷一点的，听起来距离远一点的，那我可以把 close 低一点，然后把 room 啊相应的抬高一些。 咱们可以根据实际需求啊，去调整这些麦克风，来获取最适合咱们歌曲的音色。中间这一块区域是用来切换记法的，左上角第一个是默然记法， sales 等长音左上角会变， 切换到他的话呢，是用 c 零来切换。月嫂这里呢，会有一个雷嘎头，默认是打开的啊，如果关闭的话呢，会变成可以演奏复印的模式。这个时候咱们如果同时演奏两三 音符，他会出两三个声音。这里呢，还可以试试他的音头音尾的时间啊，他一般呢不太用这个模式啊，一般这个雷嘎头还是会点亮的，点亮以后呢会变成连奏模式。这个时候呢，咱们音符啊，如果是出现重叠啊，他会演奏连功技法， 然后连奏。它有几种不同连奏速度切换啊，有 slow， medium 和 fast， 现在一百力度的话，它这里显示出发的是 fast 后面这个音符啊，比如说把力度改成五十， 现在显示这个书法的没等，然后如果把这个点亮，还有更低的一档速度，就是 slow 的这一档速度，咱们再把它小一点， 可以听到这个连奏的速度变得更慢了。这里每一种连奏呢，都会有一定的延 延迟啊，在官方说明书中是有写的这个 fast 啊，快速的连奏延迟是一百毫秒左右，中速是两百五十毫秒左右，慢速是三百三十三毫秒左右，我们可以在 qbs 这里啊来补偿延迟，比如说我现在用 fast 这个速度的连奏，我把它输出负一百， 但是这种情况下第一个音啊又会提前，所以呢，这种情况下，我们可以把第一个音稍微往后挪一点，这样让他每一个音呢都能够落到节拍上。 右下角这里有个开关，他是若音器的开关，打开以后呢，就是添加了若音器的音色， 还有一个记法，同音反复，我们如果需要同音反复，你直接写，听起来是这样子的， 那我们如果把四六六十四给他点上右上角齿轮， 点开会显示 css 所有的谜底控制器。第一个是 cc 五十八，它的功能是其他不同系法，但是基本上用不着，因为还是用界面控制系法方便一点。第二个是 cce 啊，来控制咱们的力度强弱。在 cc 这个音乐里面，力度啊，它会控制音头的强弱，音符最开头的强弱， 但是呢，你后面啊，持续时间长了，就要靠 cce 来控制了。拿画的时候建议把对齐关掉来画啊。 然后 cc 二呢，控制的是揉弦，他自己自带，其实是有一定颤音的， 那咱们可以听一下他完全不带颤音的这种感觉啊，然后呢，有颤音，然后呢， cc 十一是控制音量的，再插一个这个， 这个参数是告诉你他连奏时触发了这个滑音的一个惨样的音量大小，默认是二十，所以说是一百二十七，最大是一百二十七啊，未能听得明显一点，我再把它切换到零，对比一下， 这个 cc 五啊，是实时的去控制这个音量大小，比如说我们切完了 cc 五，就可以用它来控制音量大小了，拉大它就可以有很大的这个滑音的一个效果。 然后如果你在 qs 里面没有这些控制器啊，比如你可能没有 cc 五， cc 二二，你可以在下方这个地方点一下，选择设置可用的控制器，点一下。然后呢，你把你想要用的啊， 在这边选中，然后添加过来。这个比如说我想要 cc 三点添加好，这边就有了，不想要的呢，可以选中点，移出点，确定就好。这一个是 好几个短音记法的合集啊，这一栏呢，有四个短音记法，通过 cce 来切换啊，这个轮子定律是 cc 一下面第一个啊，翻译过来是凸强音，第二个是盾工， 他听起来会更短一点啊。第三个是 stagadismo， 更短一些的短音。最下面这个 spa 的跳弓演奏的时候啊，琴弓是会离开琴弦的，音头会更强，更有弹跳感。下一个揭法是川 mo 正音， 在下一个记法呢，和他有一点关联，在这个记法下，你每写一个音符，他会触发两次正音的声音。然后呢，这里可以设定 bpm 来控制正音的速度，你也可以点亮这里啊，让他和你速度软件的速度保持一致。然后咱们看上面这个啊， harmonic 泛音演奏， 但是通过特殊的指法让琴弦部分震动来得到的音色。下一个是 trust， 它是指两个音啊，在大耳朵和小二度之间来回反复出发时，我们需要同时下两个音，这两个音呢是大耳朵或者小二度的音程关系。 再下一个呢是马卡头强音，它是一个音头比较强的长音，官方推荐的在一些快速演奏情况下使用这个技法。 右边这里呢还有一个开关，点亮以后呢，他会在每个音符的音头上进一步的给你叠加一个跳功的声音。 最后一组同样是通过 cce 来切换记法。最下面这个比斯卡拉头播奏，用手指头去拨动琴弦来得到声音，然后上面一点这个巴托克机弦，他是用手用力去补弦，让琴弦太 弹回去。最上面这个是弓背击弦，用琴弓背面的木头去击打新弦得到的声音。那如果对你有帮助或者对于说话呢，记得三连关注哦，拜拜。

今天黄老师分享 css 的场景应用，一大锅干货袭来， 我们今天主要是针对于实际的歌曲，我们讲一下这些演奏家应用场景和大家是怎么去使用的啊，那么这个同时也会解压昨天同学的一个问题啊，这个，这个现在怎么使用啊？那这是我的工作模板，就是我会把所有的哪个阿斗的部分啊分， 比如五个或者六个，因为这个，呃，中题的为什么会有两个？是因为我可能有时候经常会使用到中题的分奏啊，那如果比如说我们同学是使用到一体的分奏呢，我们可以再复制一个出来啊，这中题的分奏，然后呢，其他的只要不是列嘎达的演奏技法，通通在这里可以看到是负七十 啊，就通通的都是在这块地方去使用的啊，可以看到啊，那大家还有一点需要注意，就是我们在呃 呃 css 的演奏里面呢，需要把这个东西啊调到一个，这个英文是怎么念的， 哈哈哈哈哈，在连奏状态下啊，然后呢，我们这个力度啊，控制他的这个换，就是换，就是这个弦啊，当啊，就是这个连奏， 我们换弦或者换弓，这个速度到底有几种的这个速度的层层次啊，我一般来说呢，都会使用右边这种，就是会多一些啊，这样会使你在实际演奏中他听上去的每个连奏的这个小细节不太一样啊，这个大家一定要 记得啊，这块事情啊，那这个 css 的演奏技法呢？还有一个点是大家需要注意的，就是大家可以看到我这里有个编组轨道哈，这就是其实我昨天也是也是做过的这 一个点，就是我昨天是加了一把抓的一个东西，然后在上面加了一个 api 的，呃 eq 啊，那我们如果分组的话是这样的，就在这里啊，选全选，选中这个，然后 option 加 shift， option 加 shift 可以激活 link 这个同步， 那么我会把这个全部输出到这个编组轨道里面去啊，也就是说我现在拉任何一个音，你会发现编组轨道是有声音的，对吧？ 啊？然后呢，同时我会在上面加这个 api 的，这个这 strings 的预制啊，基本上不用怎么动那个就够了啊，可以了， 那么我要说一下，就是刚刚说过那些演奏技法啊啊啊，我们主要讲我们常用的那几项啊，首先是 跳功啊，或者说是断奏这个部分啊，断奏这时候经常会用在哪？就首先我们要分析他这个声音啊，他是有什么样的一个声音的表达在这个地方。那首先第一个呃断奏呢？他第一个他会支声出啊，就我们的一些律动的点， 那就比如说我们，呃，在一些，比如说摇滚歌曲中哈，摇滚歌曲中我们经常会听到就是 bubble， 的的哒的的的的的的的哒的的的，就是那种 bubble， bubble， bubble， bubble 啊，那如果这时候我们用联奏的话，比如说 那再用它， 他会比他明显有呃律动，然后第二个呢？有力度感，那么呃，说到他我就要说 就是这个播奏，他其实也是，但是他会比这个呃跳功呢，他其实会少很多的，就是力度上的一些 劲啊，他会少很多劲，所以说这种时候就适合，比如情绪比较舒舒缓柔情的地方，哎，我们偶尔来做几个，比如说呃，播奏啊，来给他一点情绪上的一些小点缀啊，也好啊，那就是他会比我们的跳功 啊，就是大家可以理解为比如说我们的呃爵士谷里面的哎， open 就是 open head 和 clothes head 啊， b 叉和开叉啊，他们两个就是情绪上的区别，所以说在我们这个力度的界定方面啊，去平衡一下如何使用他们俩 啊，如何选择他们俩啊，在这两个中间去做选择。

you make me feel so crazy still in love with you amazing when i'm next are they coming out star lonely lone loud outside you are you make me feel so crazy still in love with you。 都是单身男女。大妈真的是个可爱的人。 you get my name of her。

好，同学们好，今天我们来学习 css 核心基础当中的引入 cs 样式表之三， 我们说那引入 cf 标识表有三种方法，第一种方法呢是行内式，第二种方法呢是内嵌式，第三种方法就是我们今天要讲的外联式， 那么我们看怎么来做外联式的引入呢？我们一起来到我们的软件环境下， cube you 的 好，打开软件之后呢，首先我们从头做起，我们新建一个网页，点击文件，我们选择新建一个 htm 文件，那么可以给他个名字三个五， 那么当我们新建了一个全新的一个网页之后，我们还是在包得体里面给他加入我们曾经学过的标签，比如说我们给他加入一个标题标签 hr， 我们输入，这是我的标题 啊，那么我们再给他来一个 p 标签，也就是我们的段落标签。好，我们这个段落标签的内容是来写入， 我们今天学习， 我们今天学习 c s， s 外列啊，外面是引入， 我们也可以再加入一个配料精。 好，我们把内容写上，嗯，这是我们学习 引入 cs 样式的第三种方法。 好，我们要关闭这个标签，而是对输入法出了问题。 好，那么这呢我们初步形成保存之后呢，我们可以看到就呈现出右边这个页面的形式， 这个呢是我们 htm 五当中没有任何的样式，那么现在我们要用引路的第三种外连式的引路，我们怎么操作呢？同样我们点文件选择性键建立一个 css 的键。 好，我们给这个 css 三键呢，给他命名成 s， t， y， l， e， 这是第五个啊， 我们就给他起个名字啊，找他了，然后点击完成，那么这时候呢，我就开始给他定义，比如说我们首先定义 h 二这个标题标签，还是换口号，我们定义什么呢？他的颜色，首先呢，是 啊，我们给他建议颜色，建议颜色我们给他给一个。什么颜色呢？我们可以给一个啊，好，那么第二个属性呢，我们可以给他一个 大小啊，我们这， 然后给他多大呢？比如说四十 tx， 然后封号，再给一个字体吧，字体完美。 然后给他一个什么字体呢？我们选一下，给他一个字体，比如说选个微软点黑吧。 ok， 好，我们对皮票线做了第一，我们再来给他定一个什么呢？ 嗯，去掉啊，刚才是标题标签，我们在做一个 p 标签演示，给他点画口号声明，那么我可以把这个属性啊给他全部复制过来啊，这样就不用再去 敲了，好，全部复制过来，那么我们对这个我定义好的 cs s 这个样式门店呢，我做了一个保存关闭掉，那么继续回到我们 htm 五当中来，那回到这里呢？我们说外联，是呢，他是要求在我们的 害的头部区给他加入一个标签 link 标签，那么我们就来输入 link 啊，选择这个标签， 然后立刻标签。我们加入之后呢，我们要给他指定他的资源地址了， hurf， 好，他的资源放在什么地方呢？我们刚才定义好了应该是，呃， sty 这个五了， 我们可以选上啊，选到他。 ok， 那么定义完之后呢，我们再来给他定义他的属性 t y， p e 等于什么呢？我们的 t e s t 或者是 c s s。 好，那么完了之后我们还来再给他定一个 r， e， l 这个属性等于我们调用啊，找一下，我们可以输进去啊， s， t， y， r， e 再教育他几个选道。 好。那么这一行标签代码呀，就是我们在引入外联式的时候最关键的一个标语了。好，我们保存一下，保存一下，同学们可以看得到啊，右边已经 产这个产生了他的这个效果啊，是不是我们刚才定义的我们的样式表中的这些样式。那么大家可以看到，在我们现在就是 htm 五这个代码当中，我们是没有给他定义颜色，也是没有给他定义什么呢？ 大小的，那是我在 css 文件当中给他定义了我们的颜色和大小，在这里只是用了我们的外联。是啊，调用了我们这个 s t r 五点四 s 这个文件，他就将我们这些 hr 的标签 p 标签的内容进行了全部的美化，这就是我们讲的 css 我们引入方式的第三种引入方式，外联式，同学们学会了吗？我们一起再来强化练习，再操作，相信你们一定可以掌握好，下次课再见。

大家好，我是清新，今天给大家分享前端必会的三种 css 布局技术，第一种是这种左右两列式的布局，第二种是这种一行三列或四列的布局，第三种是这种一行多列或者多行多列的布局。那么接下来我们可以看一下京东商城的网页框架结果它是如何搭建的， 我们来看一下啊，一般网站的头部都是通蓝的啊，那么京东也是通蓝的，那么他整个网页的主体部分啊，他其实是放在这么大的一个盒子当中，然后这个盒子设置在水平发现居中，那么接下来的内容就是在这个盒子里面来进行布局，所以我们来看一下这个里面是怎么布局的。 那么首先我们来看第一个板块，他是一行四列的布局，第二个是属于一行多列的，第三个板块是属于左右两列式布局，那么第四个板块也是一行多列，那么第五个板块也是一行四列的布局， 那么后面的话都是这种多行多列的布局。我们来看一下啊，所以说整个这个网页的框架结构啊，用到的就是我们今天要给大家分享的这三种布局方式， 所以只要你掌握了这三种布局方式，那么搭建一个完整的网页框架肯定是一点问题都没有的。那么接下来我们就开始写代码。好，首先我们来回到我们的 vs 扣的开发工具，首先下来我们来新建一个网页文件，我们来给他取个名字啊，叫做前端必会的三种 css 布局技术。点， stm 回车。好，那么接下来我们按住 sift 键感单号回车调出我们这个网页的框架，那么同样的我们也需要把这个标题给他设置好，好，我们来给他设置下标题， ctrl 加是保存。 那么接下来我们来看一下我们要做什么啊？我们刚才说了，我们一个网站的他的主体部分是放在这么大的一个盒子当中， 然后在这个盒子里面进行布局，那么我们一般的网页的这个宽的吗？这个宽度是一千二百八十，那么我们这里为了给大家方便的话，我们把它缩小到一千啊这样一个区块里面，所以首先我们要构建这么一个大的盒子，用来做我们的容器。好，我们来构建一下， 点上，哎呀，好，容器的意思啊。好，然后我们来给他添加我们的样式，太太太杠，四二三四。 好，那么接下来我们来给他添加我们的样式宽度啊，我们来给他加上一个宽度，一千，然后我们来 给他加上一个高度啊，当然这个高度他正常是随着内容自动而往下撑的。这里为了给他看效果，我们给他加一下啊，到时候后面我们把它删除掉就可以了。然后我们来给他加上一个边框，我们来看一下效果。 coms 加是保存，然后我们的右击啊在浏览器当中来打开看一下。 好，那么这样一个长方形的区块构建好了，那么这个时候大家看他与上面和左边有这样一个间距，那么这个间距我们可以审查来看一下啊， 我们来选中我们的玻璃就可以看到，其实大家看这玻璃有默认的八相处的外边距，那么这个间距就是浏览器在最开始变异的时候， 我们这个波点默认自带的外边局造成的，所以我们不需要，不需要我们就把它给干掉，好抗拆架是保存，那么这个时候间距就没有了，那么接下来我们这边需要把这个盒子设置在水平方向居中的位置显， 我们可以看一下，妈，给给大家上一个上三十像素的外编剧，左右外编剧自动相等，那么下外编剧为零， ct 加是保存，我们来看一下大上外编剧，三十像素左右自动相等，水平居中啊，下外编剧不需要零， 好，我们接着往下看，那么首先我们要构建第一个部分，这样一个左右两列式的布局，那么这样一个结构，我们来看一下啊， 他其实是在外面啊，构建了这么大的一个盒子，然后在这个盒子里面再构建的左边这个红色的盒，右边这个黄色的盒子啊，所以是构建一个大的盒子，里面放两个小盒子。好，所以我们来看一下啊， 好，我们来给他取个名字叫 column c o r u m m， 这个什么意思啊？啊，这是我们的列的意思啊，好，我们这里是两列， 是的，所以我们给他取个名扣二，好，然后他里面要有两个，是不是一个左边和一个右边的盒子，所以点敲了门 啊。 c o r u m m 二杠一，好，我们来把它复制一份。二杠二， come， 加是保存好，接下来我们来给他添加样式啊，我们先给他最外面的那个盒子加加上一个边框，看看效果， 我们给他加个黑色的吧，看着加是保存啊，大家看一下啊，当然他里面还没有高度，所以啥也看不到，只能看着几个黑框框在那里。 好，那么接下来我们来给他里面杠点上，敲了门，二杠一，我们给他加上一个宽度七百，加上一个高 三百，再给他加上一个背景颜色红色， ctrl 加是保存好，再一个红色的区块就出来了，那么接下来我们来构建他的第二个部分，第二个里面的小盒子啊， 好啊，然后这里我们来看，总共宽度是一千，减掉七百，还剩三百，还要留下空隙，所以这里是二百八， 然后这个颜色我们把它改了，改成什么？改成黄色椰蓉，看，这家是保存，保存之后我们来看一下它整个就是外面这个大的盒子，是吧？这个黑色的边框包裹着两个盒子，红色的和黄色的， 那么接下来我们要让这个盒子怎么样？在水平局中啊，在水平，一个在左，一个在右显示，所以在左边的这个盒子我们给他加上一个左浮动，看此啊好，到了加完之后，这个黄色的不见了啊，这个黄色的盒子是因为什么被这个红色的盒子盖住， 有时候加了浮动之后，这个盒子就相当于飘起来了，他不占空间，所以下面这个盒子就把那个什么下面的盒子就缩到里面去，看不到了啊，所以同样的，我们这个盒子我们要让他往右边显示，我们可以给他加上一个什么右浮动。 read， 好看，这家是保存，保存照，大家看到没有？就在这里了，但是我们加完之后啊，这个效果是实现，但是他外面这个盒子，这个黑色的盒子是不是被塌陷了呀？ 啊，这就是因为加了浮动之后啊，这两个盒子相当于飘起来，没有占任何的空间，所以外面这个大的盒子就相当于没有高度了，他就被塌陷了，那么如果我们往后面再写内容的话，他就也会缩到里面去，那这样肯定是不行的，所以我们需要清除浮动，那么接下来看一下我们怎么清除浮动， 大家看啊，这里非常的重要，我们来看这是左浮动的盒子，这是右浮动的盒子，是因为这两个盒子的 浮动问题造成的塌陷，所以我们需要在他们的后面加上一个清除浮动的样式啊，我们来看一下怎么加，我们给他一个颗粒啊，构建这样一个颗粒，这样一个 diy 啊，这个怎么 diy？ 主要是用来清除我们的浮动的。好，所以我们来看一下点上颗粒 大括号颗粒是什么意思？清除浮动的意思。好，我们来看一下，比如说我们来清除一下左浮动， 这个什么意思？就是这个盒子啊，他在清除浮动的时候，这个清除左，大家看他只能清除他前面的盒子因为左右浮动造成的塌陷问题，他是不能清除他后面的盒子 造成的塌陷问题啊，等一下我们给大家演示。好，我们先给他加上一个清除左幅的，我们来看一下。好，清除的来看一下是不是也 ok 了呀？是不是 ok， 但是我 说了，好像我们只要清除左浮动就好了，他右边这个盒子右浮动造成的塌陷问题好像不需要清楚啊，我们来看一下啊，如果我把这个盒子的高度改成一百， 我们来看一下他会有什么问题，大家看到没有？是不是还有这个塌陷问题啊？那是因为我们给他盒子加的高度是一样的，所以正常情况之下的话，我们是应该左右浮动都要清楚的，如果我这里只清楚右浮动， 好像看上去也没有问题，是不是如果我把右边这个盒子也改矮一点呢？那么他也会出现那个问题，所以正常情况下我们是要清除什么啊？这个盒子前面的这把盒子因为左右浮动 给外面这个盒子造成的差塌陷问题，所以我们应该是 boss， 也就是说他前面只要有左浮动和右浮动都清楚掉， 所以是清除左右浮动，这样子大家看一下啊，就没有问题了。好， ok 了，这当然我们把这里先还原一下啊。好，我们刚才说了清除浮动这个颗粒为什么要写在最后面，是因为他只能清除他前面的盒子因为左右浮动而造成外面这个盒子塌陷的问题，他并不能清除他后面的盒子因为怎么样浮动而造成的塌陷问题。 所以我们比如说我们把这个盒子再复制一份，复制好了之后我们来看一下，你看到没有？这个是不是这个盒子的高度是不是还是这样的，并没有随着后面的内容来撑开 啊？所以我们一般清楚浮动的时候啊，我们一般是写在最后面啊，是必须写在最后面啊，不是一般， ok， 好，那么这样就没有问题了，那么 ok 了之后，我们接 接下来我们就要看我们的这种一行三列或者四列的这种布局了，我们来看一下啊，那么同样的这种一行三列的这种布局，他也是在外面构建了一个大盒子，然后在这个盒子里面构建了三个小盒子，然后再把它排在一排，这样显示，所以同样的我们来构建吧。 扣了吗？ c o r u m m， 好，这里是三是吧？好，然后点上 c o r u m m 三杠一，我们来复制三份吧，按住 alt 键和 c 不正向下的箭头就可以复制了。好，我们来啊， 这里来三炕在家是保存，保存之后，当然这里什么效果也看不到。我们同样的来先给他加点样式吧， 给他一个三啊，我们也给他加上一个边框来看一下，我们给他加上一个两项 蓝色的边框吧，看着加是保存，同样的看到的，这里有个啊，边框线。好，我们接着往下看三，下面的杠可入三杠一，第一个盒子， 好，同样的我们给他加上一点宽度吧。 iwy 四，我们来给他一个二百， 然后同样的我们给他加上一个高度三百，好，给他加上一个背景颜色，看着加是保存好出来了，我们来构建我们的第二个盒子 里面的第二个啊，好，同样的我们给他改成什么？我们改，改成四百，把这个颜色也给他改 改一下，我给他改个这个颜色吧。好，然后我们来看一下第三个， 好，我们来看一下啊，那么我们来看两百加四百就是六百，六百加四百就正好是一千，然后我们来看一下，总共这里是一千，然后这里要有间距二十像素，这里也有二十像素，是吧？所以我们要干嘛？我们总共只有九百六，九百六的话，那这里只有三百六了， 好，这样子啊，然后我们把这个改掉，把这颜色改了， 改个紫色的吧，看这驾驶保存，那么这三个盒子从上往下排列，当然我们要把它变成水平的，我们有两种方法，第一种就是给他们分别加左幅， 好，我们来看一下，比如说给他加上一个 flow 成，大夫吃给他也加上一个 flow 成，嗯， 来不成？然后给他也加上一个 float， 来不成？看成家是保存，大家看一下是不是 ok 了。那么接下来我们要产生空隙的话，我们可以给中间这个盒子加上左右二十像素的，外边去就可以了，马给上下为零，左右二十。 好啊，当然他挤不下去是因为外面这个盒子造成的啊，你看到没有？就外面我们给他加的掩饰是吧？比如说我把这个蓝色的这个边框干掉，因为外面这个盒占了空间吗？占了两箱数，他只要多一点点他都放不下，是吧？ 好，那么接下来我们来看一下，我们如果把这个把这不注视掉，我们来看第二种方式，他有什么好处啊？第二 种方式我们是第一个加左浮动往左，第二个也加左浮动往左，然后然后第三个盒子我们加什么不加左浮动，我们加右浮动，也就是说前面两个盒子往左，后面一个盒子往右，然后我们给中间这个盒子加上左边二十像素的外边去就可以了。 再看你们同样达到了这个效果，但是他并不会因为这里有两项数的这个边框而造成他掉下来，是因为他这里还有二十像素的这个空间可以容你怎么样？对啊，作为弹性是吧？伸缩自己去那个啊，好，这就是这种布局的方式，他有一个好处啊，就在这里。好， 那么 ok 的时候，同样的我们要清楚他们三个因为浮动造成的塌陷问题。好，当然我们要清楚浮动很简单，我们也可以把这个直接复制放到 这个位置就可以了啊。当然接下来我们来给大家讲第二种清除浮动的方式，我们就不这样加了啊。好，我们来看一下怎么加。先认真看代码，最后我再给大家讲原理，我们给大家定一个清除浮动的样式颗粒， 这个是冒号，阿富特大挂号。好，这是一个样式啊，然后这个冒号阿富特就是在他的后面。啊，什么意思？现在也不需要懂，等下再说吧。好，我们来 continent。 好，我们先里面加个一一一啊， 好，这些带吗？先，都不需要动啊。好，我们先写完了再说。可丽儿，这个，这个动是不是好不好使？好，那么这是一个典型的清除浮动的这样一个样式，它是利用我们的尾元素来写的，然后我们把这个样式放在哪里？哈？ 把这样式放在他上面，因为我们要清楚他里面的内容，是吧？因为浮动给他造成的这个塌陷问题。好，所以我们来看一下，我们保存之后我们来看一下效果就可以了。啊，好，当我给他加了这个样式之后，大家有没有看到这个地方有个一一就出来了。好，我们来这里审查元素，我们来看一下。 好，我们来看一看，看这里啊，好，到底有没有发现这个冒号阿富特看到没有？是不是在这个位置看到没有？我们点击他的手是不是在这里看到？好，现在一定要注意啊，这个冒号阿富特 就相当于是在这个 div 的最后面创建的一个委员数。什么叫委员数？我们正常的元素是不是他有标签名呀？对吧？啊？这个委员数呢？他具备了这些标签的所有特 行，但是他没有名字啊，就这个意思。好，然后我们来下这个 content， 这里面是什么？这个一一就是相当于这个元素标签里面的内容，比如说我们现在写了个 p 标签，我打了个 ss 或者打了个一一啊，他就相当于这个中间这个内容。好， 然后我们来看一下，我们一定要把它设置为会计元素，他才可以清除浮动啊，我们来看一下就是不是真的是会计元素，我们给他加个背景颜色，红色，你看到他是不是？ 他其实就相当于是在这个最后面加了一个委员数，然后这个委员数的话，第一他的内容我们不需要，我们只是用他来清除浮动而已，不要跟这个一样，只是我们这样加在结构里面看起来不好看， 是吧？第二个就我们一定要把它转回快局才可以啊，大家看看看一下，然后在他身上加上一个颗粒 boss， 清除左右浮动这样样式就可以了。好， 这个地方大家一定要理解啊，其实他跟这个是一样的原理，无非他就是用委元素来在这个后面加好，但是这里有怎么样？有一个非常重要的就是他一定要把它转换为一个会计元素啊，因为他默认的是属于行内元素。 好，如果我大家看一下，如果我把这个注视掉，你看他就达不到清楚的效果了，你看这个是不是？好，所以这里他一定要注意了啊。 好，那么接下来我们要给他添加上外编剧二十像素与上面产生空隙，然后最外面这个盒子加上一个 money 杠 top 二十像素， 那么这样就没有问题了。那么三列是一行三列的布局，我们也做完了，接下来我们来看这个一行多列或者多行多列的布局，那么 像这种一行多列或者多行多列的布局，我们来看一下京东啊，它主要是用来做我们这种产品列表的样式来进行，是吧？来进行使用的，所以一般情况之下，我们都是用我们的幼儿无需列表来进行构建 好，所以同样的，我们在这里面也要构建一个大盒子，然后在这个大盒子里面利用我们的幼儿五系列表来构建我们这样一个多行多列的效果。好，所以我们接着往下看， 那么接下来我们来构建一个多行多列的 c cloud， cloud， 是吧？ curumm， 好，我们杠 m 吧。好， 这个啊就代表多的意思，多行多列的意思。好，然后里面我们可以用我们的 u r 标签， u r 五系列表标签，我们来乘以十。啊，好，大家看一下啊，这是一个快捷的方式，我再我再说一下， ur 这个监控号 代表它里面的紫元是，紫元是谁？是 r i， r i 出现几十，十四就乘以十，然后回车就可以了。好，看，车加 s 保存，保存之后你看到的就是这样一个简单的效果，那么接下来我们同样的给他接怎么加上一些边框来看一下效果啊？好，靠，热门 杠昂，大括号啊，我们同样的加上一个边框吧，我们也给他加上一个两项数，加上一个蓝色的边框。 好，这里看到了这样一个大的边框了啊，外面的盒子，好，然后我们来给我们的点上，我们的后门下面的 ur 也加上一个啊，我们加个背景颜色吧。 加个什么背景颜色？加个这个颜色的吧，好，看到了吧？好，然后我们来给我们的点，上课了们 下面的幼儿下面啊，哎，我们也给他加上一个边框来看一下效果啊。好， 那么这样子大家看到没有？这就是我们最开始构建的这样一个最原始的这样一个框架结构，那么接下来我们一步一步来调，首先大家看一下他与这个上面和这个下面有空隙，还有这个地方与这个 li 之间也有空隙，是吧？ 所以我们来看一下这个空隙是怎么造成的啊？首先我们来审查元素来看一下，选中这个幼儿，然后我们往下拖，看一下他这个幼儿的和模型，我们来看一下他是不是有默认的十六像素的外边距和四十像素的内边距，所以我们不需要，不需要我们也要把它给干掉。 好，所以我们可以在这里直接逗号幼儿把他的外边就干掉，然后我们同样的把那边就也加进去啊，零啊，当然他这里是零的时候，这个单位 可以写也可以不写啊，这个无所谓的。然后我们幼儿的前面还有这个小点点，我们这个小点点也不需要，我们也要把它给干掉， 嗯，把小小心写错了啊，有儿大括号，我们给他怎么样？把那个点点干掉是不是？ 好，那么这样就把这个前面的点点干掉了，干掉完了之后再看他就缩成一坨了，是吧？那么接下来我们要构建这样一个效果的话，那这里的每一个小区块其实就是一个二哎，所以我们要给每一个二加怎么添加宽度？高度，好，然后我们来看一下怎么添加宽度啊？高度 来呗，我们来给他添加一个宽度一百九，添加一个高度两百。然后我们看车驾驶室看一下，大家看一下，从上往下进行排着，那接下来我们要 他在水平方向排着，很简单，我们只要给他加上一个不落成，带不走，左不动，大家看一下啊，分分钟就上来了啊，当然因为他现在问题，他这个蓝色的盒子又不见了，是吧？好，然后我们每个盒子之间他是有一定的空隙的，我们来看一下啊，我们来给他加上一个 m， 咱把上下左右为五像素看是加是保存就可以了啊。那么上下左右为五像素相当于他的宽度是多少？宽度就是两百了，总共是一千，对吧？一个是两百，总共就给放五个盒子是吧？正好就可以放下。他这里放不下的原因是因为我们给外面这些盒子加了一个两相处的边框啊， 好，所以放不下。还有一个就这个盒子本身他有边框，又多了两箱，所以也放不下，所以我们要做的，我们可以把它加上一个背景颜色，看他这样式，然后呢我们把这个边框线注释， 那这样就正好可以放下了啊，大家可以看一下。 ok 了之后我们同样的也要解决这个浮动造成的塌陷问题。好，我们来看一下，我们说的是因为二挨家的浮动所以造成塌陷问题，所以我们要解决他的浮动问题，我们就在这里加上那个清除浮动的样式。 好，大家看一下这样子是不是整个浮动就清除掉了？那么清除掉了之后，这个整个的区块与上面也有二十相似的间距，我们可以给谁加？我们可以给最外面的这个盒子加就可以了，所以我们可以给他加上一个马，给你干 top 二十像素， 大家看一下，这样子就没有问题了。好，那么接下来我们把我们不需要用的辅助线全部给干掉啊，我们前期将辅助线都是为了让大家能够更清楚的看到它本身的一个结构，或者说 做到当前我们需要展示的效果。好，我们从上往下开始一个一个，第一个我们说这个高度要不要，不要高度，我们最开始是为了给大家演示效果看的，所以干掉，不要，干掉完高度之后，哎，这样子就没问题了。第二个这个外面的这个边框线也不需要，也要干掉。好，这个效果没问题。 好，接下来我们来接着往下看这个外面这里也有一个边框，也不需要干掉，然后这里三裂，是吧？一行三裂的这个地方也有一个边框，我们也不需要，我们也把它给干掉。 那最后就是这里了。好，这里我们来看一下，这个 u r 加了一个背景颜色，我们也不需要 好，那么整体的这样一个，你看我们这样一个布局的这样一个效果就出来了，就是外面一个大的盒子包裹着在水平居中，然后左右两列式，一行三列式，说一行多列或者多行多列的这 一个效果。啊，好，那么今天这一节课我们就给大家讲到这里啊，这个知识点是非常重要的啊，那么整个网站的框架结果，不管 任何一个网站，他基本上都是有这三种啊，硬结构来构成的啊。好吧，那我讲的可以的同学啊，可以点击关注啊，关注一下我，或者给我点个赞。

啊，我不知道有多少同学会在开发中写出这样的代码哈，你要能写出来的话，我敬你是条汉子。像这种媒介查询的代码，他一旦出现了，他一定不是针对一个选择器，一个样式，可能你系统里边百分之五十也就一半的样式，你都需要写这个媒介查询，那你写吧， 你这个玩意一写完了，你手不残废也抽筋了，而且这个代码写起来非常的恶心，可阅读性也极其不好，那么怎么办呢？我们要做每一项查询必须得写啊，哎，我们就可以利用 size 来极度的简化我们的操作，因为现在的开发呢，都是组建化了，是吧？在组建化里面写代码的时候呢，我只关心这个组建的这个样式， 比方说针对这个样式，哎，那么他在手机端是如何表现的呢？哎，他在平板上，哎，又是如何表现的呢？哎，对吧，我就把样式呢写到这，那如果说能这样子写的话，你看是不是就舒服多了，就比下边这种写法好了很多了。一是呢，样式他 聚合在一起了，读写呢也方便。第二呢，我们写的代码呢，也少很多了，也不用去记这些断点的尺寸，哎，那我们如何来操作才能完成使用这种写法来书写呢？ 那么这个时候呢，就需要用到砂石里边一个简化大一把的利器叫做混合，这个混合是啥意思呢？我们随便写一个啊，我把下面的中石掉了，好，我先随便写一个啊，比方说我要做一个居中，那么居中的话，我们经常可能会这样写啊，一个弹性和然后呢这样，然后又这样， 它里边的元素就居中了，对吧？那么像这种居中方案呢，我们可能页面中到处都要用，所以说这一块单法呢，我们可以把它提出去，那么就可以使用混合，那么具体怎么来使用混合呢？一个指令啊，叫 mixing， 然后给这个混合呢取个名字，比方说 flax center， 你要做的事情非常简单，就把这三行代码给他扔过去就完事了。那么将来呢，你但凡要使用到这个混合的地方，你只需要给他加上一个艾，把这个混合的名字放过来 一保存，我来看一下他生成的结果啊，哎，你看混合里面的这三行代码是不是跑到这来了，你看这里就跑过来了，那么这样一打以后就方便了，比方说另一个选择器啊，那他也要是弹性和居中，那么可以使用混合呀，啊，这里呢可以加上小括号，也可以不加保存，你看那么这里呢，混合的三行代码是不也过来了，就这么简单， 而且呢，这个混合呢，是可以给参数的，比方说我这里呢不一定是居中，有可能是其他的布局方式，那么你就传参数，比方说布局方案啊， lay out， 那么到时候用的时候呢，比方说这里你给我剧终，而这里呢，你给我放到起始位置啊，那么这里我们就可以使用电量了， 这样子呢，我们既能适配居中的方案，也能适配这个起始的方案，对吧？用参数来搞定保存，你看上边呢是居中 center， 下边呢是 start 啊，这是一个混合的基本使用。好理解了，基本使用之后呢，我们再回到刚才的问题哈，那我如何搞定 定这个玩意呢？那么我们可以定义一个混合 mixing， 呃，取个名字啊，叫 respond two， 适配哪个终端你给我传进来，比方说你要适配手机的话，我就这样用 include respond 啊，所以少打个字母啊。 s two 适配的是手机，好放这了是吧，那么这里边怎么写呢？适配手机怎么适配的？不就是下边这个吗？把这个复制一下，好粘过来 保存啊，这个时候呢，他还要接受一个参数啊，叫做 freak name 啊，就表示端点的名字，来取个名字叫手机。好，我们先暂时呢不处理这个参数啊，先就这样写，我们来看一下啊，保存，哎，你看右边，这不就是我们想要的吗，对吧？ padr 这个样式，然后呢适配手机，那么这里边可以写选择器啊，啥都可以写，他相当于把这个代码直接粘过来， 这样一来你看这手机的适配不就出来了吗？啊，这里多写了个选择器啊，删掉，那你看这个结果不就是我们想要的吗？哎，那我们如何来针对不同的设备呢啊，这是手机，那一会呢是平板又怎么办呢？哎，所以说我们这里呢 可以使用判断 if 这个 break name 如果说等于奉，你看砂石里边是可以写判断的，如果说是这种情况的话，那怎么办呢？那我就给你把这套逻辑写进来，对吧，你看保存没问题，那如果说你要适配的是平板呢？ include respond to 嗨，那我就再加上一个 l c break name 为 pad 的时候，那又怎么样呢？我就匹配平板的情况，对吧，保存看一下，哎，你看现在呢，有了手机了，有了平板了，你看这边手机平板是不是都有了，对吧？别人一起过都是 ok 的，那么按照这个思路呢，我们就可以继续写出适配笔记本，适配桌面端，适配大屏 都可以写了，但是你这样的写法的话，他不够灵活，因为目前呢就是一个黑的，是吧？那如果说其他的样式呢，他不一定是高度为六十，高度为五十，他可能是别的样式，也就是说在这个代码里边呢，他不够通用，他这一块呢，可以是写死的没问题。有手机的话都是这个范围吗？ 啊？你一个系统里边不可能搞出两个手机屏幕的范围吧？这个字写死的没问题，关键是这里边东西不是写死的呀，他可能会变化的，那这怎么办呢？哎，在混合里边呢，我们可以这样子给他传递一些内容进去， 混合里边加上一个划括号，比方说我们这样写啊，就是他具体的样式内容呢，由你自己来定。那么这一块东西呢，就有点类似于啥呢？类似于唯有的插槽啊，把这个插槽给这个混合传进去了，那么也就是说混合里边要干嘛呢？他只需要在这个位置不要写死他，替换为插槽的内容就可以。 怎么来替换呢？在混合里面有个关键指令啊，叫做 contin， 这个指令就表示的是你在使用混合的时候，这个发货号里边 传进来的东西，不管你发括号里面有几行，他通通传到这个指令里边来，那么这样子呢，你就可以根据实际情况在这里面写任何东西给他传过去了，懂这意思吗？那么这里呢，也是一样写成康点子啊，这样好看一点，没问题吧？那么我看一下编译结果呢？哎， 演绎结果也是很舒服的，没问题。好，我们继续思考啊。那如果说我要去写这个衣服判断的话，那个分支有很多，你不用说别的了，你用 gs 这样写出来也不舒服呀，那么在 gs 里面该怎么办呀？如果说一个函数里边判断分支太多了，而每一个分支里边做的事呢，都大差不差，就是有一些地方呢有一些变化，其他都没有什么变化， 那么你会怎么处理？在 gs 里边处理方案很简单，是不是就去提一个数据结构出来啊？比方说提一个对象出来，哎，比方说你这个手机他对应什么呢？哎，对应一个数组，这个数数呢是三百二十，四百八十，然后呢，你的 pad 他的范围呢是四百八一到七百六十八，那么依次类推啊， 写完，那么这样子的话，在这个混合里边，我们是不是就可以读这个对象里边的各个属性了，一个便利就可以全部搞定了。那么这样子的话，在这个混合里边是不是可以根据这个参数啊？这个参数不就是他的断点类型吗？对吧？要么是他，要么是他，要么是别的来取到 他的值，一取到他的值不就搞定了吗？然后把这个代码写出来就完事了，懂这意思吧？哎，那么接下来我们就尝试着用这种方案来做一下，能不能做，首先要搞定一个问题，就是在砂石里边能不能写对象，能不能呢？可以啊，在砂石边他名字不叫对象，叫做 map 兼职队那个跟对象有啥区别呢？你说兼职队跟对象有啥区别？没啥区别是吧，那就来整呗。那么这里呢，我们就定一个啊，断点列表 格式是这样的啊， great points 这个变量呢，它是一个 map， 在三十个 map 的结构呢，是使用两个括号啊，他不是使用花括号啊，就小括号在括号里边呢，写上坚持队就完事了。 比方说这个手机，手机是什么呢？手机是一个数数，那么这个数数又怎么来表示呢？还是一个小括号，然后两个值，三二零和四八零啊，你顺便把这个单位带上吧，都写完了，这是个数数啊，这是个对象属性名，属性值啊，属性值是一个数数数数的第一项，第二项，然后 依次类推，我们就可以写出 pad 啊，以及呢后续的所有内容啊，保存，你看下这个结构啊，这不就是我们想要的结构吗？啊，注意啊，最后一个值呢是大屏，大屏的话我这里呢就没有取最大值了啊，凡是大于幺二零幺这个宽度的都属于大屏啊，他没有最大值的上限， 这个结构就出来了，对吧？好，那么接下来这个压力呢，又给到这个混合了啊，你可能觉得就写个啥时代吗？有必要搞的这么复杂吗？那我跟你说哈，就看你怎么来看待复杂问题了，你要知道这个复杂问题， 他可不是毒药，他是宝藏啊，虽然呢，他会给你工作带来困难，但是呢，你通过去解决他，你能够获得巨大的提升。但是呢，我很遗憾看到的现象呢，是绝大部分同学呢，遇到复杂问题，要么呢想办法去 粘贴，要么呢就是打报告换方案，总想着各种办法去照顾他。你想啊，在很多小微企业里边，像这种复杂问题本 本来就少，你能获得提升的机会呢，也就那么一点，好不容易遇到了呢，却视珍宝为毒药，长期这样下去的话，先变熟练功，接下来就是高领危机，这是唯一的结局啊，我想不出还有任何别的结局。所以呢，我希望我的短视频也好，我的大师客也好，能够帮你改变这个注定的结局， 特别是我的大师课，这是我录制的一套免费的课程，你花一周时间把它学完，他会让你对整个前端有一个超凡的认知，无论你是在寻求就业还是想在职提亲，这套大师课都是你的必修课，课程有难度，某些内容呢会显得比较复杂， 也是正因为如此，这套课程才有极高的价值，烂大街的东西不值钱的。好，这套课程呢，目前还可以免费领取啊，还没有领到的同学呢，可以进咱们评论区第一条，然后呢加入我们的粉丝群，根据提示领取，完事了。好，接下来代码回到这个混合，你给我传了一个断点的名， 名字，比方说凤，还有这个 pad， 对吧，那么我就可以通过这个名字从这个对象里边拿到对应的属性值，能不能做到？肯定能做到是吧？那怎么来拿呢？在砂石里边呢，有一个函数叫做 map get， 他专门来在一个映射里边去取值，他传两个参数，第一个呢，映射的那个对象啊，就是在卖，就这个数据结构，第二个参数呢，是他的属性名啊，就来自于这个地方， 那么这样子呢，就可以取到他对应的映射值，我们保持到一个变量里边去啊，取个名字叫 b p 吧， point， 好，拿到这个变量值过后呢，你看拿到是这个东西，这个东西和这个东西或者是这个东西，那么这个时候呢，由于他有可能是两种情况，他有可能是一个数组， 也有可能是单个值，对吧？你要判断一下到底是哪种情况，因为写出来代码是不一样的，那么怎么来判断呢？我们可以使用另外一个函数叫做 type， 你把这个值传进去，他会得到一个类型 啊，这个纸到底什么类型？如果说你是一个数组的话，它的类型呢？就是 next， 那么这样子呢，你就可以判断了，如果说取出来这个属性值，它是一个数组，那么怎么样呢？我就取到这个数组的前两项，对吧？ 现在问题又在于，我怎么才能取到前两项呢？那么这个时候呢，又依托于另外一个函数叫做 nth 传入，这个数组传入他的第几项啊？这里呢是从一开始的，那么这样子呢，就取到了这个数组的第一项，第一项把它保存到一个变量里面去， 表示呢我们的设备尺寸的最小值，然后呢再来一个 max 设备尺寸的最大值，那你想啊，这两个玩意都取出来了，那这个代码是不是能写呢？那这里写啥？是不是最小的值， 这里写啥？是最大值啊？下边不要了，咱们试一下呢，保存看编译结果，哎，你看编译结果是不是没问题啊？咱们再来试一下呢，这是平板对吧？然后再来一个笔记本吧， note 不比方说八十保存啊，你看这边，哎，笔记本的代码也出来了，是吧？ 好，那么就剩最后一种情况了，就是这个 tv 的情况，他只有一个值，那就太简单了，那就是 l， 是吧？当他只有一个值的时候呢，那就来自于这个代码只有一个 mini wage 啊，没有 max。 好，就写完了，那么我们就写出来了一套通用的媒介查询代码， 主要是针对响应式布局的。之后呢，我们所有的样式呢，就不用再像之前的样子啊，一个一个去敲了，直接在相应的选择器里边直接输选他针对不同设备的样式就完事了，让他进行编译。我来试一下 tv 啊， 便宜的。结果呢，看一下这边，哎，就得到了我们想要的最终结果了啊，所以说这个沙子呢，虽然是他不参与运行， 但是他可以极大的减化我们的开发，那么这样子的话，是不是之后斜切代码来就好多了，是吧？那像这种技巧的话，不仅仅是可以用在响应式里边，应该很多地方都可以使用，凡是你觉得斜起来比较恶心，比较累的地方，都可以想办法利用这个萨斯来进行简化。

大家好，我是爱编程的清新老师，今天我们给大家讲解常见的三十个 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 标签啊，这个很重要啊，他是一个隐性的问题哦，我们把这个边框干掉就好了，还是为了给他看效果，那么这样就没有问题了啊， 好，整个页面的效果就制作完成了啊，如果对大家有帮助的话，大家可以点个小红心关注一下啊，需要这，当然这个课程的话，我们给大家准备了这种详细的文档啊，就是比如说 第一步要干嘛呀，是吧？比如说我们这个效果做出来第一步干嘛？第二步我们要做什么效果呀？然后代码对应的代码就是这写好了，大家看一下产品描述样式，看啊，大家可以看一下我们有详细的文档的步骤啊，大家看到如果大家需要这个文档的话，也可以私信啊，我们来获取。 好吧，那今天的课程我们就给大家讲到这里了，希望对大家有所帮助啊，拜拜。

这节课来学习设置网页样式的第三种方式，通过外部文件来设置，这些文件是以 css 为后缀名的样式写在这些文件里边，与上节课讲的四条标签设置样式写法是完全一样的，也是通过选择器来定位到要设置的元素。 在这需要着重讲的是如何引用这些文件，我们可以通过任何标签来引用，重点来看他的 hr e f 属性，这里的值可以是一个链接，也可以是一个本地路径。链接很简单，直接写到这里就行了。我们主要讲路径的形式来看这个路径，这个文件是在 css 文件夹下边， 那么 css 文件夹是在哪呢？我们打开支援管理器看一下， 是在一盘的 a 十 tml 文件夹下的呆萌文件夹下，那我这里为什么写这么短呢？这就引出两个概念，相对路径和绝对路径。 绝对路径就是刚才所说的本地瓷盘上的固定路径，从一盘一直到这个文件夹下边，这个比较好理解，那么相对路径呢？ 相对当然要有一个参照物，在哪个文件里面写就相对于哪个文件，我们是在这个引带子文件下面写的路径，那么就是相对于这一个引带子文件来说的。再看这个路径，他前边其实是还有一个点斜杠的，就是下面这个，他们两个是一样的， 只不过是默认情况下可以把这个底斜杠省略。那么这底斜杠表示什么呢？他表示当前路径， 当前路径就是指的这个引带子的文件所在的路径，所以这个路径表示当前路径下有一个 css 文件夹，这个文件夹下面的斯泰文件，于是每当我们看到这样的路径，我们就应该知道他要找的是与我们 这个当前文件评级的那一个文件夹，就不用像绝对读景那样把它给写全了。 那么下面这有两个点，一个习惯的表什么呢？他表示上一集也就是这个引带子文件的上一集是这一个目录，下一盘 htv 文件夹下，那这下面有 css 文件夹吗？没有，所以这个路径他是找不到这个文件的。 那要是再往前写两个点，一个斜杠呢？他表示上一集的上一集再往前写，就以此类推，相对路径就讲完了。我们来看一下四叶蟹的文件是长什么样子， 他里边内容与 style 标签里面内容是完全一样的。我们讲了这三种设置方式，那么他们优先级是怎样的呢？可以遵循就近原则，离元素越近优先级越高。 一般情况下是 style 属性大于 style 标签，大于 csts 文件。如果这三种方式都定义了某一个样式，那么起作用的就是 style 属性里边的样式。但是还有一个关键词是这样的一个关键词，感叹号后面有破证的， 他表示这个样式的优先级是最高的，一旦加了他，不管哪种方式设置都以他为最优先。但是如果每一个方式里面都加了这个关键词，那还按原先的究竟原则好了。给网页设置样式的这三种方式我们都讲完了，这节课就到这里。