CSS圆角区块容器生成器- CSS样式表 - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS圆角区块容器生成器

CSS样式表: 网页设计关于WEB标准的相关问题汇总; 项目管理:交互-设计-制作三个角色的组合; 学习CSS制作网页总结的一些经验; 多个CSS样式表争夺特定选择符的控制权; 网页设计制作CSS实现隔行换色两种方法; CSS教程:DIV底部放置文字; CSS教程:CSS命名参考; CSS教程:控制网页文件大小通过精简CSS实现; CSS教程:关于文字溢出问题的研究; 符合web标准的嵌入Flash的方法; 学习WEB标准必备的四项技能; CSS对表格单元格强制换行和不换行; CSS制作符合网站标准的细线表格; 区分IE6,IE7和firefox的CSS hack; CSS教程:学习CSS的继承性; CSS教程:CSS兼容的技巧; CSS教程:浮动元素对浏览器的支持; 闭合浮动元素让CSS代码更规范; 深入分析网页CSS隐藏文字和以图换字技术; 看懂《CSS hack浏览器兼容一览表》

No. « ‹ 10 11 12 13 › »

技术文章搜索

关键字

CSS样式表中的 CSS圆角区块容器生成器

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 108 ::

收藏到网摘: n/a

HTML标记容器高度100%的绝对定位布局

当然还是用图片，只是可以生成自己所需色彩的图片。

http://www.neuroticweb.com/recursos/css-rounded-box/

将上面生成的图片和下面代码存在同一个文件夹下：

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>CSS圆角区块容器</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.rbroundbox { background: url(nt.gif) repeat; }
.rbtop div { background: url(tl.gif) no-repeat top left; }
.rbtop { background: url(tr.gif) no-repeat top right; }
.rbbot div { background: url(bl.gif) no-repeat bottom left; }
.rbbot { background: url(br.gif) no-repeat bottom right; }
/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 50%; margin: 1em auto; }
</style>
</head>
<body>
<div class="rbroundbox"> <div class="rbtop"><div></div></div> <div class="rbcontent"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ornare ultricies libero. Donec fringilla, eros at dapibus fermentum, tellus tellus auctor erat, vitae porta magna libero sed libero. Mauris sed leo. Aliquam aliquam. Maecenas vestibulum. </div> <div class="rbbot"><div></div></div>
</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

HTML标记容器高度100%的绝对定位布局

CSS样式表 中的 CSS圆角区块容器生成器

评论 (0) All

CSS样式表中的 CSS圆角区块容器生成器