<!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. Android 贝塞尔曲线

    博客图片备份位置:

  2. codeforces 518A. Vitaly and Strings

    A. Vitaly and Strings time limit per test 1 second memory limit per test 256 megabytes input standar ...

  3. JS 禁止浏览器右键菜单和刷新

    <script language="javascript"> //禁止按键F5 document.onkeydown = function(e){ e = window ...

  4. NODE.JS安装配置

  5. cocos2d-x 学习笔记一（概述）

    1.游戏-可控制的动画-连续的静态图像 2.关键帧驱动游戏 3.事件驱动型游戏 4.cocos2d-x 1.0 opengl-es 1.0;cocos2d-x 2.x opengl-es 2.0;co ...

  6. poj 3255 求次大最短路

    Roadblocks Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 5508   Accepted: 2088 Descri ...

  7. ASP.NET获取IP的6种方法 【转】

    ).ToString();//方法四(无视代理)HttpContext.Current.Request.ServerVariables["HTTP_X_FORWARDED_FOR" ...

  8. 移动web开发前准备知识了解（html5、jquery）笔记

    1.经常使用 插件工具  chrome插件:   Mobile & Tablet Emulator(用于常见移动端适配):(重点) Mobile Emulator is an useful o ...

  9. PHP高级特性基础

    php对象在内存中的区域:php对象名和对象存放的位置是不一样的,这一点和java是一模一样的,所以在php面向对象部分你完全可以套用java的思想去做.对象存放在堆区(heap)而对象名则和其他普通 ...

  10. mysql 主从不同步处理--数据库初始化

    问题处理借鉴至网上的内容 又一次做主从,全然同步 在主库新建一张表后.在slave 段发现数据没有同步过去. mysql version:5.6.10 os :rhel 5.6 解决过程例如以下: 1 ...