【不用图片做的三角语言框效果，纯样式编写，css三角样式写法】的更多相关文章

不用图片做的三角语言框效果，纯样式编写，css三角样式写法

  2010-07-05 19:57:28 博主 回复 用户昵称 在秋日真的有轻柔吧. 上边效果与理想的有误差,代码布不上去,下边是源代码,另行保存后查看真正效果,下图是真正效果,区别在三角处,里面颜色…

用CSS3实现带小三角形的div框(不用图片)

现在看到了很多带小三角形的方框,如微信.Mac版的QQ.QQ空间的时间轴等等,在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着,感觉看着很不错,于是决定亲自动手写一个,我上次用的是偏移背景图片法,那么今天就不用图片,用CSS3实现一下,下面我们来看一下实现代码. 首先我们来看一下CSS3实现三角形原理:其实就是对于transparent的应用 假如html代码是这样的 <div class="arrow-up"> <!--向上的三角--> <…

jq实现百度图片移入移出内容提示框上下左右移动的效果

闲来无聊,看到百度图片hover的时候提示框的效果,遂想试一试自己能否实现. 百度图片hover的效果: 需求: 1. 当鼠标从图片上部移入的时候,提示框从上部移到正常位置.从上部移出的时候,提示框从正常位置移到上部. 2. 当鼠标从图片左部移入的时候,提示框从左部移到正常位置.从左部移出的时候,提示框从正常位置移到左部 3. 当鼠标从图片右部移入的时候,提示框从右部移到正常位置.从右部移出的时候,提示框从正常位置移到右部 4. 当鼠标从图片下部移入的时候,提示框从下部移到正常位置.从下部移出的…

css实现气泡框效果

前提:气泡框或者提示框是网页很常见的,实现它的方式有很多,我们以前最常用的就是切图片 然后通过 "定位" 方式 定位到相应的位置,但是用这种方式维护很麻烦,比如设计师想改成另外一种或者另外一种颜色 那我们只有再次切图片等.下面我们来学习下使用html+css来实现这种效果! 如下效果:   and   我们可以来分析下:要实现这种效果 无外乎就是一个矩形和一个小三角形 然后三角形定位上去就可以了,那么我们怎么样通过css来制作小三角形呢? 一:首先我们来看看css border属性,当…

GridView实现一个图片加多个文本框

GridView的使用是很简单的,API Demo中有例子,但是要实现复杂的GridView,就需要自定义了. 今天我们要实现如下的效果: 先说它的布局,它是由gridview和grid_item两部分组成. main.xml <?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android="http://schemas.android.com/apk/res/android&…

使用bootstrap的插件实现模态框效果

在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅能大幅减轻工作量,而且能让我们的代码更简明和优雅. 今天我们选择使用著名的 bootstrap 库的模态框插件 modal.js 来实现模态框效果,同时也使大家进一步熟悉 bootstrap 的插件使用. 一. bootstrap 的 js 插件的简单介绍 1.引入 我们在使用 bootstrap…

使用bootstrap的JS插件实现模态框效果

在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅能大幅减轻工作量,而且能让我们的代码更简明和优雅. 今天我们选择使用著名的 bootstrap 库的模态框插件 modal.js 来实现模态框效果,同时也使大家进一步熟悉 bootstrap 的插件使用. 一. bootstrap 的 js 插件的简单介绍 1.引入 a. 引入全部JS插件 我们在使…

jQuery动态提示消息框效果

效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery…

JQuery实现页面企业广告图片切换和新闻列表滚动效果

最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: <!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"> <hea…

Combox 实现百度收索框效果

标题中所谓百度收缩框效果,就是在输入数据的时候,自动提示,来张图就明白了: 用Combox来实现这个功能只是需要设置三个A开头的属性就OK了:AutoCompleteSource.AutoCompleteMode.AutoCompleteCustomSource AutoCompleteSource属性的设置 获取或设置一个值,该值指定用于自动完成的完成字符串的源.也可以说是,指定用于自动完成的完成字符串的来源方式.其默认的属性值为None.但是在这里,我们要指定为CustomSource. A…