初学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 ...
随机推荐
- 集合类 toArray（T[]）
HashSet<String> deDupe = new LinkedHashSet<>(Arrays.asList(origParams.getParams(paramNam ...
- IIS发布问题汇总
1.未能加载文件或程序集“System.Data.SQLite” 在IIS界面选择应用程序池->选择所使用的.net 版本->高级设置->将"使用32位应用程序" ...
- [REP]AWS Regions and Availability Zones: the simplest explanation you will ever find around
When it comes to Amazon Web Services, there are two concepts that are extremely important and spanni ...
- FPGA综合工具--Synplify Pro的常用选项及命令
最近要用到Synplify,但以前没使用过,无基础,找到一篇帖子,隧保存下来. 本文转自:http://blog.sina.com.cn/s/blog_65fe490d0100v8ax.html Sy ...
- Sqlserver 自定义表类型定义，使用，删除
--创建用户自定义表类型CREATE TYPE dbo.CustomerTable AS TABLE ( Id int NOT NULL, Name char(10) NULL, PRIMARY KE ...
- Window对象方法
Window对象方法 scrollBy() 按照指定的像素值来滚动内容. scrollTo() 把内容滚动到指定的坐标. setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式. ...
- HTML 浏览器显示控制
//强制浏览器以最高版本运行页面 <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" ...
- opencv基于混合高斯模型的图像分割
#include "stdafx.h" #include <opencv\cv.h> #include <opencv\highgui.h> #includ ...
- JS数组push会覆盖前面的数据问题
这是一个作用域和重新赋值的问题. 检查声明数组所在位置,特别在是多层嵌套中,检查是否在内层循环结束时 跳到外层循环就重新将 数组 赋值为空.
- 虚拟机下linux安装mysql,apache和php
由于腿伤了,卧床在家折腾下linux,尝试用虚拟机装mysql,apche和php.中间各种波折,装了好几天,觉得有些经验还是要记录下来,让自己别忘了:) 按照下面这篇文章的方法,基本可以顺利安装成功 ...