RSS
热门关键字:  CSS教程  CSS布局  CSS样式  CSS hack  CSS JS
当前位置 :| 主页>CSS实例>

一个供CSS初学者练手的作业需求

来源:cssplay 作者:cssplay 时间:2008-03-22 点击:

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

一个供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>


最新评论共有 0 位网友发表了评论
发表评论
评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名: 密码:
匿名?
注册
热点实例