文档章节

特殊对话框

liangxiao
 liangxiao
发布于 2014/05/29 11:20
字数 228
阅读 24
收藏 0
点赞 0
评论 0

1、效果1

这样一种效果是怎么样实现的呢?

其实它是三个框的组合:1、一个大的对话框  2、一个跟边框同样颜色的三角形 3、一个跟背景色一样的三角形

对话框相对定位,对话框里面的三角形1 绝对定位到对话框的边缘,三角形2定位到相同位置,简单错开一点就好了。


ps:后面有空再详细的说一下,供入门学习用的

附带吗一份

<html>
<body>
<style>
.test{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative;}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{
    border-width:20px; 
    border-style:solid dashed dashed; 
    border-color:#beceeb transparent transparent; 
    left:80px; 
    bottom:-40px;
}
.test span.top{
    border-width:20px; 
    border-style:solid dashed dashed; 
    border-color:#ffffff transparent transparent; 
    left:80px; 
    bottom:-33px;
} 

</style>


<div class="test">
    <span class="bot"></span>
    <span class="top"></span>
    CSS “边框法”实现气泡对话框效果二
</div>

</body>
</html>



© 著作权归作者所有

共有 人打赏支持
liangxiao
粉丝 19
博文 161
码字总数 45799
作品 0
杭州
后端工程师
报表控件NCreport教程:报表高级设计

本次文章中将讲解NCreport一些高级功能的应用,我们会先定义一个组,接下来会添加summary变量到示例报表中。 一、对summary添加变量 对于提供的数量和总量来说,变量是特殊的数值项,它们每一...

很多风景 ⋅ 2014/02/24 ⋅ 0

Hyper-V 2016 系列教程58 用SCVMM 2016 新建虚拟机 VM

(1)右键某一台虚拟机,选择菜单“创建虚拟机”,如下图所示。 (2)在“选择源”对话框中,因为是测试,我们可以选择“使用空白虚拟硬盘创建新的虚拟机”,如下图所示。 (3)输入虚拟机相...

chicxp ⋅ 2017/09/25 ⋅ 0

从 Android 的源码看 Activity 如何管理对话框

我们都知道Activity负责生成、保存、恢复对话框,下面我们就来了解一下Activity的对话框管理机制。 在Activity的源码中我们可以看到 private static class ManagedDialog { }private Sparse...

鉴客 ⋅ 2011/09/19 ⋅ 0

ABBYY FineReader 12扫描对页的步骤有哪些

扫描对页时,两个页面将会显示在同一图像上。为提高 OCR 质量,对页的图像需要拆分为两个独立的图像。ABBYY FineReader 12提供有一种特殊模式,可以在ABBYY FineReader文档中自动将两个对页拆...

ABBYY ⋅ 2016/08/16 ⋅ 0

js对页面上区域判断的问题

遇到的问题下图中有详细的描述:点击滑动块以外的区域,滑动块消失,但是需要排除一些特殊区域(表格中的名字,其他对话框等等),我现在采用的是判断点击区域是不是属于这些特殊区域。但是这...

YueZheng ⋅ 2013/08/02 ⋅ 6

用MathType编辑带圈字母的教程

在用word公式编辑器MathType编辑公式时,里面涉及到很多的数学物理符号等等,这些符号或者是公式其实都可以利用MathType中的模板进行组合。在这些数学公式中,有时会有一些比较特殊的符号,它...

学术研究软件 ⋅ 2016/11/23 ⋅ 0

JavaScript入门篇

引用JS外部文件 JS在页面中的位置 javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。比如进行页面显示初始化的js必...

iceuncle ⋅ 2017/11/27 ⋅ 0

android 的 Dialog相关

对话框经常作为Activity的一部分来创建和显示。你通常应该从protected Dialog Activity.onCreateDialog (int id) 回调方法里创建对话框。当你使用这个回调函数时,Android系统会有效的设置这...

鉴客 ⋅ 2011/09/26 ⋅ 0

createwindow 和 dialogbox的区别

