作者|李娜

*本文为「Java联盟」原创内容，转载无需授权，请保留署名来源。

hello，小伙伴们，勤劳的娜姐又来给大家分享知识了，今天给大家分享的呢就是制作一个圆型的像是窗口，来介绍我们的人物。

这是效果图。

这是鼠标划上图片后的效果图

（找不到把鼠标贴上图片的方法，只好暂时这样了！！）

那小伙伴们对这个效果感觉如何呢！

先分析

想要制作上面的显示效果，首先我们要有一张图片，小伙伴们可以自己准备自己喜欢的图案。

小编就直接用这个图片了。

那么之后我们新建页面，就可以开始制作了。

首先分析这个效果，简单来说就是建立两个盒子，

然后让我们的鼠标滑动到图片区域的时候显示文字的这么一个效果。

（怎么样是不是很明了啊！）

写页面

小编决定用ul标签来写这个页面，先建好页面然后。

把我们的ul标签的内容写出来

这就是我们鼠标滑过图片是显示的内容，

剩下的就交给我们的样式来做了。

记住这个效果，在我们完成代码之后他将重获新生。（得意ing）

首先进行页面的初始化

把游览器默认格式以及ul标签的默认格式去掉。

给body一个背景颜色。然后我们利用类选择器给ul设置属性宽、高、外边距、形状以及背景图片等等。

效果如下：

已经很有样子了，然后在设置li标签中的字体样式。

效果贴图如下：

怎么样是不是和我们的效果题一样呢？

如果你以为这样就完成了！

最后一步，为我们的 li 标签设置样式让他可以响应鼠标的动作这才是ok的！

这才是完整的程序代码！！！

小伙伴们可以自己试试哦！

知识点总结

知识点1：

这个就是我们用来画圆角的属性：

border-radius:50%;

我们可以给这个属性赋值的一些情况：

四个值： 左上    右上    右下    左下

三个值： 左上    右上左下    右下

两个值： 左上右下    右上左下

一个值： 所有角一样的值

知识点2：

背景图片的大小  等比例缩放至边框

background-size:cover;

知识点3：

:hover

此选择器用于选择鼠标指针浮动在上面的元素。

也就是我们的效果显示的鼠标滑过图层显示。

全部代码奉上：

好嘞！今天的知识点就分享到这里，娜姐会继续努力分享更多好玩的，有意思的知识点给大家哦！

当然有什么问题或者需要李娜我给大家分享讲解的地方，可以在留言区留言告诉我，整理后会在公众号里面分享讲解哦！

有疑问？请留言！关注Java联盟微信公众号，看Java要闻！