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

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

CSS样式表: CSS:提高网页在浏览器的渲染速度; css网页制作实用技巧9则; 思考Web站点设计对类以及id的命名方式; CSS教程:关于网页图片的属性; CSS教程:元素层叠级别及z-index; div css在思路和流程上实现结构与表现的分离; CSS入门教程:网页首字下沉; IE6、IE7和FF的最简单的hack技巧; 跨浏览器实现float:center; css技巧:经典CSS使用技巧几则; CSS教程:legend标签设定宽度; 网站进行W3C XHTML1.0验证的经验; CSS教程：网页颜色的几种表示; 网页CSS背景图片使用的测试结果; CSS网页布局:网页页面结构化; SPAN和DIV,Class与ID的区别汇总; xhtml css网页制作中问题解决的方式; div css与xhtml css是什么意思?; CSS样式表优化更整洁而简短; CSS设计网站导航菜单的优势

No. « ‹ 5 6 7 8 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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圆角区块容器生成器