95.尚硅谷_HTML&CSS基础_页面练习-banner.avi原创

啊，刚才呢，我们这一块是把我们整个的页面这么一个hier啊这个东西给它做完了，那接下来往下做下边整个这么一个东西，这个东西我们叫什么呢？叫做一个这个banner啊叫一个banner，什么叫banner啊，Banner就一什么呀，就像旗帜的意思是吧？诶旗帜的意思，你像我们那个每个网站基本上你一进去以后，一进来一看到什么呀，中间会有一个比较大的这么一个图片，这么一个东西，诶能这图片是可以可以换的，叫什么呀，这就叫bner，相当于我们这个网站一个一个旗帜啊，我们就是比较比较抓眼球那么一个东西啊banner，那首先呢，我们来看这个banner，我这一看的话，其实就是一个什么呀，是不是就是一个大的图片啊，哎，大的图片，那这里边我们要放这个图片，那其实我也得先给他整一个什么呀，是不是整这么一个div啊，哎，整成一个div啊，所以这里边我们为了写这个banner，我们先来干嘛呢？在这儿啊，在这来写个这个div，那注意了这一块上边这个div是什么呀？是我们这个hier吧，哎，Hier那这块你可能看不。

那我们可以怎么写呢？这样我就加一个注释，这是我们这个headde head headde的一个开始，然后下边我也写一个，这是我们hide的一个结束啊，结束，这样我们这个开始结束位置是不就比较清楚了，然后再写一个div，点一个ban班ner，然后呢，这我同样也写一个，这是我们这个班的开始。诶，这是我们这个banner结束，诶这样我们来把我们这个标签的开始位置和结束位置都给它标出来，然后我们再找的时候就就好找了啊就好好找一点啊结束，当然你说你不这么找，其实也行，我们来看他这吧，你看我们每一个div，每一个标签前面是不是都有这么一个减号啊，诶你点这减号走你干嘛了，他给你折起来了啊，他给你折起来点它也行啊，点它也行，好这是我们说的这块啊好，那斑那有了，那我们说了这个斑呢，它用不用设置，宽度是九百四啊，用不用不用啊对呀，那我用不用设置啊，你给W不也是设置嘛，对吧，单的的宽度是不是也是九百四啊，哎，它是不是也得是居中啊，哎居中，所以我们需要把那个W是不是也也得给他写上啊，哎，也得给他写上啊，所以注意banner，包括我们下边那些什么呀，Content呀，内容啊，包括底部诶，他们都需要干嘛呀，设置一个940，让他干嘛呀，居中啊九百四然后居中，但是我们不用再单独。

设制了，直接把这个W给它加上就OK了啊好，那加上以后呢，接下来就简单了，一看这班字里边是不是就一个大图片啊，那干脆咱们就往下把图片给它整过来呗，诶那这里边啊，咱们嗯，咱们这样，咱们直接呢，把这图片给它放在这儿，直接来一个img标签是不是就OK了呀？哎，MG标签，但是我要放这个图片，你就会带来一个问题，我是不是得先去截这个图片啊哎，去把这个图片给它切下来，那这种片怎么切，那这图片跟哪呢？图层你直接一选图层跟这儿呢一点是不是跟这那样，这种图片怎么切，它有一个简单方式，因为这种图片其实我们不用圈了，它本身大小是不是这么大个啊，直接摁着你键盘上的这个out，然后一点这个眼睛，点你要切这个图腾的眼睛一点什么效果，效果是不是就剩他一人了，诶就剩他一人了，然后点击图像有一个，这回别裁剪了，裁切啊裁切我这一点走，你就直接确定咔，是不是就剩他一个了，诶这块就不用再画圈了啊，我们再画圈了然。

然后直接文件我们存储为web所用的一个格式，这里边呢，由于它这个四角这有一个什么呀，透明效果，所以咱们还是用这个PNG24了啊P24了，然后直接点击我们这个存储，存储还是存到这吧，就叫一个ban呀，Banner点一个PNG，当然这个banner吧，实际上我们能看出来这个banner是不是就固定不变的呀，不是，其实它可能会干嘛呀，是不是可能会发生发生变化呀，哎，发生变化，所以这里边咱们最好在这干嘛呢，我在新建一个文件夹B啊，专门放我那个banner，就是说我可能在一堆图片里去切换吧，但是咱们现在涉及不到啊，咱们先准备一下啊，给它搬那来什么呢？这叫一个。

