Display灵活使用

    display是css中的一个属性display：inline;能使段落生出行内框，我们经常会用到display：inline-block使标签变成行内块级元素…下面我用了display：none样式和display：block样式去完成一个案例，在这里display起主要作用。

首先我们看一下要完成的任务，就是每当我的指针移动的上面的框里面，对应的标签就会显示出我需要看到的内容，完成这一系列的动画效果

从这里我们会想如何实现这个效果，看着是一个很简单的动画效果，如果做起来呢！那也是非常简单的，首先我们会使用到HTML代码和css样式完成布局，再通过JS绑定事件来完成这个效果，在这里我们刚开始的时候是没有头绪的，但是呢我们刚开始接触的时候不要觉得什么都不会，只要咱们从最简单的开始慢慢了解，深入到里面去就在这会你会发现其实它难在哪里，简单在哪里，都是自己去找到对应的方法，然后哎原来只需要引用到这个方法问题就解决了。

首先我们从外面边框开始搭建框架通过设置宽度、高度、边框样式从实现一个框架样式这是最简单的起步，给每一行打上标签，标题字体的大小可以用到h1-h5、字体颜色color来完成第一张图片的搭建。

接下来就是当我添加其显示的内容时让标签和内容不冲突我创建了几个不同的标签使1、狙击手和内容分开，然后再用了一个div包裹起来这样才能确保你要完成这个效果在哪里实现，相当于固定显示位置

我们要做到的当指针移动到标签时，下面的图片和内容就会显示出来，所以把他们绑在同一个div上面方便我们继续后续工作。

从图中我们可以看到有两个p标签这是为什么？因为有一个p标签被嵌套图片在当中了，所以才会有两个p标签。

而我选择的是直接使用背景图片来作为显示，使它们相互配合使用，round属性能图片实现自动放大适应当前最大长度大小。

在这里它们的页面布局基本上完成了。

接下来我们要做的是给它们一个绑定事件，这就会用到我们的JS

首先我们开头可以直接使用内联JS、内联样式可以帮我们直接解决很多问题，更为简洁方便，

直接在body标签末尾前加入script标签就可以在里面直接应用JS代码。

上面就是所用到的JS代码，

首先开头是window.οnlοad=function(){}这个是简单的页面加载函数，意思就是说当你打开这个网页的时候它就执行里面的函数。

在这里我直接用document.getElementById(“”)获取标签的id名称后面紧跟着的.getElementsByTagName(“”)这里的意思获取标签的原名称，通过“.”连起来从图片中的理解就是通过一个id“xz”获取到它里面的子节点标签，这里是获取div标签。

在这里应用到For循环函数目的是为了方便我们选择到不同的标签时，哪一个标签就会响应函数。

xz[i]表示的正是可以选择到id为”xz”的子节点。

onmouseover方法表示当指针移动到这里的时候便执行这里的函数。

onmouseout方法表示指针移出这里的时候便执行这里的函数。

在这里的this表示id”xz”,querySelector(“”).style.display=””这个方法是获取到id”xz”的子节点p标签通过style样式改变display属性。

大概的意思就是当我指针移动到那个标签的地方时便执行标签响应函数，而这里是通过标签响应函数

通过改变display属性从而改变的效果。

所以说display的灵活使用能让我们简单地完成一些效果。