当前位置：首页 → 问答吧 → 很漂亮的“圆角方框”教程

很漂亮的“圆角方框”教程

时间：2008-10-28

来源：互联网

圆角方框教程

这个教程是现实一个圆角的方框，先看完成的效果图吧!

效果：

看到效果之后有没有心动啊！？那我们现在就开始吧！

1.HTML代码结构

因为我们并不知道内容的多少，所以有必要把它设计成可伸缩的！先看我们的HTML代码吧！
<html>
<head>

<title>Box</title>
</head>
<body>

<div class="box">

<h3>Gifts and Special Offers</h3>

<ul>

<li><a href="">Purchase Gift Subscription</a></li>

<li><a href="">Redeem Gift Subscription</a></li>

<li><a href="">View Purchase Histroy</a></li>

</ul>

</div>
</body>
</html>

没有样式的效果（有点丑）：

2.准备图片

首先，看框头部分，我们需要一张能够容纳更大或者更多行数的图片，因为我们要把它作为h3的背景。

我们把它做得足够高，这样可以容纳更多的行数！注意我们的标题图片没有底边线，因为我们等下要用css来实现底边线。

第二张图是内容框的背景图片，跟第一张图片一样，我们也把它做得足够的高，以用来容纳更多的内容！！

3.应用样式

我们已经准备好HTML代码和图片了！现在我们就用css把他们连接起来！！

我们给框设定一个宽度：
.box {
  width: 273px;
}

现在我们将那两张图片引入进来。首先，先将div-bottom.gif设置为整个<div>标签的背景。
.box {
  width: 273px;
  background: url(img/div-bottom.gif) no-repeat bottom left;
}

先看看效果吧：

嗯！好像有点样子了！！

下一步我们引入框头的背景图片，将它顶部对齐！
.box {
  width: 273px;
  background: url(img/div-bottom.gif) no-repeat bottom left;
}

.box h3 {
  background: url(img/h3-bg.gif) no-repeat top left;
}

效果如下：

接下来，我们要加上框头底部的边线和加上padding,margin来使得外观更好看！
.box {
  width: 273px;
  background: url(img/div-bottom.gif) no-repeat bottom left;
}

.box h3 {
  margin: 0;
  padding:6px 8px 4px 10px;
  font-size:130%;
  border-bottom: 1px solid #E0CFAB;
  background: url(img/h3-bg.gif) no-repeat top left;
}

效果如下：

嗯，现在离我们的目标越来越近了！！现在我们还有最后一步，就是把列表的点去掉，并且在周围加上一些padding。

.box {
  width: 273px;
  background: url(img/div-bottom.gif) no-repeat bottom left;
}

.box h3 {
  margin: 0;
  padding:6px 8px 4px 10px;
  font-size:130%;
  border-bottom: 1px solid #E0CFAB;
  background: url(img/h3-bg.gif) no-repeat top left;
}

.box ul {
  margin: 0;
  padding:14px 10px 14px 10px;
  list-style: none;
}

.box li {
  margin: 0 0 6px;
  padding: 0;
}

看效果：

还不错吧～～～有兴趣的可以自己做些好看的框框！！把它贴在这里做展览吧！！多谢大家支持！！！

作者: liexusong 发布时间: 2008-10-28

怕大家看不清，所以制作了PDF文件还有源代码！！