诶叫做一个BANNER01吧，诶banner01.1个PNG，然后src我们就好整了，直接来一个什么呀，Banner01.1个PNG，诶out呢，我给你写一个，诶这是一个图片，我就不再具具体写了啊保存，然后再看一刷新走你。是不是就出来了呀，而且你看这图片是不是正好在我们这块位置，诶为什么正好在这块，因为上边我们那个嗨的那个拍镜是不是已经设置了，诶就导致我们那个斑呢，正好就是贴着我们那个内边距下来的啊，就不用再去调整它的一个位置，诶这个位置就已经摆的去摆的是非常好了，我们来看看跟它的一不一样往回走一个。然后呢，我们还是啊点奥才能出来，哎，那这一关我们来看啊，哎，它正好是不是就在这个位置啊，位置我们都不用再去调整了啊，都不用再去调整了，好那这一块我们给它设置完了，设置完了以后它是不是就完了呀，感觉好像是不是是不是挺好是吧？但是发现感觉效果好像好像不太对是吧，这个这块感觉它是有点这种立体的效果是吧？但是咱们这好像就是有点平淡无奇那种感觉了，差在哪了？阴哎你要注意什么呀，这个斑呢，下边是不是有这么一个阴影啊，诶就是这个阴影导致我们什么呀，导致我们这块是不是出来这么一个立体的一个效果呀，诶，所以这里边我们是是需要还要给我们这个图片去设置这么一个阴影啊，诶，那这个阴影我们要去怎么设置啊，实际上这阴影是个什么玩意儿啊，是不是也是个背景图片啊，哎，也是个背景图片，所以阴影设置简单了，直接是不是给他设这么一个背景就行了呀。

诶，那我们来看这阴影跟哪儿呢？啊，阴影我们看看能不能找到，诶阴影的边界应该是在这儿，它自己就吸住了啊，这是我们这个整个阴影的一个边界，我先给它圈出来，圈出来然后这个阴影我直接一点，诶看出来了吧，哎，就是这块啊，你选中这个图层还是选中这个图层，然后摁着这个out一点，这个阴影就干嘛了，就出来了啊这就是我们整个那个什么呀，阴影啊，这么一条啊，这么一条，那这里边注意啊，你在整这个阴影之前呢，你先把这个线给它拖出来，这个线是我们这个阴影的一个边界，因为待会儿我们要去干嘛呀，我们要去量一下它啊，我要去量一下它，好阴影这有了，然后我这一点把阴影给它干嘛呀，还是刚才那种方式，图像裁切确定。

是不是阴影跟这儿来，然后文件存储为we部所用格式，诶这就是我们这么一个阴影来，还是有透明效果，直接就PNG24了，存储叫一个改一个名吧，叫一个这个BN ne banner的一个BD，我们banner的一个背景啊，Banner一个背景，那这个背景有了，我要设置给谁呀，设置给谁呀？哎没得选，只能给谁呀，是不是给div啊，哎，只能设置给我们那个div来，那这里边我们来设置我们那个banner，直接我们来一个点一个这个banner banner我们来一个这个background background来一个这个URL，我们叫做一个banner。

斑的BD是不是这个阴影啊，哎，阴影这块我们都给它摆出来来保存，但是这个东西我们这么设置它行不行呢？哎，那这块会是一个什么效果呀，咱们来看看那这里边，但是你这么设置完了吧，肯定看不着，我们一刷新呢，看不出来，为啥看不出来呀，呃，现在是不是在我们这个图片后边的呀，哎，我们现在div我们没有给它指定高度，高度是被我们这个内容撑开的，而我们这个div的高度是不是跟图片的高度是一样的呀，所以就导致我们整个这个阴影被我们这个什么呀，背景被我们的图片是不是给给盖住了呀？诶那所以这一块我需要干嘛，我是不是需要给我们这个div给它设置一个高度才行啊哎，那高度设置多少合适呢？

