|
HTML结构层： 如同我们在第一章中模型所见，保持结构不变。 CSS样式层：（只写关键代码） 将上面的几句代码进行合并，如下所示： 代码 1 .sharp b.b2{background-position:left top;} 2 .sharp b.b3{background-position:left -1px;} 3 .sharp b.b4{background-position:left -2px;} 4 .sharp .content h3{background-position:left -4px;} 和第一章中同样的道理，我们肯定要在各个不同的块框中有不同的背景图片的变化，也就是说，我们也要实现不同的换肤方案，当一个页面要多次调用同一个圆角框时，也可以让它们有些丰富的变化。实现不同的风格。OK，没问题，你只需要简单的将下面的样式中的背景图片的路径改变一下就可以了。 代码 .color1 .b2,.color1 .b3,.color1 .b4,.color1 h3{background:url(images/bg1.gif) repeat-x;} 你可以实现不同的颜色方案，就看你的设计师给你多少张不同图片了。 一种风格的定制也是一件简单的事情： 代码 1*颜色方案一,绿色风格----------------------------------------*/ 2 3/*边框色*/ 4.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#A0C044;} 5.color1 .b1,.color1 .b8{background:#A0C044;} 6.color1 h3{border-bottom:1px #679800 solid;} 7 8/*图片路径*/ 9.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3{background:url(images/bg1.gif) repeat-x;} 10 11/*文字内容背景色*/ 12.color1 .b5,.color1 .b6,.color1 .b7{background:#FFF;} 你只需要复制上面的代码，简单修改一下边框色，背景色，图片路径就变成你想要的风格了，是不是很简单呢？然后在你想应用样式的容器上定义这个color1类名即可。 在我的演示模型中，我定义了9种风格的变化，看看有没有适合你需要，直接复制就可以使用了，祝您用得开心！
为了演示效果，本模型的宽度值全部采用百分比实现的，你可以随意伸缩宽度，看看它能否适应弹性的变化。
本模型在以下浏览器中完美通过： IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。 点击这儿下载完整的压缩包：Demo (责任编辑：admin) |