<!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. 设计模式之桥接模式(Bridge)--结构模型

    1.意图 将抽象部分与它的实现部分分离,使它们可以独立地变化. 2.适用性 你不希望在抽象和它的实现部分之间有一个固定的绑定关系. 类的抽象与它的实现都应该可以通过子类的方式加以扩展. 抽象部分与实现 ...

  2. js禁止中文输入 最简洁的【禁止输入中文】

    方法一:禁止中文输入法 <input type="text"  > 方法二:禁止黏贴,禁止拖拽,禁止中文输入法! 这种方法是最强的禁止 中文输入 <input t ...

  3. 常量 - PHP手册笔记

    常量语法 常量在脚本执行期间其值不能改变.常量大小写敏感,传统上常量标识符总是大写.常量一旦定义就不能被重新定义或取消定义,常量的值只能是标量. 可以用define()函数来定义常量,也可以使用con ...

  4. 浅析 JavaScript 的函数节流和去抖

    现代网页的实现上,会有很多交互上的优化,比如常见的 滚动加载 ,输入联想 等等.他们的实现思路很简单,以滚动加载而言,无非就是去是增加一个滚动的事件监听,每次滚动判断当前的元素是否已经滚动到了用户的可 ...

  5. gl.TexSubImage2D 使用遇到图片翻转的问题

    这2天在用gl.TexSubImage2D把几张小图转拼接成大图,如果在渲染物体之前拼接好就没有问题,但在开始渲染物体后拼接就会有问题.后来我做了2件事情来找原因, 1. 用拼好的图来画一个正方形,大 ...

  6. Java报表开发组件DynamicReports

    DynamicReports 是一个基于 JasperReports 进行扩展的 Java 报表库,可用它来快速创建报表而无需可视化报表设计工具. From :  http://www.oschina ...

  7. uva 10382 Watering Grass_贪心

    题意:给你个矩形n*m,再给你n个圆的圆心坐标和半径,问最用最少用几个圆把这个矩形覆盖 思路:直接想发现这问题不容易,后来发现可以把圆看做区间(能把矩形面积覆盖),然后这个问题就容易解决了 #incl ...

  8. 【男性身材计算】胸围=身高*0.48(如：身高175cm的标准胸围=175cm*0.61=84cm)；腰围=身高*0.47(如：身高175c… - 李峥 - 价值中国网

    [男性身材计算]胸围=身高*0.48(如:身高175cm的标准胸围=175cm*0.61=84cm):腰围=身高*0.47(如:身高175c- - 李峥 - 价值中国网 李峥:[男性身材计算]胸围=身 ...

  9. nyoj 325 zb的生日（dfs）

    描述今天是阴历七月初五,acm队员zb的生日.zb正在和C小加.never在武汉集训.他想给这两位兄弟买点什么庆祝生日,经过调查,zb发现C小加和never都很喜欢吃西瓜,而且一吃就是一堆的那种,zb ...

  10. poj 2393 Yogurt factory（dp+贪心）

    奶牛们建了一家酸奶厂,在N周内每周需要出货Y_i单位酸奶,第i周成本为C_i,储存费为每周S.求总体最低成本. 贪心策略是维持每周的最低单位成本,每周可能用上周剩下的,也可能生产新的.于是该周单位成本 ...