诶，正好刚才我写了这么一个参考线高度是不是就从最上边一直到我这个参考线这个位置啊，哎，参考线这个位置，所以这里边我们直接量这两条线之间一个距离，所以参考线的作用在于这啊，可以去方便我们去测量，这是一个什么呀，高度是一个356啊356，所以这里边我们直接干嘛呢？把bner的高度给它设出来，设置一下我们这个高度，直接来一个这个hat来一个多356个像素，然后这是设置我们这个背景，设置我们这个背景，然后一保存这一刷新走你。诶，这这这这这玩意儿感觉是不是很奇怪的样子呀，来我们先把图片啊给它去掉，我们来看看这个神奇的效果，哎，我这一保存咱们来看走你什么效果呀？哎，首先它这是不是重复了呀，而且还是什么呀，水平还是垂直是不是双方向重复的呀？哎，我们说我需不需要的屏幕，哎不需要的屏幕，所以这里边我们再写什么呀，来一个这个no repeat啊no repeat，然后一保存一刷新走，你这回好像又看不着了是吧？是不是跟这呢呀哎跟这呢，那除了你设置它不重复还能干嘛，是不是位置啊bottom center是不是靠底边居中啊哎，靠底边居中，这回一刷新这阴影太过了呀，哎，这回就OK了啊过来以后咱们再让图片干嘛呀，出来保存，这一看一刷新走你诶是不是效果就好多了呀，哎，效果好多了啊，所以注意设这个音。

正的时候不要忘了干嘛呀，不要让它重复，然后还要注意设置一下它的这个位置，底部居中啊，底部居中好，那这个呢，我们斑的整个这一块这个阴影，这个整个这个图片啊，包括我们这个图片，这个阴影就给它设置完了，那这一块设置完了是不是就完事了呀，还有哪需要处理一下啊，诶你注意有一个小东西，这是不是有一个有点啊，这个点是干嘛的呀？诶这个点是不是可以切换呀，现在我们显示一个图片，我一点这个点不是可以合以换到另一张啊，诶通过去点击这个点可以去切换我们这个图片，也就是说我需要去设这么几个点，那这个点我们用什么合适，用什么合适，首先你能点吧，哎能点其实用啥都行，最好的方式，其实我们用一个什么呀，超链接是不是就最简单呀，哎能点，哎还得能设置这个背景图片，所以这里边我们来干嘛呢？我们先整这么几个超链接，这需要几个呀，五个超链接是吧？哎五个。

链接，那这里边呢，那但是设置超链接的时候，我们超链接的背景得设置什么呀，是不是得设成这个点的背景啊，诶所以这样咱们先把这个点给它接出来，这个点呢，截的时候稍微麻烦一点啊，稍微麻烦点怎么截呢？来你先注意啊，这点的比较恶心，为什么恶心呢？它两个图层选中白的是一图层，你点是不是白的没了呀，然后黑的呢，又是一个图腾，哎，这哥俩还行，这哥俩离得比较近是吧？那咱们省事了，直接点住它1OUT是不是剩一黑呀，再选这个眼睛是不是这样就出来了呀，然后图像裁切，确定是不是剩一点啊，诶文件存储为web所用格式，这个呢，我们来也是直接用我们这个PNG24了存储。

存储，然后这来一个名叫做一个putint呀，Putin point来一保存，是不是这么一个点就出来了呀，然后这刚一个点的注意了，我用不用五个点都接呀，哎不用，其实这几个点是不是长得都一个模样啊，哎都一个模样，但是呢，我们来。我们来看还有什么呀，它还有一个除了这白点还有一个这么一个蓝点是吧？哎，蓝点同样他也得还是刚才那招啊，还得去找一下这一个图层，然后黑的呢这一个图，诶这俩还行，离得也不是很远是吧，还是out点一个，然后再点着它是不是两个就出来了呀，然后那这两个点有什么区别呀？哎，这是一个被选中的吧，哎，那个是没选中的啊，没选中的，所以这里边我们来一个也是图像裁切确定还是看一眼它，诶然后我们来文件存储为web使用格式，看一下它大小啊，是一个什么呀，17乘以17，为什么要看这个大小啊，这个大小待会是不是就是我们那个A的大小啊，哎，它多大我们这个A就应该是多大的啊，直接我们这来存储，叫一个pointer，这叫一个什么呢？叫做一个。

