75.尚硅谷_HTML&CSS基础_练习.avi原创

乘客啊，上午呢，咱们讲的是我们这个背景啊，背景相关的，我们其实还没有说全，说了三个，一个是我们这个background color背景颜色，还有一个是background，一个image背景图片，然后还有一个叫做background，一个repeat，说的是我们这个背景图片的一个重复方式，那背景说完了，其实这个三个水说完了，我们这块可以说一个呃，小的东西，比如说我这块，咱们看我这个图片啊，图片我这有一个这个诶VCD这个网页的一个截图，这个图片呢，我来直接用什么呢？用我们这个PS Photoshop给它打开。Photoshop打开以后吧，我们来看看啊，这里边我们背景，背景是怎么去应用的啊，我给它放大一点，CTRL1放到100%，然后看哪呢？看这我们这个网页最上面，实际上我们发现它有一个什么呀？呃，有这么一个导航条，诶那我们发现这导航条实际上它是一个什么呢？它是一个你发你发现什么呀，我们来选一下颜色，它上边是一个什么呀，是一个F1F1F1，然后往下你看这个颜色干嘛呀，是不是一直在变呀，中间最深好像是有一个阴影一样，然后下边是不是又浅了呀，也就是说我们这段背景实际上它是有一个渐变的这么一个效果的吧，诶渐变这么一个效果，那我们现在想实现这个效果，那我们说了，诶，除了我可以用一些4S3的样式，我还可以干嘛呀，用用我们现在已有的知识，我可以怎么做呀？哎，我可我是不是可以把它设置为我们一个元素的背景啊，哎，我截一个图，把它设置为我们元素的一个背景，那截图就有讲究了，那你假如说我们要设置这个背景，假如说我就想做这么。

一个。导航条啊，我就想做这么一个导航条，那这这东西我要去怎么去做呀，那我们先说我用不用把整个这个导航条这图给它截下来，哎，你这截着还挺麻烦，为什么呀，咱们这还不是一个PIPID的图，这个图上面是不是还有还有字啊，你还得想着把这字还有这红色是不都给去了呀，所以咱这图你想这么截都不行，那我们可以怎么办？诶我们想想，那我们会发现什么呀，我们来看看啊，放大一点，我们发现你看这个图，整个这么一个图，它实际上是不是水平都是是不是都重复的呀，你看我这，你假如说我说这块和这块实际上他们是什么呀，是不是一模一样的呀？哎，所以像这种背景的话，我可以干嘛呀，我可以只截一小块，然后将这一小块是不是进行一个平铺啊，哎，进行一个平铺，那我们来看看我们要做这么一个东西，我们要怎么做啊，做这么一个东西要怎么做来，那咱们这里边要做它呢，我们先来整一个什么呀，我们先来一个这个页面，页面我们来一个零七，诶零六我们就是一个什么呀。

就这么一个这个导航条，简单的做这么一个东西，那现在我要做这么一个导航条了，当然了，导航条其实我们应该用的是这个ul啊ul，那我这块省点事，我就来一什么呀，来一个div了啊，我就省点事了，直接来一个这个div，我现在干嘛呢？我们不管别的，我只想给这个div设一什么呀，设置一个这个背景，背景应该跟谁一样的，跟我们这个里边这个什么呀，是不是这个图是一样的呀，哎，那跟这个图是一样的，就问问就有问题了，我现在这个导航条它是不是有一个这个。

总的一个宽度，还有这个高度啊，哎，那我要想把这个导航量定义出来，我是不是先得把它这个宽度高度给它量出来呀，哎，量出来，那我们这块大概量一下，诶这一块我先看一下啊，咱们从头量到尾。这是一什么呀？这是一个991，诶，宽是991，高是32吧，但是这个呀，我明显是量错了，高没问题，严丝合缝对吧？诶，但是宽呢，是不是多一个像素啊，哎，多一个像素，宽这块多了一个像素，那我们来看它的这个什么呀？它的宽应该是990，高应该是多少？32啊，宽应该是990，高应该是32，所以这里边我们来给他写一下style标签，点一个BOX1，我们来一个Y是一个什么呀？是一个这个诶，990个像素，然后head是一个什么呀？32个像素，为了清楚一点，我们给它来一个background color，来一个井号BV，我们先把它颜色弄出来，当然这个颜色肯定不对啊，然后呢，我们让他来一个margin，让它干嘛呀，居中一下，呃，来一个50，然后来一个凹凸往下稍微靠下一点，CTRL运行。

