初学c# -- 学习笔记(二)
接着前面的学习,对话建立了,下面就写对话框气泡,和微信的差不多那种。尖角对话气泡网上一堆,圆尖角的修改了一个。IE8以下不能用,其他都可以用,直接上html代码,将<style>内容用到你的程序里面就能达到一样的效果,没用js文件,没用图片。强大的CSS3,真的很强大。
html代码
<style> .Message_Left { width: auto; height: auto; margin-left: 200px; max-width:390px; min-width:90px; display:inline-block; *display:inline; background-color:#5cacdd; color: #fff; font-size: 12px; font-family: 微软雅黑; line-height: 18px; padding: 12px 20px 12px 20px; box-sizing: border-box; border-radius: 25px; position: relative; word-break: break-all; } .Message_Right { width: auto; height: auto; margin-left: 200px; max-width:390px; min-width:75px; display:inline-block; *display:inline; background-color: #59B859; color: #fff; font-size: 12px; font-family: 微软雅黑; line-height: 18px; padding: 12px 20px 12px 20px; box-sizing: border-box; border-radius: 25px; position: relative; word-break: break-all; } .Message_Left:before { content:""; position:absolute; z-index:-; bottom:-1px; left:-37px; height:24px; border-right:50px solid #5cacdd; background:#5cacdd; -webkit-border-bottom-right-radius:90px 5px; -moz-border-radius-bottomright:90px 5px; border-bottom-right-radius:90px 5px ; -webkit-transform:translate(, -2px); -moz-transform:translate(, -2px); -ms-transform:translate(, -2px); -o-transform:translate(, -2px); transform:translate(, -2px); } .Message_Left:after { content:""; position:absolute; z-index:-; bottom:-2px; left:-8px; width:40px; height:25px; background:#fff; -webkit-border-bottom-right-radius:30px 50px; -moz-border-radius-bottomright:30px 50px; border-bottom-right-radius:30px 50px; -webkit-transform:translate(-30px, -2px); -moz-transform:translate(-30px, -2px); -ms-transform:translate(-30px, -2px); -o-transform:translate(-30px, -2px); transform:translate(-30px, -2px); } .Message_Right:before { content:""; position:absolute; z-index:-; bottom:-1px; right:-45px; height:31px; border-left:60px solid #59B859; background:#59B859; -webkit-border-bottom-right-radius:80px 50px 0px 0px; -moz-border-radius-bottomright:80px 50px; border-bottom-left-radius:90px 5px ; -webkit-transform:translate(, -2px); -moz-transform:translate(, -2px); -ms-transform:translate(, -2px); -o-transform:translate(, -2px); transform:translate(, -2px); } .Message_Right:after { content:""; position:absolute; z-index:-; bottom:-2px; right:-95px; width:70px; height:32px; background:#fff; -webkit-border-bottom-right-radius:40px 50px 0px 0px; -moz-border-radius-bottomright:40px 50px; border-bottom-left-radius:30px 50px; -webkit-transform:translate(-30px, -2px); -moz-transform:translate(-30px, -2px); -ms-transform:translate(-30px, -2px); -o-transform:translate(-30px, -2px); transform:translate(-30px, -2px); } </style> <body style='background-color:#fff'> <div class="Message_Left"> 风筝飞的很远,线却不在手上,曾今年幼时的梦想就像那风筝,线不在我手上,只是我跟着它跑,却不是我带它飞到任何一个地方。 青春走了、我们大了,那些熙熙攘攘的地方现在成了别人的天堂,有的人怀念旧时的那个地方,就像自己怀念那枯燥的课堂、一样。有的人在憧憬更好的明天,却还在回想旧时的时光。 </div> <br><br> <div class="Message_Right"> 嗯... </div> <br><br> <div class="Message_Left"> 天空之下,我门轻的像羽毛。在那叶落黄昏,被吹向很遥远的地方,很遥远的地方,梦似乎还不曾飞到。 </div> <br><br> <div class="Message_Right"> 忘记变得越来越胆怯,回忆却越来越忧伤,那样清晰完美。如果没流干眼泪,你怎么知道我的忧伤。伴随的风带来的不仅仅有一丝凉意,还有那一点点的惆怅,让一个仕途迷失原有的方向。 </div> <br><br> <div class="Message_Left"> 很遥远的地方,梦似乎还不曾飞到。 </div> </body>
直接复制粘贴成一个html文件就可以看到效果,不足的就是部分圆角不好设置透明,还得改改。
介绍个强大的css3代码,纯css3做的,动画的背景,看看:http://www.jb51.net/jiaoben/445132.html,演示地址:http://demo.jb51.net/js/2016/CSS3_dcyc/
这个当背景很不错,上面套一个半透明div,效果不错。没用js文件,就3张图片,只有1k大小,会飘动,会变天。
学习还在继续,通过写小程序学到了不少东西,差不多了打个包发上来。
初学c# -- 学习笔记(二)的更多相关文章
- 初学c# -- 学习笔记(一)
初学c# -- 学习笔记(一) 学习C#了,参考许多资料,一步步学习.这一段学习ajax的工作原理,参照其他例子写了web版的群聊小程序,全部文件代码也就不到300行,很简单.使用时先输入用户名,点确 ...
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- JMX学习笔记(二)-Notification
Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...
- java之jvm学习笔记二(类装载器的体系结构)
java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...
- Java IO学习笔记二
Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...
- 《SQL必知必会》学习笔记二)
<SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...
- NumPy学习笔记 二
NumPy学习笔记 二 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.<数学分 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(二) indigo tools
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
随机推荐
- 关于tomcat的热部署
在做java web开发时,常用的服务器就是tomcat了.如果tomcat不能实现热部署,那么恐怕每次更改文件进行发布就尤其费时了. 热部署定义:在未改变class文件的签名的前提下,文件的修改是不 ...
- Java面向对象㈢ -- 内部类
内部类必须要依赖于继承或实现一个接口.内部类可以实现Java多继承,内部类访问外表类的局部变量或参数时,则该局部变量或参数必须被final修饰.内部类不能包含有static的变量和方法,原因是因为内部 ...
- neutron debug
neutron port-list neutron port-delete neutron floatingip-list neutron floatingip-delete
- python celery + redis
redis http://debugo.com/python-redis celery http://docs.jinkan.org/docs/celery/getting-started/intro ...
- CPU阿甘:函数调用的秘密
个人感言:真正的知识是深入浅出的,码农翻身" 公共号将苦涩难懂的计算机知识,用形象有趣的生活中实例呈现给我们,让我们更好地理解.感谢"码农翻身" 公共号,感谢你们的成果, ...
- cs11_c++_lab3
Matrix.hh class Matrix { int row; int col; int *p; void copy(const Matrix &m); void clearup(); p ...
- 用JS实现九九乘法表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- spi can't create GMem lock
管理员身份启动cmd,输入下方命令 netsh winsock reset Successfully之后重启电脑就解决了
- 如何设置Java开发环境
傻瓜式 设置Java开发环境 跟我来. 对与win7操作系统.有两种方法. 第一种: 1.下载JDK,完成安装. 2.右键我的电脑,选择属性,在左边找到高级系统设置左键单击打开,在高级选项中找到 环境 ...
- web基础知识小记