挨屁股诶，这是我们激活那个，哎，激活那个传感机啊，然后还是给它整回来，整回来以后呢，然后我们来先把这个图片给它恢复到这个原状，然后我们来整一下吧，先来我们说了一共12345个超链接，那这五个超链接我们最好干嘛呀，是不是专门整一个div给它放起来啊，哎，那在这儿我们来创建一个，创建一个这个div，诶用于放置我们这个导航这个按钮啊，导航按钮或者叫图片切换一个按钮，直接来一个div，点一个point pointer pointer div啊叫pointer div，还是采用我们这么一个驼峰命名法啊驼命名法，然后pointer div里边我们需要放这么什么呀，放这么五个。

五超链接了，哎，我超链接那h rap呢，我就写一个这个井号2345，是不是一共五个超链接呀，诶超链接放置完了，但是这里边呢，你是看不出什么效果的啊，看不出什么效果的，然后在这儿我们来设置一下这个这个样式啊pointer div这里边呢，我们直接来设置我们这个导航按钮啊，设置我们这个导航这个按钮，直接来一个点一个这个pointer div，那这个div呢，我们其实不用设置，其实主要设置里边什么呀，是不是设里边那个A啊哎，我这复制一个啊来宽div里边的空格来一个什么呀，来一个A，我们要设置那个A的样式A，我们先要给它设置一个什么呀，是不是设置一个宽高啊哎，设置我们这个宽度和这个高度，直接刚才我们说了多少啊，哎，Y17HE也是一个17，诶，但是我这么写行不行啊，A是个什么元素，诶内联元素，我们是不是给它把它转换成矿元素，但是注意转换成矿元素有问题，我要把A转成矿元素，我这A是不是。

是不是竖着排了呀，而我这个A什么呀，横着排的，那所以我还得干嘛呀，我是不是还得让它浮动啊，哎，那既然让它浮动我就干嘛了，我就不如直接让它干嘛呀浮动，诶，In line block行不行，行不行，其实也行，但是会有个小问题，鼻子play，我们说过这问题，In line block，然后呢，我们来给它设置一个背景颜色，我们先看看啊，Background color，我们来一个red保存，先看效果啊，这一刷新是不是in line block也行啊，但是注意它是不是自带这个距离了，我们说为什么呀，行内元素它是不是计算空格了，哎，计算空格了，那我们说了这个距离，我们说它这个距离其实也挺好的，但是我们我们是不是想要这个距离啊，我们是不是想自己去指令啊，所以这个距离我们不想要，那你不想要怎么办呀？

诶，你得把它这边这空格给它是不是去掉啊，保存这样才没有啊，这样才能没有，但是你这玩意写完了以后，是不是特别难看了，哎，特别难看了，不好不好维护了，所以这里边呢，我们就不采用这个in line block了，我直接来什么呢？来一个这个浮动，哎直接来一个浮动float，来一个这个left，哎浮动既横着排列是不是又变成快元素，哎设置我们这个A浮动，然后保存这块一刷新走，你是不是出来了呀？哎，现在这按钮是一排，当然了，这图片我应该设置的是我们这个背景图片UR，诶，Background background，我们来一个这个URL，我们那个是。

Po啊，这个普通的也是no repeat不重复，然后我这一刷新走，你这个按钮是不是就出来了，诶按钮出来了呢，但是它这个我们看到什么呀，它这个我们现在这个按钮都是白色的，而我这个图里边第二个按钮是不是蓝色的呀？诶蓝色的那我就需要干嘛呀，诶我给第二个单独加一个什么呢？加一个class，叫一个act tiv，表示它是被激活的那个超链接，添加它以后呢，我直接来一个来一什么呢？诶点一个我们那个pointer div下边这个点这个active，我给他单独设置一个背景图片，给他设置一什么呢？设置一个to active，这样一保存再来刷新走你。是不是就变了呀，哎，就变了啊，是这个效果，然后再来我们需要做的就是什么呢？现在我这个超链接你放上去以后，它是不是没有变化呀，那我们需要我这超链接一放上去，是不是表示它也能变成，变成这样，那怎么让它变呀，是不是尾类呀，诶尾类，所以这里边我们来设置我们这个超链接的一个伪类，这都是咱们这个老东西了啊，设置我们这个超链接的伪类，设置我们这个超链接的一个po味，Hov一样po味，然后直接直接就写上了啊这诶那其实我不用再写了，其实我当时后位的时候是不是和它的样式是一样的呀，那我就不知怎么写了，逗号我们来一个什么呀，来一个选择器分组，来一个冒号，一个后位，这样是不是行了呀，这样是表示我们这两个选择，这两个元素是不是都设置的是同一个样式啊，哎，同一个样式啊，所以采用这种方式就可以了，不用再单独写了啊，然后一刷新走你一移度。

