效果图

代码

<!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>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>[资源下载]</title>
    <style type="text/css">
        #tri_box{
            width: 400px;height: 100px;border: 1px solid silver;position: relative;margin: 5px auto;border-bottom: 2px solid orange;
        }
        #tri{
            width: 0px;height: 0px;border: 6px solid white;left: 200px;bottom: -14px;margin: 0px;position: absolute;border-top-color: orange;
            /*绝对定位，元素之间的位置不会互相影响，而相对定位恰好相反，所以视情况而用。*/
        }
    </style>
</head>
<body>
    <div id="tri_box"><em id="tri"></em></div>
</body>
</html>

CSS导航指示箭头的更多相关文章

  1. css指示箭头两种实现方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  3. CSS导航菜单水平居中的多种方法

    CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...

  4. HTML5 div+css导航菜单

    HTML5 div+css导航菜单 视频 音乐 小说   故事 作品 阅读 联系

  5. Android弹出选项框及指示箭头动画选择

     Android弹出选项框及指示箭头动画选择 Android原生的Spinner提供了下拉列表选项框,但在一些流行的APP中,原生的Spinner似乎不太受待见,而通常会有下图所示的下拉列表选项框 ...

  6. css实现带箭头选项卡

    这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换.起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位.这种方法是可行的,但是因为手 ...

  7. 强烈推荐一款CSS导航菜单

    强烈推荐一款CSS导航菜单,用到政府学校类网站上超级不错,有点类似站长网菜单的味道,只不过颜色不一样而已,这种菜单还不是真正意义上的“下拉”菜单,应该叫滑出菜单吧?反正比较不错,不多说了. <! ...

  8. 使用css画一个箭头

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. [HTML/CSS]导航栏的下划线跟随效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. oracle 查詢表字段明細、字段注釋、表註釋

    查詢表字段明細 select  column_name,data_type,data_length,DATA_PRECISION ,DATA_SCALE from all_tab_columns wh ...

  2. Google Chrome浏览器调试功能介绍

    作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...

  3. Uva592 Island of Logic

      题意:神人鬼三个种族,神只说真话,鬼只说假话,人白天说真话,晚上说假话.根据对话内容区分种族和白天黑夜.  最多有A, B, C, D, E五个人 算法:枚举A, B, C, D, E的种族情况和 ...

  4. JS比较两个数值大小的正确方法

    转自:http://www.zzsky.cn/build/content/1832.htm 一般情况下: <script type="text/javsscript"> ...

  5. EF 预热

    由于EF第一次加载比较慢,所以要对EF进行一次初始化的加载,类似第一次打开网页很慢,但第二次打开都很快了的原理一样:第一次把所有静态的图片和JS缓存到本地了:当第二次打开的时候都不需要再去下载这些东西 ...

  6. 关于Spring IOC容器解释

    何谓控制反转(IoC = Inversion of Control),何谓依赖注入(DI = Dependency Injection)?之前看到过两个比喻,觉得比较形象,特在此写下: IoC,用白话 ...

  7. linux上一些命令

    ps -ef看看有没有tomcat的进程:也可以用netstat -tnl来看tomcat的端口是否开放

  8. tachyon 编译

    最新版 tachyon0.5.0 的 binary 包默认使用JDK1.6 和 hadoop 1.0.4 自己的环境是1.7 和 2.2.0,所以重新编译 1.下载源码 https://github. ...

  9. IIS 之 HTTP 错误 403.14 - Forbidden

    错误如下图所示: 其实,这个提示下面已经交代了怎么解决问题,现在告诉大家具体的详细步骤. 方法一:配置" 默认文档 " 方法二:启用" 目录浏览 "

  10. socket通信简介

    转:http://blog.csdn.net/xiaoweige207/article/details/6211577 “一切皆Socket!” 话虽些许夸张,但是事实也是,现在的网络编程几乎都是用的 ...