<!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 上传库到Binary的操作

    第一次,按照网上教程配置需要的配置文件,上传成功 1.0版本. 以后更新的时候 输入 : install ,执行task 然后再输入:bintrayUpload ,执行task,看下面控制台输出信息, ...

  2. VLC客户端和SDK的简单应用

    VLC_SDK编程指南 VLC 是一款自由.开源的跨平台多媒体播放器及框架,可播放大多数多媒体文件,以及 DVD.音频 CD.VCD 及各类流媒体协议.它可以支持目前市面上大多数的视频解码,除了Rea ...

  3. django接收和发送json数据

    通过json.jumps处理字典数据, 发送给前端 def get_context_data(self, **kwargs): ctx = super(HelpUpdateView, self).ge ...

  4. 变态最大值（nyoj）

    变态最大值 描述 Yougth讲课的时候考察了一下求三个数最大值这个问题,没想到大家掌握的这么烂,幸好在他的帮助下大家算是解决了这个问题,但是问题又来了. 他想在一组数中找一个数,这个数可以不是这组数 ...

  5. Vue.js实现拼图游戏

    Vue.js实现拼图游戏 之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/ ...

  6. python连接redis文档001

    Installation redis-py requires a running Redis server. See Redis’s quickstart for installation instr ...

  7. struts2配置文件struts.xml的简介

    本文在于总结,深入研究有别人写的很好了,也没必要再去写,将在本文后面附上他们的文章地址: 一.struts2的执行过程: 二.struts2的配置文件struts.xml 下面是其三大部分includ ...

  8. chart

    var pieChart = { width: 600, height: 400, series: [], unit: "kg", chartCanvas: null, selec ...

  9. COB Epoxy灌膠時氣泡產生的原因與解決方法

    COB的黑膠 (Epoxy)有氣泡通常是不被允許的,因為外部氣孔不但會影響到外觀,內部氣孔更有可能會破壞 Wire bonding 的鋁線穩定度.既使在COB製程剛完成的時候沒有通過功能測試,也不代表 ...

  10. 关于SubclassWindow()和SubclassDlgItem

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