Message.CSS示范脚本

admin

普通设计：
.MessageBorder{ text-align:left;}
.MsgColor0{ border:1px solid #dfdfdf; background:#f8f8f8; padding:4px;}
.MsgColor1{ padding:5px;}
.MsgList{ font-weight:bold; background:url(men.gif) no-repeat left center; text-indent:20px;}
.MsgText .face{ height:18px; vertical-align:middle; margin-right:5px;}
.MsgReply{ font-weight:bold; background:url(reply.gif) no-repeat left center; text-indent:20px;}
.MessageTable{ padding-left:62px; font-size:16px; font-weight:bold; background:url(write.jpg) no-repeat left 0px; margin:20px 0; text-align:left;}
.MessageTable red{ font-size:16px; color:#f00;}
.MsgName,.MsgContact,.MsgContent{ clear:both;}
.MsgLeft{ float:left; display:block; width:60px; padding-right:10px; text-align:right;}
.MsgRight{ float:left; display:block; clear:right; margin-bottom:10px;}
.MsgRight input[type=text]{ width:200px;}
.MsgRight textarea{ width:200px; height:200px}
.MsgSubmit{ margin:8px 0px; display:block; clear:both;}
.MsgFace img{ width:18px; vertical-align:middle;}

优化设计：
红色部在后台需定义菜单英文名为Message或CSS Class值为Message

.body .Message{ background:url(office.jpg) no-repeat left top; background-size:100% auto; padding-top:220px;}
.MessageBorder{ text-align:left;}
.MsgColor0{ border:1px solid #dfdfdf; background:#f8f8f8; padding:4px;}
.MsgColor1{ padding:5px;}
.MsgList{ font-weight:bold; background:url(men.gif) no-repeat left center; text-indent:20px;}
.MsgText .face{ height:18px; vertical-align:middle; margin-right:5px;}
.MsgReply{ font-weight:bold; background:url(reply.gif) no-repeat left center; text-indent:20px;}
.MessageTable{ padding-top:30px; padding-left:62px; font-size:20px; font-weight:bold; background:url(write.jpg) no-repeat left 0px; margin-bottom:20px;}
.MessageTable red{ font-size:20px; color:#f00;}
.MsgName,.MsgContact,.MsgContent{ clear:both;}
.MsgRight{ margin-bottom:10px;}
.MsgRight input[type=text]{ width:100%; border-radius:5px; border:1px solid #ccc;}
.MsgRight textarea{ width:100%; height:280px; border-radius:5px; border:1px solid #ccc;}
.MsgSubmit{ margin:8px 0px; display:block; text-align: center; clear:both;}
.MsgFace img{ width:18px; vertical-align:middle;}