styleMsg.html
3.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 5,0,5,5;
padding: 0;
list-style: none;
font-family: '微软雅黑'
}
::-webkit-scrollbar-button{/*...*/}
::-webkit-scrollbar-track-piece{/*...*/}
::-webkit-scrollbar-corner{/*...*/}
::-webkit-resizer{/*...*/}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
border-radius: 6px;
background:rgba(0,0,0,0.2);
}
.triangle-left{float:left;max-width:400px;border:1px solid #b6b6b7; border-radius:10px;padding:10px;background:#e1e3e6;margin:20px 0px 0px 10px; position:relative; display:inline-block;/*box-shadow:0 4px 8px #888888;*/word-wrap: break-word;}
.triangle-left:before{position:absolute; content:"";display:block;}
.triangle-left.left:before{border-color:rgba(0, 0, 0, 0) #B6B6B7 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);border-width:6px 19px 10px 40px;border-style:solid;bottom:auto;left:-50px;top:8px;}
.triangle-left:after{position:absolute; content:"";display:block;}
.triangle-left.left:after{border-color:rgba(0, 0, 0, 0) #e1e3e6 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);border-width:6px 19px 10px 40px;border-style:solid;bottom:auto;left:-50px;top:8px;}
.triangle-right{float:right;max-width:400px;border:1px solid #b6b6b7;border-radius:10px;padding:10px;background:#9feb6a;position:relative;display:inline-block;/*padding-top:20px;*/margin:20px 10px 0px 0;/*box-shadow:0 4px 8px #888888;*/word-wrap: break-word;}
.triangle-right:before{position:absolute; content:"";display:block;}
.triangle-right.right:before{border-color:rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #B6B6B7;border-width:6px 40px 10px 19px;border-style:solid;bottom:auto;right:-50px;top:8px;}
.triangle-right:after{position:absolute; content:"";display:block;}
.triangle-right.right:after{border-color:rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #9feb6a;border-width:6px 40px 10px 19px;border-style:solid;bottom:auto;right:-50px;top:8px;}
.sendType{float: right;padding:25px;color:rgb(0, 120, 0);}
.triangle-time{text-align:center;color:#999;font-size:14px; font-family:'微软雅黑';clear:both;margin:5px 0;}
</style>
<script type="text/JavaScript">
window.onload = function(){
<!-- 去掉默认的contextmenu事件，否则会和右键事件同时出现。-->
document.oncontextmenu = function(e){
e.preventDefault();
}
}
function clickimg(opg){
if(opg.width == opg.attributes['default_width'].value && opg.height == opg.attributes['default_height'].value){
opg.width *=4;
opg.height *= 4;
}else{
opg.width = opg.attributes['default_width'].value ;
opg.height = opg.attributes['default_height'].value;
}
};
function addFile()
{
var str = '<INPUT type="file" size="50" NAME="File">'
document.getElementById("MyFile").insertAdjacentHTML("beforeEnd", str)
alert("hello word!")
}
function getAll(){
content = document.body.innerHTML
}
function append(){
var obj = document.getElementById("content");
obj.insertAdjacentHTML("beforeEnd","<div style='overflow:hidden;'><p class='triangle-right right'>nice</p></div>");
var de=document.documentElement;
de&&(de.scrollTop=de.scrollHeight);
obj.scrollTop = obj.scrollHeight;
}
function clear(){
document.body.innerHTML=''
}
</script>
</head>
<body>
<body id="content" style='font-size: 14px;'>
</body>
</html>