非常流行的所谓的气泡窗口
所属分类:
网页制作 / CSS
阅读数:
765
收藏 0赞 0分享
普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格.
前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的).
我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制..
先下载Sweet Titles的插件(http://www.dustindiaz.com/sweet-titles).
在页面Body处插入如下:
<script type="text/javascript" src="/js/addEvent.js"></script> <!--填入正确的js文件地址-->
<script type="text/javascript" src="/js/sweetTitles.js"></script> <!--填入正确的js文件地址-->
然后在CSS文件里添加如下:
body div#toolTip { position:absolute;
z-index:1000;
width:220px; /*气泡窗口最大宽度.*/
background:#000; /*气泡窗口背景颜色.*/
border:2px double #fff; /*气泡框边缘线粗细,线的类型以及颜色.*/
text-align:left;
padding:5px;
min-height:2em;
-moz-border-radius:5px; /*FireFox专用,用来圆弧划边缘的四角.*/
}
body div#toolTip p {
margin:0;
padding:0;
color:#fff; /*说明文字颜色*/
font:11px/12px verdana,arial,sans-serif;
}
body div#toolTip p em {
display:block;
margin-top:3px;
color:#f60; /*地址文字颜色*/
font-style:normal;
font-weight:bold;
}
body div#toolTip p em span {
font-weight:bold;
color:#fff;
}
注:可以通过修改sweetTitles.js文件里的opacity参数调整气泡框的透明度.默认为80..
this.tip.style.opacity = '.80';
this.tip.style.filter = "alpha(opacity:80)";
css实现的让图片垂直居中的方法
图片的宽度和高度是未知的,没有一个固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中,想想感觉还是挺麻烦的,由于最近的项目可能会用到这个方案,所以把一些常用的方法都收集整理了一下。
收藏 0赞 0分享
3个比较有用的网页制作技巧
我们在进行DivCSS布局的时候,非常关注CSS技巧的学习,今天向大家推荐3个所谓的 “顶级”CSS技巧!虽然没有什么新意,但对新手而言却非常重要!
收藏 0赞 0分享
display:inline的用法
和 display:inline 对应的是 display:block,block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素,例如 SPAN 是行内显示的,但是你加了 display:block 属性就不一样了
收藏 0赞 0分享
css样式实现整个页面背景使用一张图片
最近一直被css背景困扰,因为是仿站,别人网站背景图片无论怎样另存,都是相同文件名,打开一看,整个网站的各个角落背景图片都在一个文件中分布,于是上网搜集资料,发现使用这种方法的网站很多,源自于雅虎最早。
收藏 0赞 0分享
关于CSS样式表文件组织形式的整理
以下引用网络上的一篇文章,不知道作者是谁了,总体上概括的不错,但是在实际应用当中还是要根据项目情况来具体实施比较好。
收藏 0赞 0分享
查看更多