多语言展示
当前在线:530今日阅读:159今日分享:18

css如何制作带三角的提示框

css如何制作带三角的提示框
工具/原料

dreamweaver cs6

方法/步骤
1

新建html文件,创建div编写提示框内容

2

定义大盒子的样式

3

定义提示框内容的样式

4

效果如图黑色圆角矩形中显示白色文字,现在差一个小三角,就可以组成完整的提示框了

5

定义小三角的样式,用的是border的边框属性来制作的

6

效果如图,完整的提示框就做好了,如何让鼠标滑过才显示呢、

7

先隐藏提示框,创建鼠标滑过显示提示框,代码如图

8

默认显示状态,鼠标没有滑过之前

9

鼠标划过时显示提示框如图

推荐信息