<!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. Core Java读书笔记之String

    Java里面的String Conceptually, Java Strings are sequences of Unicode characters. Java里面的String都是Unicode ...

  2. DNA Sorting--hdu1379

    DNA Sorting Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  3. HDU1043 Eight(BFS)

    Eight(South Central USA 1998) Time Limit:5000MS     Memory Limit:32768KB     64bit IO Format:%I64d & ...

  4. 深入理解Autofac生命周期

    为什么Autofac表现的这样? 这里似乎有几个陷阱,虽然这里只有一个------并且这个值得重申: Autofac将会跟踪每一个他所创建的可销毁的组件实例,无论这个实例是怎样被获取的. 当然,最终. ...

  5. 使用jsp生成验证码

    在开发中验证码是比较常用到有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试的方式. 此演示程序包括三个文件: 1.index.jsp:登录页面 2.image.jsp:生成 ...

  6. haproxy hdr和path

    path : string This extracts the request's URL path, which starts at the first slash and ends before ...

  7. VC中的Attach和Detach

    CWnd,CDC, Cxxx等都是MFC的类,这些类提供了很多成员函数来执行系统调用等操作,但是核心的类成员数据都是 句柄,(包括窗口句柄,DC句柄,线程句柄等).  m_hWnd  m_hDC  m ...

  8. 数组中出现次数超过一半的数字 -java

    数组中出现次数超过一半的数字 -java 方法一: 数组排序,然后中间值肯定是要查找的值. 排序最小的时间复杂度(快速排序)O(NlogN),加上遍历. 方法二: 使用散列表的方式,也就是统计每个数组 ...

  9. C#基础：事件（一） 【转】

    前面简要介绍了委托的基本知识,包括委托的概念.匿名方法.Lambda表达式等,现在讲讲与委托相关的另一个概念:事件. 事件由委托定义,因为事件的触发方(或者说发布方)并不知道事件的订阅方会用什么样的函 ...

  10. springMVC在JSP页面取map值

    在springmMVC中.jsp页面取得map值. 在controller层: Map<String, Object> map = new HashMap<String, Objec ...