“五图像”二维滑动门经典圆角框

先看一下效果图：

利用这种方法做出的圆角框其正文是独立的，可以自由的设置样式，每个圆角框可放置不同的栏目，并且设置其样式，还能保证圆角框显示正确，简单的说，就是实现圆角框的本身与内容完全分离。

下面看下具体实现的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
#rounded{
margin:0;
padding:0;
width:600px;
background:#ccc url(images/lt.gif) no-repeat ;

}
#rounded h3{
margin:0;
padding:30px 0 86px 10px;
background:url(images/rt.gif) no-repeat right top ;

}
#rounded div.main{
margin:-6em 0 0 0;
padding:20px 20px 0px 10px;
background: url(images/r.gif) repeat-y right top;

}
#rounded div.footer{

margin:0;
background: url(images/lb.gif) no-repeat left bottom;

}
#rounded div.footer span{
display:block;
margin:0;
padding:0 0 62px 10px;
background:url(images/rb.gif) no-repeat right bottom;
}

</style>
</head>

<body>

<div id="rounded">
<h3>Fixed Rounded </h3>
<div class="main">
   <p><span>这是一个固定宽度的圆角框，由于是固定宽度，因此制作起来容易和简单很多。这个圆角框上的上下随着内容增多可以自由伸展，圆角不会被破坏。的身高多少撒还是说的故事大赛的概述倒萨公司的广东省的上的士大夫撒上的都是打发士大夫时发生地方萨芬大法师这是一个固定宽度的圆角框，由于是固定宽度，因此制作起来容易和简单很多。这个圆角框上的上下随着内容增多可以自由伸展，圆角不会被破坏。的身高多少撒还是说的故事大赛的概述倒萨公司的广东省的上的士大夫撒上的都是打发士大夫时发生地方萨芬大法师这是一个固定宽度的圆角框，由于是固定宽度，因此制作起来容易和简单很多。这个圆角框上的上下随着内容增多可以自由伸展，圆角不会被破坏。的身高多少撒还是说的故事大赛的概述倒萨公司的广东省的上的士大夫撒上的都是打发士大夫时发生地方萨芬大法师
    </span>
</p>
   </div>
   <div class="footer">
   <span>这是脚信息</span>
</div>
</div>
</body>
</html>

posted on 2011-10-17 10:36 92筱静阅读(118) 评论(0) 收藏举报