是不是就变了呀？哎，这不能动，这不能动，这什么时候动啊，这表示什么呀？这表示我当时显示的是什么啊，是第二个图片啊，是第二个图片什么时候它就没了，你点的时候它才能没啊，你点的时候是不是切换图片啊，图片切换了它才能去消失啊，才能消失，所以这个呢，并不矛盾啊，并不矛盾，好那这个按钮就给它整出来了，但是这玩意儿这这那首先位置位置我们是不是得改一下啊，首先我们来看我的每一个按钮，他们之间是不是有这么一个距离啊，哎，每一个按钮之间有一个距离，那这个距离我怎么设置呢？诶，我是不是给每一个按钮设置这么一个左外边距。

是不是就行了，诶给每一个按钮设置一个左边距，那这外边距设置多少合适，我们来大概去量一下这个距离啊，我们来看一下这个距离。四个像素是吧？哎四个像素，看这是不是四个像素啊，哎，这都是一边大的啊，我们来看这四个应该都是这样，不弄一边大了，他就他缺得了是吧？哎，都是这个四个像素啊，都是四个像素，那这样不妨呢，咱们这样我这样是不是也可以干嘛，我就直接给他来一个左外边距四个像素是不是行了，哎左边距四个像素，所以这里边我直接来一个这个什么呢？给我们这个A设置一个这个marin life，设置一个这个左哎Y编距直接来一个marin life，我们来什么呢？来一个这个四个像素，保存这一刷新走你这距离是不是就拉开了，哎拉开了以后呢，实际上现在我们这个整个这个div变成多大个了，是不是应该是从这个位置一直到一直到这儿啊，哎，就说我div的这个边界应该跟哪呢？我来把它定一下啊，选中它这个图层，这个图层，然后。

我把这线往下拖一下。完了，这选中这黑圈。上面还有一个虚的是吧，哎，刚才我截的时候有没有这虚的呀。有是吧？哎，有啊，还是比较靠谱的是吧？好，那现在我们整个div是不是应该是一个这么大个啊，哎，这么大个为什么要说这么大个，那现在这个点是不是相当于我那个div的左上角这个点呀？那接下来我们要看问题了，什么问题啊，我是要给他定位啊哎，定位我要把它是不是放到这个位置啊，哎，放把谁放到这个位置，是不是把我整个那个pointer那个div啊，哎，Div，那也就是说我要给我们那个div去开启定位，那问题就来了，这个div是不是这个pointer div啊，哎，那它是要相对定位还是绝对定位？诶那我们来说一下相对定位和绝对定位有什么区别，相对定位是不是相对于元素自身的位置进行定位啊，哎，就是说它不会脱离文档流，也就是说我是不是相对于这个位置去定位啊，那不会脱离文档流意味着什么，他这个位置是不是还站着呀？好了，那这位置还站着，那其他元素过来以后是不是只能在他下边了，那这位置我们有没有必要给他留着，没有必要，所以这其实最好用谁呀？

