利用 css 制作简单的提示框
在网页开发中，为了提高用户体验，经常会用到一些提示框来引导用户，这里分享下一些简单的提示框的制作
1.首先类似一个长方形右上角一个关闭按钮
这里用到的主要是一些定位的知识，运用relative和absolute可以快速制作这样的一个提示框，想详细了解，点击这里
html代码：
<div id="position">
<div class="position-relative">
<span>提示信息</span>
<a href="javascript:;"><i class="icon">×</i></a>
</div>
</div>
css代码：
#position {
position: relative;
width: 500px;
height: 400px;
margin: 0 auto;
color: #fff;
background: #66cccc;
}
#position .position-relative {
position: relative;
top: 20px;
left: 20px;
width: 300px;
height: 200px;
padding: 20px;
background: #999;
}
#position .position-relative .icon {
display: block;
position: absolute;
top: -10px;
right: -10px;
overflow: hidden;
/*
white-space: nowrap;
text-overflow: ellipsis;
*/
border-radius: 50%;
width: 20px;
height: 20px;
line-height: 20px;
color: #eee;
font-style: normal;
text-align: center;
background: #666;
}
2.还有类似这种qq对话框
有了定位的知识后，这种对话框主要就是左边的小三角的制作了，其实这个我们可以利用border来制作，首先我们先来开一个例子:
我们就给一个span标签来看看
html
<span class="icon-s"></span>
css
.icon-s {
display: block;
margin: 0 auto;
width:;
height:;
border-style: solid;
border-width: 40px;
border-top-color: red;
border-right-color: blue;
border-bottom-color: yellow;
border-left-color: black;
}
我们来看看效果：
怎么样！很神奇对不对！其实到这里我们就可以看到我们要的三角形了，我们只要保留四个中的一个就行了，那么将其他三边设置为透明就行了
css
.icon-s {
display: block;
margin: 0 auto;
width:;
height:;
border-style: solid;
border-width: 40px;
border-top-color: transparent; /*-*/
border-right-color: red;
border-bottom-color: transparent; /*-*/
border-left-color: transparent; /*-*/
}
现在我们可以看到一个基本的雏形，接下来我们在来改改，把上边框的高度设为0，右边框的宽度设长一点
css:
.icon-s {
display: block;
margin: 0 auto;
width:;
height:;
border-style: solid;
border-width: 40px;
border-top-width:; //
border-right-width: 70px; //
border-top-color: transparent;
border-right-color: red;
border-bottom-color: transparent;
border-left-color: transparent;
}
这样子左边的三角形就出来了，接下来我们来简化一下代码：
.icon-s {
display: block;
margin: 0 auto;
width:;
height:;
border-style: solid;
border-color: transparent red transparent transparent;
border-width: 0 70px 40px 40px;
}
考虑到IE低版本不支持transparent 属性我们可以设置dotted或是dashed
原因是在IE6下, 点线与虚线均以边框宽度为基准,点线长度必须是其宽度的3倍以上（height>=border-width*3）,虚线宽长度必须是其宽度的5倍 以上（height>=border-width*5）,否则点线和虚线都不会出现.
.icon-s {
display: block;
margin: 0 auto;
width:;
height:;
border-style: dashed solid dashed dashed;
border-color: transparent red transparent transparent;
border-width: 0 70px 40px 40px;
}
完整的demo：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="阿林十一">
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述">
<title>提示框</title> <!--style start-->
<style type="text/css">
/*-------- begin-base ------------*/
html,
body,
div,
h1,h2,h3,
ul,li,
a,
p,
span {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
color: #666;
font-size: 14px;
font-family: "Microsoft Yahei";
}
a {
color: #eee;
text-decoration: none;
}
li {
list-style: none;
}
/*-------- end-base -------*/
#position {
position: relative;
width: 500px;
height: 400px;
margin: 0 auto;
color: #fff;
background: #66cccc;
}
#position .position-relative {
position: relative;
top: 20px;
left: 20px;
width: 300px;
height: 200px;
padding: 20px;
background: #999;
}
#position .position-relative .icon {
display: block;
position: absolute;
top: -10px;
right: -10px;
overflow: hidden;
/*
white-space: nowrap;
text-overflow: ellipsis;
*/
border-radius: 50%;
width: 20px;
height: 20px;
line-height: 20px;
color: #eee;
font-style: normal;
text-align: center; background: #666;
}
#position .position-relative .tip {
position: absolute;
right: -212px;
top:50%;
margin-top: -20px;
width: 200px;
height: 40px;
border-radius: 5px;
background: #4392e0;
}
#position .position-relative .tip .icon-tip {
position: absolute;
top: 8px;
left: -23px;
border: 12px solid transparent;
border-top-width: 0;
border-right-color: #4392e0; }
.icon-s {
display: block;
margin: 0 auto;
width: 0;
height: 0;
border-style: dashed solid dashed dashed;
border-color: transparent red transparent transparent;
border-width: 0 70px 40px 40px;
}
</style>
<!--style end--> </head> <body>
<!--
position 定位 （参照点） 1、static
2、relative 相对定位（self）
3、absolute 绝对定位（2 1、relative |absolute| absolute first 2、body）
4、fixed
-->
<div id="position">
<div class="position-relative">
<span>提示信息</span>
<a href="javascript:;"><i class="icon">×</i></a>
<div class="tip">
<span class="tx">这里是提示信息！！！</span>
<span class="icon-tip"></span>
</div>
</div>
</div> <span class="icon-s"></span> </body>
</html>
利用 css 制作简单的提示框的更多相关文章
- div+css制作带箭头提示框效果图(原创文章)
一直都在看站友们的作品,今天也来给大家分享一个小的效果,第一次发还有点小紧张呢,语言表达能力不是很好,还请见谅…^ 先来个简单点的吧,上效果图 刚开始在网上看到效果图的时候感觉好神奇,当我试着写出来的 ...
- HTML简单的提示框
由于项目中需要一个简单的提示框,就是鼠标放上去,可以提示相关信息,引用第三方的比较麻烦,所以,这里封装了一个很简单的HTML方法. <script src="http://cdn.st ...
- 利用CSS制作背景变色的横向导航栏
1.表单 页面如下: <html> <head> <title>注册表单页面</title> </head> <body> &l ...
- 使用css实现全兼容tooltip提示框
在上一篇文章中,使用css实现了一个全兼容的三角形图标,这个三角型图标可以使用于多种场景,比如下拉图标.多级菜单等,这篇文章我们使用这个图标通过纯css来实现一个我们常见的tooltip提示框. 最终 ...
- 利用CSS制作脸书
很多网站都支持图片上的头像框识别,鼠标在头像框处,会提示一些人物信息. 这次就利用CSS实现这样一个功能: div处主要包括两部分,一部分是图片:另一部分是链接以及脸框 <div class=& ...
- 利用CSS制作图形效果
前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧 以下所有内容只使用一个HTML元素.任何类型 ...
- Android：Toast简单消息提示框
Toast是简单的消息提示框,一定时间后自动消失,没有焦点. 1.简单文本提示的方法: Toast.makeText(this, "默认的toast", Toast.LENGTH_ ...
- CSS制作简单图标
CSS制作图标包括知识点如border-width.border-style.border-color.border-radius.对元素的定位拼接.旋转等结合起来. 图标效果如下(拖动滑块可缩放图标 ...
- 利用css制作带边框的小三角
标签(空格分隔):css 在项目中会使用到的小实例,目前知道的有两种方法来实现 设置元素的宽和高,利用rotate实现,比较简单的一种 div{ width: 10px; height: 10px; ...
随机推荐
- whu 1464 deal with numbers
WHU 1464 deal with numbers 题意: 给你一串数字,对着串数字有三项操作: Minus a,b,c:对区间[a,b]总的每个数都减c. Division a,b,c:对区间[ ...
- 命令删除visualstudio.com云端项目(TFS)
1.运行命令行 2.tfsdeleteproject /collection:https://域名.visualstudio.com/DefaultCollection “项目名称”
- Unity3d 使用NPOI读写Excel 遇到的问题
开发环境:unity5.3 NPOI(.net 2.0版 http://npoi.codeplex.com/) 运行环境:PC版, 其他平台没有测试 先上效果图: 实现步骤: 1.新建一个Exce ...
- Flash Builder 创建CSS
1.global 选择器将样式应用于所有控件 在 Flash Builder 中创建新MXML 文件并切换到设计模式 属性视图右侧的外观视图可更改外观 Flash Builder 自动创建CS ...
- ThinkPHP CURD方法盘点：data方法
data方法也是模型类的连贯操作方法之一,用于设置当前要操作的数据对象的值,可能大家不太习惯用这个方法,今天来讲解下如何用好data方法. 用法 写操作 通常情况下我们都是通过create方法或者赋值 ...
- Swipe2.1更新——移动Web内容滑块
Swipe JS 是一个轻量级(3.7 kb) mobile slider,支持 1:1 触摸移动(基于精确的触摸位置的内容滑动). 但是我使用一段时间后发现两个bug,所以在官方2.0(官网http ...
- C 循环链表
循环链表的定义:将单链表中最后一个数据元素的next指针指向第一个元素 在循环链表中可以定义一个“当前”指针,这个指针通常称为游标,可以通过这个游标来遍历链表中的所有元素. 1) 普通插入元素(和单链 ...
- 文件I/O（不带缓冲）概述
一.引言 UNIX系统中大多数文件I/O只需用到5个函数:open.read.write.lseek以及close.这些函数经常被称为不带缓冲的I/O(unbuffered I/O).术语不带缓冲指的 ...
- IIS 之 添加MIME扩展类型及常用的MIME类型列表
经常用IIS作为下载服务器的时候有时传上去的文件比如 example.mp4 文件名上传后,但是用http打开的时候确显示为 404 文件不存在.其实是IIS对文件的一种保护,不在IIS指定的MIME ...
- OWASP 2013年十大Web应用安全漏洞
权威的安全组织OWASP 更新了Top 10:https://www.owasp.org/index.php/Top_10_2013-Top_10 十大安全漏洞分别是:1. 注入,包括SQL.操作系统 ...