诶没写单位是吧？诶这50PX保存，所以你会发现它是不是没有生效啊，没有生效啊，一刷新这样就成了啊亮成了，好那现在我们这个档号条这个东西已经过来了，宽度高度我们都定好了，那接下来是不是就该设置我们这个背景图片了呀？诶那我们说了，那这个背景图片我要怎么设置，诶我是不是可以截一小块行了呀，截一小块然后让它水平方向平铺是不行了呀，诶那我们截多小啊？诶其实这个东西我们说是不是越小越好啊，因为我们其实它都是水平是重复的，其实我们最小可以接到多少啊，诶我们最小来一个像素也就是什么呀，也就是这么。是不是一条啊，哎，这么一条啊，这么一条，然后截完它以后，这图我们怎么截呢？诶我们先拿什么呢？先拿我们这工具用把把它什么呀，把你要截的这个像素给它圈起来，注意你圈的时候，你可别挑着有字地圈，你圈是不是就连字一块重复了，哎连字一块重复就圈圈成什么呀，没字的，然后我们来看一下，它是一个宽是一个一个像素高是一个32，然后怎么切呢？点击我们这个图像有一个什么呀，诶有一个这个诶裁剪，诶裁剪完了我们发现是不是就裁出了这么一小条啊，诶裁出一小条以后，我们需要对它进行一个什么呀？保存文件干嘛呢？存储为web所用格式啊存储为web所用格式直接一存，诶，我们来，你看这图是不是就这么大个啊，诶那这块注意啊，这是我们第一次去切这么一个图，切完图以后呢，你注意在这儿我们可以选择这个图片的一个格式，在这儿呢，可以看到我们这个图片的一个什么呀，大小，现在这个大小是188个字节，我们说选择图片的规则就是。

我们说依据什么呀？哎，效果一致用小的，哎效果不一致是不是用效果好的呀，那咱们这个玩意儿有没有啥效果好不好啊，这基本上没有啥效果好不好是吧，都能显示差不多，所以咱们是不是挑一个小的呀，怎么挑啊来你这一点是不是有这么多格让你选呀，那么先看GIF1看这是多少啊，155，然后再看GPG330，哎，再看我们这个PNG24是际什么呀，188谁最小啊？哎，GIF是不是才155啊？哎，所以咱们就直接用我们这个GIF了，而且看看效果，效果实际上。

是不是没区别啊，哎，没有区别，所以咱们直接用这个GIF，然后我直接一存储，存储的我就往桌面上存了，这是我们的一个这个呃，BG吧呃，背景图片，然后把这图片给它CTRLC看，给它干嘛呢？粘过来，粘过来以后呢，我们来看看这个神奇的图片，诶看见了吗？看见了吧？诶那同学说这破玩意儿能干啥是吧？哎，这牌能干啥，我们来整一个啊整一个来，那现在干嘛呢？我将这个图片设置为我们这个导航它的一个什么呀，背景图片设为我们它的这个背景图片，直接来一个诶background，一个image，诶background背景图片，然后URL，我们这个BG.gf然后注意了这图片我们需要它干嘛呀。

是不是平复啊，哎，不，其实不需要平复，我们需要做什么呀，水平方向重复吧，哎，垂直方向没有必要重复啊，垂直方向没有必要重复，所以这里边我们接着来是干嘛呢？设置，哎，水平方向重复啊，水平方向重复直接来一个叫什么呀，Background一个，诶诶repeat repeat叫什么呀？Repeat X啊repeat X我这一保存，咱们来看效果一刷新走你。是不是就出来了呀？哎，这就是我们那一个像素的什么呀，平铺的一个效果啊，平对效果，所以以后你看到这种什么呀，这种重复的图片，我们都可以使用这种方式去平铺啊，只截一个像素，然后对它进行什么呀，水平平铺就可以做出来我们想要的这个这个效果啊，想要这个效果，但这看不出来了，那我怎么回去啊，切完图怎么回去点这个，诶这有一个什么呀，这有一个历史记录啊，历史记录往上反，反到我们什么矩形选块是不是这就回去了，哎，这就回去了啊，可以让它给它变回去啊，变回去诶那么来看看跟我们上边这个导上的效果是不是一样的呀？哎，跟它效果是一样的啊，所以像这种重复的，我们直接截一个像素，然后让它屏不就可以了，但是实际上这一块呢，这个repeat X你写不写都行，我不写呢，效果是什么样，是一样的啊，效果是一样，一刷新是不是一样啊，为什么呀，自动是什么呀，默认是双方向的，一定要注意默认是双方向的对吧，但是为什么。

垂直方向体验不出来，哎，我是不是高度有限啊，哎高度有限，它没有，它垂直方向没有空间去平铺啊，垂直方向没有空间平铺，但是注意这个这种东西咱们西部向的垂直平波不希望你不希的垂直平铺，最好你显示吧，它干嘛呀，显上为什么呀，因为如果这个东西稍微大一点，比如说来个什么呀，52我一刷新走，你是不是出来两条了呀，哎出来两条变得非常难看了，那这时候如果你有这个东西就没有问题了啊，就没有问题了啊这更丑是吧？诶这更丑，但是咱们说的是避免一些特殊情况出现啊，避免特特殊情况出现啊，一定要注意啊，这里边你要想让他水平你就给他指定好了啊，不要干嘛呀，不要去。

尽量你不需要双方向平步，就不要使用默认值啊，就不要使用默认值，好，这是我们说的这么一个简单的一个，算是一个小的练习吧，我们就来停一下。