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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>锚点位置偏移</title>

    <style type="text/css">

        body

        {

        }

        div

        {

            background-color: #fff;

            position: relative;

        }

        .text

        {

            width: 50%;

            height: 100px;

            margin: 10px;

            border-radius: 5px;

            border: 1px solid #f00;

            background-color: #ccc;

        }

        .arrowTip

        {

            border: 5px solid #ccc;

            border-color: transparent transparent #ccc transparent;

            width: 0px;

            line-height: 0px;

            height: 0px;

            position: absolute;

            display: block;

        }

        .top

        {

            left: 40px;

            top: -10px;

            border-color: transparent transparent #ccc transparent;

        }

        .left

        {

            border-color: transparent #ccc transparent transparent;

            left: 0px;

            top: 30px;

        }

        .right

        {

            border-color: transparent transparent transparent #ccc;

            left: 50%;

            top: 30px;

            margin-left: 12px;

        }

        .bottom

        {

            border-color: #ccc transparent transparent transparent;

            left: 50px;

            bottom: -10px;

        }

        .clear

        {

            clear: both;

        }

    </style>

</head>

<body>

    <div>

        <span class="arrowTip top"></span>

        <div class="text">top  底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div>

    </div>

    <div class="clear"></div>

    <div>

        <span class="arrowTip left"></span>

        <div class="text">left  底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div>

    </div>

    <div class="clear"></div>

    <div>

        <span class="arrowTip right"></span>

        <div class="text">right  底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div>

    </div>

    <div>

        <span class="arrowTip bottom"></span>

        <div class="text">bottom  底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div>

    </div>

</body>

</html>

arrowTip 提示的更多相关文章

  1. iPhone Anywehre虚拟定位提示“后台服务未启动，请重新安装应用后使用”的解决方法

    问题描述: iPhone越狱了,之后在Cydia中安装Anywhere虚拟定位,但是打开app提示:后台服务未启动,请重新安装应用后使用. 程序无法正常使用... 解决方法: 打开Cydia-已安装, ...

  2. jsp中出现onclick函数提示Cannot return from outside a function or method

    在使用Myeclipse10部署完项目后,原先不出错的项目,会有红色的叉叉,JSP页面会提示onclick函数错误 Cannot return from outside a function or m ...

  3. 【SQLServer】【恢复挂起的解决方案】附加文件时候的提示“无法重新生成日志，原因是数据库关闭时存在打开的事务/用户，该数据库没有检查点或者该数据库是只读的。 ”【数据库恢复】

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 先贴错误: 吐槽一下: 进入正题: 新建一个同名数据库 停止MSSQL服务 替换数据库文 ...

  4. SQLServer执行命令出现“目录无效的提示”

    异常处理汇总-数据库系列  http://www.cnblogs.com/dunitian/p/4522990.html 一般都是清理垃圾清理过头了,把不该删的目录删了 网上说法: 问题描述: 1.s ...

  5. 利用CSS中的:after、: before制作的边三角提示框

    小颖昨天分享了一篇参考bootstrap中的popover.js的css画消息弹框今天给大家再分享一篇使用:before和:after伪元素画消息弹框的CSS. 画出来是介个酱紫的: 有没有觉得画的萌 ...

  6. TypeScript Vs2013 下提示Can not compile modules unless '--module' flag is provided

    VS在开发TypeScript程序时候,如果import了模块有的时候会有如下提示: 这种情况下,只需要对当前TypeScript项目生成设置为AMD规范即可!

  7. 当web.config文件放置在共享目录下（UNC），启动IIS会提示有错误信息500.19，伴随有错误代码0x80070003和错误代码0x80070005的解决办法

    最近遇到一个很有意思的使用环境,操作人员将所有的网站应用内容投放到共享存储里面,并且使用微软的SMB协议将其以CIFS的方式共享出来,使用Windows Server 2008 R2的IIS将其连接起 ...

  8. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  9. Win10提示没有权限使用网络资源问题解决

    借鉴链接:http://www.cr173.com/html/67361_1.html Win10提示没有权限使用网络资源解决方法 1.打开控制面板; 2.在所有控制面板项中找到凭据管理器; 3.添加 ...

随机推荐

  1. study notes: high performance linux server programming

    1:linux网络API分为:socker地址API,socker基础API,网络信息API 1,socker地址API:包含IP地址和端口(ip, port).表示TCP通信的一端. 2,socke ...

  2. arm str 指令

    str 指令格式: str{条件} 1源寄存器 ,2存储器地址 eg: str r0,[r1],#8;将r0中的数值赋值给r1,然后在r1地址上+立即数8,再写入r1中: str r0,[r1,#8] ...

  3. opals 开发记录

    1:开发需要的文件 下载地址:http://www.geo.tuwien.ac.at/opals/html/index.html 注意只能在release下才能通过. 我自己整理好的(64位的),以备 ...

  4. mysql用root用户启动后其他用户无法启动不问题

    问题描述:用root账户启动mysql后,在用mysql用户或其他非root账户启动不了mysql问题解决:通过看mysql的err日志,发现 Failed to open log (robert-b ...

  5. PowerDesigner中NAME和COMMENT的互相转换,需要执行语句

    原文: http://www.cnblogs.com/xnxylf/p/3288718.html 由于PDM 的表中 Name 会默认=Code 所以很不方便, 所以需要将 StereoType 显示 ...

  6. JSON.parse()和JSON.stringify()的用法

    JSON.parse()是用于从一个字符串中解析出json对象,如下所示 var str = '{"name":"flsummer","age&quo ...

  7. U盘开发之SSD对比

    U盘因其小巧方便,逐步取代了笨重的移动硬盘和光驱,成为最普及的存储介质.现在的主板BIOS也将支持USB启动,作为标准之一,再过几年,光驱时代可能就要终结了.从早期的16MU盘,到现在动辄几个G,U盘 ...

  8. zabbix 模版其实就是主机

    </pre><pre name="code" class="python">mysql> select hostid,host , ...

  9. 关于SubclassWindow()和SubclassDlgItem

    msdn上的解析 CWnd::SubclassWindowBOOL SubclassWindow( HWND hWnd ); Return Value Nonzero if the function ...

  10. retire

    retire 本来抱着进队的决心迎战,结果在第一试就失利,是能力不足,还是命中注定我不是竞赛的料,一切关于OI的事随着GDOI2016的闭幕而消散-- 今后也许再也不搞OI了,或许会玩一下ACM,现在 ...