CSS常用浮出层的写法

时间:2021-10-22 20:23:02

CSS常用浮出层的写法

点此查看实例展示

是的,我们即将实现的就是以上功能,是不是很生动?

贴上HTML:

<div class="poptip">
<span class="poptip-arrow poptip-arrow-top"><em>◆</em><i>◆</i></span>
<span class="poptip-arrow poptip-arrow-right"><em>◆</em><i>◆</i></span>
<span class="poptip-arrow poptip-arrow-bottom"><em>◆</em><i>◆</i></span>
<span class="poptip-arrow poptip-arrow-left"><em>◆</em><i>◆</i></span>
Hi,知道吗? <br>大前端D7主题很快就疯抢了!
</div>

以上HTML构成了一个浮出层和四个方向的尖角,其实你只需要其中的一个span标签,所以真正用上的代码并没那么多。

贴上CSS:

/* poptip */
.poptip{position: absolute;top: 20px;left:20px;padding: 6px 10px 5px;*padding: 7px 10px 4px;line-height: 16px;color: #DB7C22;font-size: 12px;background-color: #FFFCEF;border: solid 1px #FFBB76;border-radius: 2px;box-shadow: 0 0 3px #ddd;}
.poptip-arrow{position: absolute;overflow: hidden;font-style: normal;font-family: simsun;font-size: 12px;text-shadow:0 0 2px #ccc;} .poptip-arrow em,.poptip-arrow i{position: absolute;left:0;top:0;font-style: normal;}
.poptip-arrow em{color: #FFBB76;}
.poptip-arrow i{color: #FFFCEF;text-shadow:none;} .poptip-arrow-top,.poptip-arrow-bottom{height: 6px;width: 12px;left:12px;margin-left:-6px;}
.poptip-arrow-left,.poptip-arrow-right{height: 12px;width: 6px;top: 12px;margin-top:-6px;} .poptip-arrow-top{top: -6px;}
.poptip-arrow-top em{top: -1px;}
.poptip-arrow-top i{top: 0px;} .poptip-arrow-bottom{bottom: -6px;}
.poptip-arrow-bottom em{top: -8px;}
.poptip-arrow-bottom i{top: -9px;} .poptip-arrow-left{left:-6px;}
.poptip-arrow-left em{left:1px;}
.poptip-arrow-left i{left:2px;} .poptip-arrow-right{right:-6px;}
.poptip-arrow-right em{left:-6px;}
.poptip-arrow-right i{left:-7px;}

这段CSS写的已经很简练了,所以不要嫌多,因为它具有很强的扩展性。

如果你希望尖角居中显示,可以在.poptip-arrow这个span上加上style="left:50%"或者style="top:50%"

这个代码兼容IE6-10、Chrome、Firefox等基本上所有主流浏览器,所以不必担心其兼容性和实用性。据悉,支付宝等站点采用的也是此方式。

当然,不排除还有更好的实现方式,如你知道,请留言告诉大家,谢谢!

CSS常用浮出层的写法的更多相关文章

  1. 浮出层的css写法,完美兼容IE6~10

    利用元素间的绝对定位差一像素,使用不同颜色做出浮出层小三角的效果,完美兼容各浏览器! html部分: <div class="poptip"> <span cla ...

  2. 任务三十七:UI组件之浮出层

    任务三十七:UI组件之浮出层 面向人群: 有一定JavaScript基础 难度: 低 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量 ...

  3. DIV JS CSS 轻量级弹出层 兼容各浏览器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. html&sol;css&sol;js-layer弹出层的初次使用

    学习前端有时很多时候要用到弹出层,原生的js写有些麻烦,而且不美观,基于jQuery的弹出层组件layer应运而生,近些年来备受青睐.官网上有使用教程,但当初用的时候还是糊里糊涂,今天来记录一下lay ...

  5. js弹出层的写法实例

    点击后弹出界面,通过判断浏览器长宽自动设定页面宽度和登陆页面位置. <style> /*遮罩层 弹出层*/ .mask { width: 100%; background-color: r ...

  6. &lbrack;深入浅出WP8&period;1&lpar;Runtime&rpar;&rsqb;浮出控件(Flyout)

    4.15 浮出控件(Flyout) 浮出控件(Flyout)是一个轻型的辅助型的弹出控件,通常会作为提示或者要求用户进行相关的交互来使用.Flyout控件与Windows Phone里面的弹出框Mes ...

  7. jquery 简单弹出层&lpar;转&rpar;

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

  8. 使用Jq实现弹出层

    对于前端程序员来说,弹出层是经常用到的,下面我叫大家如何用实现JQuery实现弹出层的效果,代码如下: CSS:弹出层的效果 .mask { position: absolute; top: 0px; ...

  9. 网站开发常用jQuery插件总结&lpar;二)弹出层插件Lightbox&lowbar;me

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...

随机推荐

  1. AngularJS基础知识2

    一.angularJS双向数据绑定 利用双向数据绑定,不仅能把数据模型的变化同步到视图上面,还可以利用双向数据绑定的特性来做一些样式上面的控制. 双向数据绑定用处很多,不仅仅是像知识点1中的那个例子, ...

  2. 《JavaScript权威指南》学习笔记 第五天 window对象的方法。

    前天和昨天大致浏览了犀牛书的函数.类与模块.正则表达式.JavaScript扩展.以及服务端的js.这些方面对于我目前的水平来说比较难,一些最基本的概念都不能领会.不过最复杂的知识占用平时使用的20% ...

  3. Behavior Trees

    https://en.wikipedia.org/wiki/Behavior_Trees_(artificial_intelligence,_robotics_and_control) http:// ...

  4. Javascript高级程序设计——javascript简介

    1.Javascript简史 javascript诞生于1995年,是由网景公司的Brendan Eich开发的,最初的目的是在客户端处理一些输入验证操作,自此后成为常见浏览器的特色功能,如今用途已经 ...

  5. Linq查询非泛型集合要指定Student类型(比如List)

    #region Linq to 集合查询非泛型集合要指定Student类型            //ArrayList list = new ArrayList();            //li ...

  6. SQL分布式查询、跨数据库查询

    --[方法1]连接服务器方法 --step1 创建链接服务器  exec sp_addlinkedserver     'srv_lnk','','SQLOLEDB', 'ip地址'  exec sp ...

  7. 20&period; Valid Parentheses(stack)

    Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...

  8. &lbrack;Linux&rsqb; rlwrap - 解决Linux下sqlplus退格、上翻键乱码问题

    在Linux下使用sqlplus你会发现:退格键无法正常使用(乱码),上翻键也无法正常显示历史功能,非常讨厌! 为了让退格键和上翻键在sqlplus里正常发挥它的作用,我们必须安装一个软件 - rlw ...

  9. error -27257&colon; Pending web&lowbar;reg&lowbar;save&lowbar;param&sol;reg&lowbar;find&sol;create&lowbar;html&lowbar;param&lbrack;&lowbar;ex&rsqb; request&lpar;s&rpar; detected and reset at the end of iteration number 1

    检查点函数  web_reg_find("Search=body",     "savecount=num",     "Text=test1&quo ...

  10. stl&comma; string不仅是charString&comma; 更是byteString

     转载至:http://chzhou.blog.sohu.com/97459512.html 以前一直没有注意到STL中的string的length函数,但一直用它.天真的以为它会返回字符串的长度 ...