CSS 对话框的实现

直接入正题,以下是两种实现方法的html部分:

1 <div class="one">
2     <em></em><span></span>
3     我是第一个对话框
4 </div>
5 <div class="two">
6     我是第二个对话框
7 </div>

第一种的CSS样式如下:

 1 /*one CSS气泡框*/
 2 .one {
 3     position: relative; width: 300px; height: 100px; border: 3px solid #09f;
 4 }
 5 .one em, .one span{
 6     position: absolute; top: 100px; left: 20px; display: block; border-width: 15px; border-style: solid dashed dashed;
 7 }
 8 .one em {
 9     border-color:#09F transparent transparent;
10 }
11 .one span {
12     top: 96px; border-color:#FFF transparent transparent;
13 }

第二种的CSS样式如下:

/*two 使用继承*/
.two {
    position: relative; width: 300px; height: 100px; border: 3px solid #f60; background: #fff;
}
.two::after {
    position:absolute; bottom: -12px; left: 20px; padding: 8px; border:inherit; border-left: none; border-top: none; content:""; background: inherit; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);
}

从以上代码看,不容易看出第二种方法无论是从html还是从CSS看,都更简洁。第二种方法使用一个标签,运用伪类和继承。不仅简单明了,改动起来也更方便。

时间: 2024-10-13 13:58:52

CSS 对话框的实现的相关文章

CSS对话框特效 兼容性好

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS对话框</title><style type="text/css">*{padding: 0;margin: 0;font-size: 12px;}bod

BOM小结以及文档节点基础

在之前学习过程中,由于某些原因,先去看了DOM相关,而略过了BOM,在昨天终于是把BOM这部分补上. BOM的概念就不多说,BOM的核心是window对象,window对象定义了3个[alert(),confirm(),prompt()]人机交互的接口方法方便开发人员进行调试. 其中alert()包含一个可选的提示信息参数,用于向用户弹出提示性信息. confirm()包含两个按钮(确定与取消)如果点击"确定"则该方法返回true:点击"取消"则该方法返回false

html+css+jquery 实现模态盒(模式窗口对话框)

最近在实现一些jQuery相关的组件,既是为了熟悉一下 jQuery 的语法,也是为了能够了解一些 jQuery 插件底层的基本实现. 今天花了一些时间做的一个模态盒(这是谷歌翻译的名字,吾辈感觉挺不错的,所以也便使用了这个名称),虽然只是一个很小的东西,然而做完之后感觉也挺不错的,所以吾辈也便分享一下自己的代码吧! 效果图: html: <!--region 模态盒(模式对话框)--> <button class="modal-btn">打开模态</bu

CSS 圆角,三角,五角星,五边形,爱心椭圆,对话框、八卦 Party

最初接触css时,对于一些特殊形状的图标.形状等总是习惯性的切图.从现在开始了解下如何编写不规则形状样式吧... ||下图中的样式都有对应的CSS样式哦 ============================================================================= 红色竖线的css样式: 选择器:before{ content:'\0020'; display:inline-block; height:25px; width:3px; backgrou

纯CSS实现各类气球泡泡对话框效果

抄自http://www.zhangxinxu.com/wordpress/?p=651 边框法 我们首先来看下面一段样式代码: .test{width:10px; height:10px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00;} 当某个div应用了上面这个样式后,结果会如何?见下图(截自Firefox3.5,IE浏览器有细节上的差异): 仔细观察边框色的交界处,四个角落有4个45°的斜边,将整个边框分成

【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&amp;游戏结束

引言:2048小游戏的结束界面,使用纯CSS制作模态对话框,一般做模态对话框都会使用BootStrap自带的模态对话框组件方便使用,但在制作要运行在移动端的小项目时,就不能使用BootStrap,因为文件太大,下载耗时,耗费流量. 一.模态对话框的组成 2个Div,一个铺满整屛,一个显示内容 坑:如何让Div铺满整屛?解决:2个办法 宽  高 100%    →    position:absolute:  →   top=0;left=0; 四个方向  margin-top/left/righ

纯css写带小三角对话框

在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个三角形,如果想要带边框的三角形,则可以两个重叠使用.代码如下: <div class="box2"> 纯css写带小三角对话框 </div> .box2{ float:left; position:relative; width:200px; height:100p

【小技巧】只用css实现带小三角的对话框样式

一个小小的技巧: 如图所示,这种小三角,不用图片,只用css怎么实现呢? 直接上代码吧: <!DOCTYPE html> <html> <head> <title>三角</title> <style> .main{width: 100px;border: 1px solid red;height: 100px;position: relative;} .box{width: 0;height: 0;border-style: soli

web前端入门到实战:css实现不规则图形的阴影(如对话框)

在日常开发中会使用带箭头的弹出对话框,有时为了美观或者突出,会添加一个阴影.由于图形不规则且可能是由多个元素拼接而成的,这样box-shadow属性可能不能满足需求.这里推荐一个类似的属性,filter下的drop-shadow. <div class="triangle"> </div> .triangle{ width: 200px; height: 60px; position: relative; filter: drop-shadow(0 0 5px