- 浏览: 391373 次
- 性别:
- 来自: 上海
-
文章分类
- 全部博客 (139)
- java (39)
- linux (9)
- hibernate (2)
- Spring (10)
- Struts2 (1)
- Ext (38)
- Ext + Java (5)
- Oracle (5)
- JavaScript (15)
- 开发工具 (3)
- ajax (2)
- WebSerivice+Spring (2)
- WebService+CXF (2)
- 服务器 (4)
- MQ (1)
- Apache (3)
- axis (3)
- myeclipse，maven (2)
- WebService (4)
- web (11)
- httpinvoke (1)
- 多线程 (3)
- 同步 (1)
- Servlet (2)
- css (2)
- div (2)
- html (1)
- file (2)
- 应用软件 (1)
- myEclipse10 (1)
- mysql (2)
- Extjs4 (2)
- JavaScript css (1)
- mongodb (2)
- socket (6)
- 流媒体 (5)
- 语音技术 (5)
- freeswitch (1)
最新评论
-
白天看黑夜：
Apache Mina Server 2.0 中文参考手册(带 ...
Apache Mina 学习 -
stduPanda：
引用引用[自行车在现场咨询quote]引用引用引用引用引用引用 ...
Errors running builder 'DeploymentBuilder' on project '工程名' -
鱼翔空：
maven3 导入报Plugin execution not ...
CXF自动生成wsdl与xsd文件 -
哈哈哥_Supper：
closeAction:'hide',
Extjs4 tabPanel关闭后打开 cannot read property addcls of null -
哈哈哥_Supper：
var tab1 = tabPanel.add(
...
Extjs4 tabPanel关闭后打开 cannot read property addcls of null
需要做个聊天样式的对话框，找了半天，终于找到一个比较好的样式，就像当前的手机短信对话框类似的下面贴出相关的代码：
1.css部分代码：
.chat_message,p {
margin: 0;
padding: 0;
}
p{
margin-left: 1px;
}
//左侧div对话框样式
.div1,.div2,.div3 {
display: inline-block; #
display: inline; #
zoom: 1;
position: relative;
border-style: solid;
border-color: black;
zoom: 1;
}
.div1 {
margin-top: 5px;
margin-left: 10px;
border-width: 1px;
}
.div2,.div3 { #
left: -2px;
border-width: 0 1px;
background-color: #E3F790;
}
.div2 {
margin: 0 -2px;
}
.div3 {
width: auto;
margin: 1px -2px;
padding: 0 6px;
line-height: 1.5;
margin: 1px -2px;
}
.pointer1,.pointer2 {
position: absolute;
top: 7px;
width: 0;
height: 0;
overflow: hidden;
border-top: 6px transparent dotted;
border-bottom: 6px transparent dotted;
}
.pointer1 {
left: -9px;
border-right: 6px black solid;
}
.pointer2 {
left: -8px;
border-right: 6px #E3F790 solid;
}
//右侧div对话框样式
.diva,.divb,.divc {
margin-right: 5px;
display: inline-block; #
display: inline; #
zoom: 1;
position: relative;
border-style: solid;
border-color: black;
zoom: 1;
}
.diva {
margin-top: 5px;
margin-right: 10px;
border-width: 1px;
}
.divb,.divc { #
left: -2px;
border-width: 0 1px;
background-color: #E8F4F1;
}
.divb {
margin: 0 -2px;
}
.divc {
width: auto;
margin: 1px -2px;
padding: 0 6px;
line-height: 1.5;
}
.pointera,.pointerb {
position: absolute;
top: 7px;
width: 0;
height: 0;
overflow: hidden;
border-top: 6px transparent dotted;
border-bottom: 6px transparent dotted;
top: 7px;
}
.pointera {
right: -9px;
border-left: 6px black solid;
}
.pointerb {
right: -8px;
border-left: 6px #E8F4F1 solid;
}
2.html
<html>
<head></head>
<div id="main_body"
style="position: absolute; top: 40px; left: 50px; width: 900px; height: 600px; overFlow: auto; background-color: #F4F9F9; border:solid 1px #F9F94B; scrollbar-face-color: #ffd700; scrollbar-shadow-color: #e0ffff; scrollbar-highlight-color: #fa8072; scrollbar-3dlight-color: #ff0000; scrollbar-darkshadow-color: #afeeee; scrollbar-track-color: #ffb6c1; scrollbar-arrow-color: #e6e6fa;"
align="left">
<div align="left" id="outputArea"
style="overflow: visible; font-size: 14px; height: auto">
<div class='chat_message' align='left'><div class='div1'><div class='div2'>"
<div class='div3'><p align='left'>
请求
</p></div></div><div class='pointer1'></div><div class='pointer2'></div> </div></div>
<div class='chat_message' align='right'><div class='diva' ><div class='divb'>
<div class='divc'><p align='left'>
回复
</p></div></div><div class='pointera'></div><div class='pointerb'></div> </div></div>
</div>
</div>
</html>
代码有点乱，基本样式实现了。有兴趣的可以看看
顶
踩
发表评论
-
linux下查找java进程占用CPU过高原因
2018-04-03 12:35 7491. 查找进程 top查看进程占用资源情况 ... -
Apache Mina TCP/UDP功能使用说明
2017-03-14 14:18 1683Apache Mina ... -
滚动条随着div高度变化到最底端
2013-09-11 11:15 951var t = document.getElementByI ... -
WebService CXF客户端调用样例
2013-01-04 14:48 2032如果服务端提供jar包，客户端直接引用jar ... -
ExtJS layout的9种样式风格总结
2012-12-18 10:29 1084文章转载自：http://virgoooos.iteye.co ... -
Zip文件解析(包含中文目录)
2012-12-11 13:22 2376在解析zip文件时，由于默认版本不支持中文目录，导致解析时遇到 ... -
正则表达式详解
2012-10-09 15:13 927转载自：http://edu.yesky.com/ ... -
map 排序
2012-09-28 10:44 1153用于map的值排序的方法，修改SortedSet 的方法即 ... -
java读写txt文件
2012-09-19 18:49 29974import java.io.BufferedReader; ... -
UTF-8 的bom格式处理
2012-09-14 11:54 1641一般通过httpcient请求的内容，有可能返回utf- ... -
java获取当前工程目录
2012-08-23 17:41 1650转载自：http://blog.csdn.net/yan ... -
用sax解析xml文件把读取的内容写入txt
2012-08-17 10:07 2161import java.io.BufferedWrite ... -
linux 启动oracle
2012-07-24 10:58 1022转载：http://www.cnitb ... -
java写excel03文件
2012-07-18 00:06 957用java jxl写入excel03文件，下面给出一个简 ... -
JSP页面查询显示常用模式
2012-07-16 21:09 1194全文转载自：http://pharaohsprinc ... -
Servlet调用Spring bean
2012-07-13 16:30 1686servlet中直接调用spring时会出现Nullpo ... -
Json
2012-07-11 11:25 1061原文转载自：http://www.cnblogs.com ... -
java常用英语词汇翻译
2012-06-04 14:07 2407<java常用英语词汇>abstract 抽象的 ... -
JAVA垃圾回收分析&& java虚拟机垃圾回收机制
2012-06-04 11:11 1220JAVA垃圾回收分析&&a ... -
原子变量(AtomicLong, AtomicInteger, AtomicReference)
2012-05-30 11:49 1724原文转载：http://meng ...
相关推荐
div+css实现圆角导航菜单的效果。
DIV+CSS实现圆角DIV+CSS实现圆角DIV+CSS实现圆角
DIV+CSS实现圆角，无需图片，兼容性好。
DIV+CSS IE圆角,让IE也能支持圆角
使用div+css样式呈现圆角层 不需要背景图片 用div层与样式来实现圆角层的
div+css 可伸缩的圆角 div+css 可伸缩的圆角 div+css 可伸缩的圆角 div+css 可伸缩的圆角 div+css 可伸缩的圆角
div+css无图片实现圆角矩形(兼容Firefox)
div+css圆角边框的制作
主要介绍了使用Div+CSS纯图片实现圆角矩形的方法小结,CSS3中用代码绘制圆角矩形非常方便,而本文要介绍的则是利用图片来实现兼容性更强的方法,需要的朋友可以参考下
div+css特效简单导航水平导航滑动门导航白色圆角 div+css特效简单导航水平导航滑动门导航白色圆角 div+css特效简单导航水平导航滑动门导航白色圆角 div+css特效简单导航水平导航滑动门导航白色圆角
让IE支持圆角和阴影的文件 CSS这样写 <style type="text/css"> #DIVID{ -moz-border-radius: 11px; -khtml-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; behavior: url(ie-css3....
在网页中实现圆角的方法有很多，记得在一开始都是使用图片来实现的，而现在我们可以使用DIV+CSS来快速完成圆角的制作，需要的朋友可以参考下本
NULL 博文链接：https://javapub.iteye.com/blog/711781
用div+css实现边框圆角,其实实现div圆角，有三种方法，也可以用圆角片来实现，还有一种技术，现在浏览器还不是很支持。
css+div漂亮的圆角tab选项卡css+div漂亮的圆角tab选项卡css+div漂亮的圆角tab选项卡
css3圆角 非常简单，好用，兼容性好，本人空间有html5的中文手册，还有很多关于编程的资料，欢迎下载啊
为HTML网页做圆角。汇集css 无图片圆角，CSS圆角区块容器，div + CSS 圆角矩，WEB2.0 圆形边框 div 使用 css 做法。
圆角矩形的制作想必大家都会吧，但真正的实现原理想必并没有几个人知道，在本文有个不错的示例或许能帮助大家更好的理解其中的原理，感兴趣的朋友可以参考下
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...
自己写的一个页面，纯DIV+CSS布局样式，适合新手研究，里面还有一些html5的代码(如div圆角设计等等)，感兴趣的也可以看看！