1、首先在netbenas建立一个html文件。
2、引入css文件。
3、html文件增加一个显示图片层。
4、在1.css文件中增加代码。
5、看看浏览器图片层效果。
6、层里面加一个图片。
7、在win10下调用自带的3d画图软件。
8、在win10下画图3d软件新建一个画布,画一个画布是184x149尺寸。
9、win10自带的3d软件画一个矩形。
10、导出png文件格式。
11、在netbeanshtml代码中增加绑带div。
纯css的话,会用到:hover 伪类
把上面的css和html代码,放到你页面里试试
在首页这个容器的里面再建一个容器比如img标签。
首先我们设置这个img为不显示,,这样我们鼠标没有移动上去的时候就是不显示的,,代码是
.menu imag{display:none;}
为了实现鼠标移动上去的时候显示,,就要用到一个伪类:hover
当鼠标滑过首页(menu)的时候img显示出来,代码就是
.menu:hover img{display:block;}
原则上到这一步的时候就完成了,但是一般来说需要把图片显示到这个首页的下方,那么还需要对这个img进行定位,一般采用position: absolute来定位,,然后相对.menu进行适当的偏移
完整的代码实例
.menu {