-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmessagecss.css
More file actions
154 lines (139 loc) · 3.85 KB
/
messagecss.css
File metadata and controls
154 lines (139 loc) · 3.85 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
body{
font-size:75%;
background:#abc;
}
ol,ul{
list-style:none;
}
*{
margin:0;
padding:0;
}
/*--------------------------------------------------------------------
Comments Section
--------------------------------------------------------------------*/
div#comments{
width:50em;
clear:both;
margin:2em;
background:#EDEDED;
border:1px solid #ddd;
padding:1em;
}
/*--------------------------------------------------------------------
Comment Trees Layout
--------------------------------------------------------------------*/
ul#comment_tree{
margin:2.5em 0 1.5em 0;
}
ul#comment_tree li{
margin-bottom:3em; /*设成和ul.replies的话会比较难识别，亲和力？*/
}
/*--------------------------------------------------------------------
Member Picture Layout
--------------------------------------------------------------------*/
ul#comment_tree div.member{
width:85px;
max-width:85px;
float:left;
background:#EDEDED;
display:block;
padding-right:35px; /*为箭头图片留空*/
z-index:1000;
}
ul#comment_tree div.member img.user_photo{
display:block;
}
/*--------------------------------------------------------------------
Comments Box Layout
--------------------------------------------------------------------*/
ul#comment_tree div.comment{
width:448px; /*或者auto?*/
background:#fff;
float:left;
position:relative;
padding:1.0em 15px;
border: 1px solid #ddd;
}
ul#comment_tree h6.comment_date{
position:absolute;
left:-32px;
line-height:32px;
height:32px;
color:#ccc;
background:url(image/comment_arrow_bg.png) no-repeat left top;
padding-left:4em;
font-size:smaller;
font-weight:normal;
}
/*--------------------------------------------------------------------
Comments Content Copy Layout
--------------------------------------------------------------------*/
div.comment div.comment_content {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
margin-top: 6em;
z-index:999;
}
/*--------------------------------------------------------------------
Reply Comment Layout
--------------------------------------------------------------------*/
ul#comment_tree li ul.replies{
border-left:1px solid #ddd;
margin-left:120px;
padding-top:1em;
}
ul#comment_tree li ul.replies * ul.replies{ /*:KLUDGE: "*"指的是将所有ul.replies下的ul.replies,
这种方法替代了子选择器方法，从而可令IE6以下版本也可支持*/
margin-left:24px;
border-left:1px solid #ddd;
padding-top:1em;
}
ul#comment_tree li.reply{
background:url(image/comment_li_bg.gif) no-repeat left 2.5em;
padding-left:24px;
}
ul#comment_tree li.reply div.comment_wrapper{ /*comment外套，下一级是.member和.comment*/
position:relative;
}
ul#comment_tree li.reply div.member{ /*继承了第一个.member中的z-index，其作用是把用户头像置于
comment上方*/
position:absolute;
left:1.25em;
width:45px;
top:1.25em;
padding-right:0;
}
ul#comment_tree li.reply div.member img.user_photo{
width:45px;
height:45px;
}
ul#comment_tree li ul.replies h6.comment_date{
background:none;
left:70px;
top:32px;
padding-left:0;
}
ul#comment_tree li ul.replies li div.comment{
width:auto;
max-width:445px;
float:none;
padding-top:4em;
}
/*--------------------------------------------------------------------
Clean Floating Tag
--------------------------------------------------------------------*/
.clearfix:after{
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
.clearfix{
display:inline-block; /*fix IE-Mac*/
}
/* Hides from IE-Mac\*/
* html .clearfix{ height:1%;} /*fix IE6*/
.clearfix{ display:block;} /*reset display on IE*/
/*End hides from IE-Mac */