下图是一个错误对话框,请按照设计出相应的HTML及CSS代码。

这个图片看起来比较简单,但做起来还是比较麻烦的,适合入门级,中级水平的朋友试手。
注意点:
1 渐变背景
2 圆角
3 宽度是固定的 但高度会随内容增加而增高
CSS代码:
.error-msg-panel{width:500px;height:288px;margin:100px 200px;}
.error-msg-panel .rc{background:url(i/mod-panel-msg-rc-nw.gif) no-repeat 0 0;}
.error-msg-panel .rc div{background:url(i/mod-panel-msg-rc-ne.gif) no-repeat right top;height:8px;font-size:0;}
.error-msg-panel .rc-bd{background:url(i/mod-panel-msg-rc-w.gif) repeat-y 0 0;}
.error-msg-panel .rc-bc{background:url(i/mod-panel-msg-rc-w.gif) repeat-y right 0;padding:0 4px;}
.error-msg-panel .rc-ft{background:url(i/mod-panel-msg-rc-sw.gif) no-repeat 0 bottom;}
.error-msg-panel .rc-ft div{background:url(i/mod-panel-msg-rc-se.gif) no-repeat right bottom;font-size:0;height:8px;}
.error-msg-panel .ctnr{background:#fefefe url(i/mod-panel-msg-bg.gif) repeat-x 0 bottom;min-height:245px;_height:245px;font-size:15px;padding:40px 0 15px 0;}
.error-msg-panel .ctnr h2{margin:0 50px 15px 50px;font-size:15px;font-weight:bold;background:url(i/mod-ico-alert.gif) no-repeat 0 -30px;padding-left:40px;width:280px;line-height:150%;}
.error-msg-panel .ctnr ul{margin:0 50px 30px 90px;list-style:none;}
.error-msg-panel .ctnr li{line-height:150%;}
.error-msg-panel .ctnr a.close{text-decoration:none;display:block;width:58px;color:#3c3c3c;background:url(i/mod-button-2.gif) no-repeat 0 0;text-align:center;letter-spacing:2px;padding:4px 0 5px 0;*padding:6px 0 4px 0;margin:0 15px 0 415px;}
.error-msg-panel .ctnr a.close:hover{background-position:0 -30px;text-decoration:none;}
HTML代码:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css.css" type="text/css" />
<div class="error-msg-panel">
<div class="rc"><div></div></div><div class="rc-bd"><div class="rc-bc">
<div class="ctnr">
<h2>对不起!无法找到符合你条件的歌手,建议你尝试:</h2>
<ul>
<li>1.检查是否有差别字或拼字错误。</li>
<li>2.改用其他相关的字词重新搜索。</li>
<li>3.尝试扩大搜索范围</li>
<li>4.浏览歌手目录或唱片目录</li>
<li>5.搜索相关网页</li>
</ul>
<a href="" class="close"><span>关闭</span></a>
</div>
</div></div><div class="rc-ft"><div></div></div>
</div>