首先CRETTEWINDOW不是同步函数,但是DIALOGBOX是OK? 二CREATEWINDOW是原生的WIN32函数,但是DIALOGBOX是CREATEWINDOW和EVENT+WAITSINGLEOBJECT的共同体,也就是对CREATE和信息量的封装。那个...

IMGTN ⋅ 2012/07/06 ⋅ 0

Swing 常用的9种组件

1.标签 (JLabel)   标签 (JLabel)通常是用来标识另外一个组件的含义。以在标签上显示文字、图象或是文字图象的组合。   JLabel labText=new JLabel(“文本标签”);   labText.setText...

End丶Dave ⋅ 2015/11/12 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

聊聊spring cloud gateway的LoadBalancerClientFilter

序 本文主要研究一下spring cloud gateway的LoadBalancerClientFilter GatewayLoadBalancerClientAutoConfiguration spring-cloud-gateway-core-2.0.0.RELEASE-sources.jar!/org/springfram......

go4it ⋅ 22分钟前 ⋅ 0

详解:Nginx反代实现Kibana登录认证功能

Kibana 5.5 版后,已不支持认证功能,也就是说,直接打开页面就能管理,想想都不安全,不过官方提供了 X-Pack 认证,但有时间限制。毕竟X-Pack是商业版。 下面我将操作如何使用Nginx反向代理...

问题终结者 ⋅ 29分钟前 ⋅ 0

002、nginx配置虚拟主机

一、nginx配置虚拟主机可分为三种方式,分别为: 1、基于域名的虚拟主机,通过域名来区分虚拟主机——应用:外部网站 2、基于端口的虚拟主机,通过端口来区分虚拟主机——应用:公司内部网站...

北岩 ⋅ 32分钟前 ⋅ 0

shell脚本之死循环写法

最近在学习写shell脚本,在练习if while等流程控制时,突然它们的死循环写法是怎么样的?经过百度与亲测记录如下: for死循环 #! /bin/bashfor ((;;));do date sleep 1d...

hensemlee ⋅ 34分钟前 ⋅ 0

苹果的ARKit2.0有多可怕,看了就知道

序言 ARKit主要由三部分组成: 跟踪(Tracking) 跟踪是ARKit的核心组件之一,其提供了设备在物理世界中的位置与方向信息,并对物体进行跟踪,如人脸。 2.场景理解(Scene Understanding) 场...

_小迷糊 ⋅ 35分钟前 ⋅ 0

5.1 vim介绍 5.2 vim移动光标 5.3 ,5.4vim一般模式下移动光标,复制粘贴

vim命令 vim是vi的一个升级版;vim可以显示文字的颜色 安装vim这一个包vim-enhanced 如果不知道安装包,可以使用 命令下面命令来查看vim命令是那个包安装的。 [root@linux-128 ~]# yum prov...

Linux_老吴 ⋅ 39分钟前 ⋅ 0

vim一般模式

vim 是什么 vim是什么 ? 在之前接触Linux,编辑网卡配置文件的时候我们用过了vi ,vim简单说就是vi的升级版,它跟vi一样是Linux系统中的一个文本编辑工具。 如果系统中没有vim ,需要安装一...

李超小牛子 ⋅ 46分钟前 ⋅ 0

docker实战

构建企业级Docker虚拟化平台实战 重点剖析虚拟化和云计算概念; 分析Docker虚拟化的概念和原理; 从0开始实战Docker虚拟化平台; 基于Docker构建Nginx WEB服务器和CentOS虚拟机; 基于开源监...

寰宇01 ⋅ 56分钟前 ⋅ 0

vim介绍、vim颜色显示和移动光标、vim一般模式下移动光标、一般模式下复制粘贴剪切

VIM Vim 是 UNIX 文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff),语法高亮,全面的帮助系统,本地脚本(Vimscript),和便于选择的...

蛋黄Yolks ⋅ 今天 ⋅ 0

springboot+mockito测试controller层遇到的问题

使用MockitoJUnitRunner测试的一个例子,原来报错无法找到bean, 类似的异常如下:createBeanError..... 原因:是因为@Runwith使用了SpringRunner,应该修改为MockitoJUnitRunner 代码如下: ...

writeademo ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部