您的位置：首页 > Web前端 > HTML

漂亮的信息提示

2011-11-01 15:01 330 查看
 漂亮 用户体验友好信息提示HTML结构：
<div class="msg24">  <p class="ok"> 默认地址修改成功！ </p></div>
CSS样式：
.msg .error, .msg .stop, .msg .alert, .msg .attention, .msg .tips, .msg .ok, .msg .notice, .msg .question, .msg .help, .msg .small-help {
color:#404040;
background:url(msg_bg.png) no-repeat;
border:1px solid #ddd;
float:left;
padding:2px 10px 2px 23px;
line-height:18px;
}
.msg .error {
	background-position:3px 3px;
	border-color:#ff8080;
	background-color:#fff2f2;
}
.msg .stop {
	background-position:3px -47px;
	border-color:#ff8080;
	background-color:#fff2f2;
}
.msg .alert {
	background-position:3px -97px;
	border-color:#ff8c40;
	background-color:#fff5f6;
}
.msg .attention {
	background-position:3px -147px;
	border-color:#40b3ff;
	background-color:#e5f5ff;
}
.msg .tips {
	background-position:3px -197px;
	border-color:#ffcc7f;
	background-color:#ffffe5;
}
.msg .ok {
	background-position:3px -247px;
	border-color:#4dbf00;
	background-color:#f0ffe5;
}
.msg .notice {
	background-position:5px -295px;
	border-color:#40b3ff;
	background-color:#e6f5ff;
}
.msg .question {
	background-position:3px -347px;
	border-color:#bfbfbf;
	background-color:#f2f2f2;
}
.msg .small-help {
	background-position:5px -1095px;
	border-color:#fff;
	background-color:#fff;
}
.msg .help {
	background-position:3px -1197px;
	border-color:#fff;
	background-color:#fff;
}
.msg24{ padding-left:50px;}
.msg24 .error, .msg24 .attention, .msg24 .tips, .msg24 .ok, .msg24 .question {
	font-size:14px;
	font-weight:bold;
color:#404040;
background:url(msg_bg.png) no-repeat;
border:1px solid #ddd;
	padding:17px 10px 17px 56px;
	line-height:22px;
	width:450px;
}
.msg24 .error {
	background-position:12px -388px;
	border-color:#ff8080;
	background-color:#fff2f2;
}
.msg24 .attention {
	background-position:12px -488px;
	border-color:#40b3ff;
	background-color:#e5f5ff;
}
.msg24 .tips {
	background-position:15px -888px;
	border-color:#ffcc7f;
	background-color:#ffffe5;
}
.msg24 .ok {
	background-position:12px -988px;
	border-color:#4dbf00;
	background-color:#f0ffe5;
}
.msg24 .question {
	background-position:12px -788px;
	border-color:#bfbfbf;
	background-color:#f2f2f2;
}
.msg .naked, .msg24 .naked {
	border:none;
	background-color:transparent;
}
.msg24 .naked-tips {
	background-position:15px -688px;
}
.msg24 .naked-ok {
	background-position:12px -588px;
}
.msg:after, .msg24:after {
	content:'\0020';
	display:block;
	height:0;
	clear:both;
}
.msg, .msg24
{ *zoom:1;}
 
调用方法：
 /// <summary>/// msgIco  error,stop, alert,attention,tips, ok, notice, question,help, small-help 信息提示/// </summary>/// <param name="msgIco"></param>/// <param name="msgText"></param>/// <returns></returns>public static string ShowMsg(string msgIco, string msgText){string html = "<div class=\"msg24\"><p class=\"" + msgIco + "\"> " + msgText + " </p></div>";return html;}LiteralMsg.Text = CommonHelper.ShowMsg("ok", "更新成功！");
 
附件：

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                string
                                                class
                                                html
                                                border
                                                div
                                                url
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航