是不是绝定位啊，因为这个位置没有必要让它留着，所以我们这块就直接用什么呀，绝对定位啊，所以这里边我们需要给我们这个pointer div去开启一个绝对定位，开启我们这个绝对定位，直接来一个来什么呀，来一个这个position，来一个这个阿8SALUTE是不是开启定位了，但是这块开完了以后呢，注意了，那现在它相对于谁定位啊？哎，所以我这如果来一个这个TOP0，来一个这个呃，Life的零他跑哪去了？我这个刷心是不是跑上面去了，哎跑上面那这一块我们定位是不是不方便呀，我们说最好相当于谁呀，是不是相当于负元素啊副元素也就是那个班ner吧，哎，班ner，所以这里边我们需要干嘛？哎，给我们这个班ner开启一个这个相对相对定位，直接来一个什么呢？哎，来一个这个position，来一个这个LA kill保存，这回再一刷新走，你是不跑。

这来了，哎，跑这儿来了，那接下来我们就来给他定位了，定位的时候我们是不是需要往往往下移啊，那这块我们怎么去设置啊，其实这个方式有很多，你可以干嘛呀，你可以从上边定位设置一个top，再设置一什么呀，Life，但是top其实也行啊，Top也行，Top咱们就设置top，咱们这块都直接写好了，那我们来top应该多少，是不是这段距量啊，哎，那这块我直接一量，其实top呢，量是费劲一点，其实这个最省事的设置什么呀，Bottom啊，从底边量稍微短一点，但是呢，差别不大啊，高度是一个314啊314也就是我top应该是314个像素保存这一刷新是不是就下来了，诶然后还有一个left left应该是这一段，这一段是一个诶15个像素啊，Left是一个15像素，所以这来一个这个15个像素保存这一刷新走，你是不是正好在这个位置了，诶正好在位置啊好，那这个是我们说的它啊，这个是给我们这个元。

处进行定位，为我们这个导航这个点进行这个定位保存，那现在呢，我们这个哥们呢，就给它处理完了这一点是不是都没有问题了，哎，都没有问题了啊，整个这个搬凳呢，也算是给他完成了啊完成了来看看我们这块groom没问题吧，诶再看看我们这个IE全部刷新IE8 OK啊也OK，然后看我们这个IE6，哎呦。

I16这个变成方块了是吧？哎，什么问题啊，哎，说是那个PNG的问题啊，哎，但是不对，我这不解决了吗？不解决了吗？哎，我这背景是给谁设置的呀？给A设置的吧，但是我这处理A了吗？哎，我只处理div是不是还有MG了，所以最简单的来什么呀？哎，逗号来个A是不行了，一保存这回再看。一刷新不就OK了呀，没看见是吧，没看见啊，再一刷新，再一刷新。

是不是就没了，哎又出来了是吧？哎，这什么问题呢？其实这个呢是我们这个哎test的问题，这个问题其实好好处理，直接把浏览把页面啊，你别这么打开了，直接往里往里拖就没了啊，往里拖就没了啊，这是我们这个IT的问题，并不是我们说这块的问题啊，他刚才是不是显示出多一块了，感觉点这个重影了是吧？哎，重影了啊，这是我们这个IE泰的问题啊，即使真有这问题呢，我们也没没办法给它处理掉啊，这是它加载的一个问题啊好，那这一块整个这个班字我们就给它做完了，然这里边你们要注意啊，你们要写的时候，你看我写的候，我都是写一点去测一点啊，写一点就测一点，你们以后到了工作中呢，也最好保持这个状态，写一点侧一点，最怕你什么呀，你写嗨了，你要写嗨了呀，就根本停不下来是吧？诶拦也拦不住啊，咔咔咔跟那敲敲敲敲可能花费两个小时，你把这整个页面都敲完了，但是一打开留火狐哇，非常完美是吧，那这时候你。

打开chome，哎呦就打开哎E，哎，你发现是不是三个浏览器就是都不一样啊，哎，都不一样，那这回虽然你两个小时就把这页面调完了，那你可能花费两天时间去调整什么呀，兼容性问题啊，兼容性问题，所以写的时候一定要尽量干嘛呀，写一点调一点，把问题是不是尽量范围限制的越小越好啊，当你写多了，你好，你这页面里写了写了5000行代码了，结果出现兼容性问题了，你这5000行是不是都有可能出问题啊啊你得一行一行调，比较麻烦，而我现在其实只写这么几十十来行是吧？哎，你找问题的时候也好找一点啊，也好找一点，好，那这个是我们这个单子就算完成了啊，比较简单，其实。