div带箭头提示框实例

web前端 同时被 2 个专栏收录
440 篇文章 2 订阅
245 篇文章 2 订阅

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>div带箭头提示框实例</title>
    <style type="text/css">
        .info {
            margin-top: 50px;
            position:relative;
            width:200px;
            height:50px;
            line-height:50px;
            background:#F6F1B3;
            box-shadow:1px 2px 3px #E9D985;
            border:1px solid #DACE7C;
            border-radius:4px;
            text-align:center;
            color:red;
        }
        .nav {
            position:absolute;
            left:30px;
            overflow:hidden;
            width:0;
            height:0;
            border-width:10px;
            border-style:solid dashed dashed dashed;
        }
        .nav-border {
            top:-20px;
            border-color:transparent transparent #DACE7C transparent;
        }
        .nav-background {
            top:-19px;
            border-color:transparent transparent #F6F1B3 transparent;
        }

        .nav2 {
            position:absolute;
            top:-8px;
            left:30px;
            overflow:hidden;
            width:13px;
            height:13px;
            background:#F6F1B3;
            border-left:1px solid #DACE7C;
            border-top:1px solid #DACE7C;
            -webkit-transform:rotate(45deg);
            -moz-transform:rotate(45deg);
            -o-transform:rotate(45deg);
            transform:rotate(45deg);
        }

        .nav3 {
            position:absolute;
            left:30px;
            overflow:hidden;
            width:24px;
            height:24px;
            font:normal 24px "微软雅黑";
        }
        .nav-border3 {
            top:-17px;
            color:#DACE7C;
        }
        .nav-background3 {
            top:-16px;
            color:#F6F1B3;
        }        
    </style>
</head>  
<body>
<div class="info">
    <span>通过border</span>
    <div class="nav nav-border"></div>
    <div class="nav nav-background"></div>
</div>

<div class="info">
    <span>通过transform</span>
    <div class="nav2"></div>
</div>

<div class="info">
    <span>通过♦</span>
    <div class="nav3 nav-border3">♦</div>
    <div class="nav3 nav-background3">♦</div>
</div>
</body>  
</html>  


备注:欢迎加入web前端求职招聘qq群:668352707

  • 1
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

一、J Query实例大全 1)AjaxJavaScript资源 1.JS+CSS仿腾讯QQ首页搜索框无刷新换肤效果代码 2.js+css简单后台二级树形菜单demo示例 3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越火线游戏网 8.JS经典3款风格QQ客服在线浮动右侧与左侧代码 9.JS精简网页音乐播放器 浮动在页面顶部像工具栏 10.超强JS网页版泡泡龙游戏下载 11.兼容各浏览器JS+CSS水平和垂直无缝图片滚动效果代码 12.漂亮暖色调js+flash平滑过渡大屏图片切换的广告代码 13.实用国外JS内容选项卡DEMO下载 14.推荐通用文字图片JS不间断滚动封装类 代替Marquee 15.站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2.jQuery层拖拽插件之jquery仿QQ空间的模块拖动功能插件下载 3.jQuery动感图标切换网页Tab选项卡导航代码 4.jquery封装Tab标签选项卡,内含动画版选项卡及滑动门 5.jQuery实现flash动感切换选项卡TAB插件示例 6.jquery制作自动播放的TAB切换特效 7.基于jQuery简单的Tab滑动门菜单代码(jQuery MoveTab) 8.简单jquery选项卡插件下载(支持鼠标移上切换、点击切换、Ajax方式切换等) 9.漂亮Tab插件之jQuery自动切换轮播Tab选项卡示例代码 10.实用jquery+CSS实现流畅tab切换效果(Coda-Slider 1.1.1)插件 11.实用jquery标签Tab插件下载可切换不同的颜色 12.推荐jquery仿淘宝网商品排行榜展示切换效果,适合电子商务网站使用 13.一款jQuery黑金钢动感Tab选项卡代码 14.站长推荐jQuery动画翻转选项卡(flip风格) 3)表单验证 1.jquery+css美化select下拉菜单插件(Stylish Select v0.3)下载 2.jQuery+CSS实现多项选择文本框的插件下载 3.jQuery表单验证插件EasyValidator 2.0TIP提示效果 4.jQuery导航插件下载之支持三级的Menu暖色、动画、折叠功能的导航菜单 5.jquery美化CheckBox的插件下载 6.jQuery美化表单漂亮插件jqtransform下载 7.jquery强大表单字符输入限制插件jQuery AlphaNumeric下载 8.jQuery实现表格排序功能的源码 9.jquery实现动感隐藏登录入口代码 10.jQuery限制input或texteara字符输入限制字数控制插件下载 11.jQuery支持三级菜单的超酷华丽炫彩动感多级渐显菜单下载 12.jQuery制作登录按钮实现Ajax状态提示 13.jvalidate无刷新表单验证插件示例下载 14.分享jquery无刷新多功能表单验证插件并漂亮美化表单及错误输入提示效果 15.简单jQuery+CSS实现验证表单红色提示效果 16.简单表单input输入框提示插件1.0下载 17.另种效果的jQuery EasyValidator表单验证插件demo示例下载 18.漂亮绿色多级动感仿flash效果的jquery网站导航菜单 19.实用jQuery列表多项选择插件 20.实用jquery实现鼠标滚轮控制改变文本框数字的插件 21.实用jquery使用ul模拟表单select列表效果 22.实用jQuery无限级导航菜单源码下载 23.适合于网站注册的jQuery用户注册条款插件下载(特效) 24.提升用户体验jquery Ajax表单输入检测验证示例代码 25.推荐jQuery美化Select下拉单选框模拟插件V1.3.6版本下载 26.推荐jQuery美化select下拉框样式漂亮效果 27.下载jQuery网页表单美化修饰插件(jQtran
<head> <title>纯CSS无图片箭头DIV方框</title> <style> div.container{position:absolute; top:30px; left:40px; font-size: 9pt; display:block; height:100px; width:200px; background-color:transparent; *border:1px solid #666; } s{ position:absolute; top:-20px; *top:-22px; left:20px; display:block; height:0; width:0; font-size: 0; line-height: 0; border-color:transparent transparent #666 transparent; border-style:dashed dashed solid dashed; border-width:10px; } i{position:absolute; top:-9px; *top:-9px; left:-10px; display:block; height:0; width:0; font-size: 0; line-height: 0; border-color:transparent transparent #fff transparent; border-style:dashed dashed solid dashed; border-width:10px; } .content{ border:1px solid #666; -moz-border-radius:3px; -webkit-border-radius:3px; position:absolute; background-color:#fff; width:100%; height:100%; padding:5px; *top:-2px; *border-top:1px solid #666; *border-top:1px solid #666; *border-left:none; *border-right:none; *height:102px; box-shadow: 3px 3px 4px #999; -moz-box-shadow: 3px 3px 4px #999; -webkit-box-shadow: 3px 3px 4px #999; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#999999'); /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; } </style> </head> <body> <div class="container"> <div class="content"><br>这是框中的文字,可动态显示。高度自动增加,应该不错吧^_^<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <s> <i></i> </s> </div> <br /> </body> </html>
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值