制作一个漂亮的提示框
来源:互联网 发布:淘宝首页图片无法显示 编辑:程序博客网 时间:2024/04/27 14:41
曾经在一个项目中要求制作一个漂亮的弹出窗口,一个小箭头指向所解释的对象。今天也尝试作了一个,给有兴趣的同志们参考共同学习。
首先做一个简单的提示窗口。编写HTML代码,把所有的提示窗口内容放在一个span对象中。
这个超链接上,可以看到一个提示框
然后对其中的内容用CSS进行显示处理。
color:red;
text-decoration:none;
position:relative;
}
a.tip .popbox{
display:none;
}
a.tip:hover{
cursor:pointer;/*由于IE对hover伪对象支持不完善,设置了cursor:pointer才能正常显示*/
}
a.tip:hover .popbox{
display:block;
position:absolute;
top:15px;
left:-30px;
}
要将提示窗口放在所解释的内容边上,必须将tip设置成相对定位:position:relative;然后把span对象设置成绝对定位,position:absolute;.
一般状态下使用display:none;进行隐藏。由于IE对hover支持不够完善,必须在a:tip:hover中指定cursor:pointer。
(网站布局实录-李超 中写的是cursor:hand,确实能够正常显示,当时dreamweaver8中却没有这个属性)
display:block;
position:absolute;
top:15px;
left:-30px;
}
通过以上设置,让鼠标放在超链接上的时候显示。
接下来制作一个复杂带背景并且放了一个图片的。
要显示不规则的图形,首先要制作一个不规则的符合要求的图形作为背景,如果是带箭头的,就需要将没有图形的部分制作成透明背景(photoshop处理就好了)。
改写以下CSS代码:
display:block;
position:absolute;
top:-240px;
left:-30px;
width:226px;
height:242px;
color:#000000;
background-image:url('背景图片.gif');
background-repeat:no-repeat;
}
注意,在Dreamweaver8中插入图片的时候url('背景图片.gif')没有单引号,这在Firefox中不能够正常显示。
另外设置其重复方式为no-repeat,相对的位置根据具体要求进行设置。
修改span中的内容,添加图片的信息。
这个超链接上,可以看到一个提示框
设置图片的border,使得FireFox与IE中的显示是相同的。
最后的效果图与代码请查看
http://www.mxstdio.cn/example/poptip/index.html
- 制作一个漂亮的提示框
- 制作一个漂亮的表格
- 制作一个漂亮的表格
- IOS制作一个漂亮的登录界面
- 制作一个漂亮的 vim 状态栏
- 漂亮的提示框源代码
- 漂亮实用的提示框
- 【原创】使用blockUI制作自定义的漂亮的网页提示框(代替confirm和alert)
- 【原创】使用blockUI制作自定义的漂亮的网页提示框(代替confirm和alert)
- 使用blockUI制作自定义的漂亮的网页提示框(代替confirm和alert)
- JQuery框架中使用blockUI制作自定义的漂亮的网页提示框
- 如何制作一个漂亮网页
- 漂亮的table制作
- C# 漂亮的右下角提示框
- 漂亮的网页消息提示框<一>
- js简易漂亮的提示框
- 漂亮实用的提示框插件SweetAlert
- 漂亮实用的提示框插件SweetAlert
- sfc的基本用法
- 如何才能建立自己的BOLG
- 深度探索C++对象模型前三章 读后感
- JS中一个window.showModalDialog的应用原码
- 推荐3个在线制作LOGO、图标的网站
- 制作一个漂亮的提示框
- 凤凰涅磐
- 石家庄人才圈子成立
- 我来了
- HDTV介绍
- emf技术研究一
- BREW SDK的Media程序分析
- C#控制 “MS-SQLServer”服务 的启动与停止
- [VBA][EXCEL]插入分页符