不用css样式表和背景图片实现圆角矩形,超简洁!
2012-03-31 13:13
344 查看
当网站页面的整体布局设计好后,接下来有很多细节的实现是很让人头疼的。其中之一就是圆角矩形的实现。 在网上看了很多圆角矩形的实现方法,基本有两种,一种是用纯css实现,不需要背景图片;另一种是用背景图像实现。但是,不管是哪一种,都有一个共同的缺点:需要使用很多代码来嵌套,而这些代码对搜索引擎来说毫无意义。 在《css cookbook》一书中介绍了一种实现圆角矩形十分简洁的方法,那就是用Nifty Corners Cube。 先看一个简单的例子:http://www.sz137.com/sz137/demo1.html 查看源码发现实现圆角矩形的代码: <script type="text/javascript" src="niftycube.js"></script> <script type="text/javascript"> window.onload=function(){ Nifty("div#box","big"); } 复制代码 如此简单!当页面圆角矩形很多的时候这种简洁就更显而易见了。 下***体介绍Nifty Corners Cube的使用: Nifty Corners Cube(以下简称Nifty)是基于GNU GPL licence的自由软件,整个程序代码不过10KB,包括一个JS文件和一个CSS文件。使用Nifty不需要背景图片,它会自动根据你的背景颜色匹配出圆角。使用Nifty会用到两组参数:第一组是CSS选择符(CSS Selector),用来指定哪些单元(elements)需要改成圆角矩形;第二组是Nifty提供的内部参数,用来定义圆角样式,方位等。 第一组参数可以是: 这里需要注意的是,若你的导航栏使用div标签,CSS选择符是#head .navigation时,参数的写法应该是div.navigation。 第二组参数: 下面看一些例子: 1.同时作用于两个层: 示例:http://www.sz137.com/sz137/demo2.html 实现代码: Nifty("div#content,div#nav"); 复制代码 2.与背景图片完美结合: 示例:http://www.sz137.com/sz137/demo3.html 实现代码: Nifty("div#box","transparent"); 复制代码 3.圆角导航栏: 示例1:http://www.sz137.com/sz137/demo4_1.html 实现代码: Nifty("ul#nav a","small transparent top"); 复制代码 示例2:http://www.sz137.com/sz137/demo4_2.html 实现代码: Nifty("ul#nav a","top"); 复制代码 4.圆角按钮: 示例:http://www.sz137.com/sz137/demo5.html 实现代码: Nifty("ul#nav a","small transparent top"); 复制代码 5.右上角不要圆角,固定高度: 示例:http://www.sz137.com/sz137/demo6.html 实现代码: Nifty("div#about li","tl bottom big fixed-height"); 复制代码 6.same-height属性: 示例:http://www.sz137.com/sz137/demo7.html 实现代码: Nifty("div#content,div#nav","same-height"); 复制代码 其它示例: http://www.sz137.com/sz137/demo8.html http://www.sz137.com/sz137/demo9.html http://www.sz137.com/sz137/demo10.html http://www.sz137.com/sz137/demo11.html http://www.sz137.com/sz137/demo12.html http://www.sz137.com/sz137/demo13.html 下载地址: http://www.sz137.com/sz137/NiftyCube.rar 欢迎转载! |
相关文章推荐
- 利用“Nifty Corners Cube”不用css样式表和背景图片实现圆角矩形,超简洁
- 不用css样式表和背景图片实现圆角矩形,超简洁!
- 不用css样式表和背景图片实现圆角矩形
- CSS实例(八):不用图片实现宽度、高度自定的圆角矩形
- 安卓学习笔记---自定义ImageView实现图片圆形 ,椭圆和矩形圆角显示(矩形圆角加边框)
- Android开发之自定义圆角矩形图片ImageView的实现
- Android自定义ImageView实现图片缩放滑动,双击放大缩小,多点触控旋转,圆角矩形,圆形和仿刮刮卡效果
- PB实现圆角矩形图片按钮
- android实现圆角矩形背景的方法
- 自定义RelativeLayout 实现图片圆角背景
- android实现图片与背景的圆角
- 不使用背景图片实现圆角效果
- 如何通过代码创建圆角矩形和图片背景选择器
- Android自定义ImageView实现图片圆形 ,椭圆和矩形圆角显示
- 实现了不用图片的圆角
- HTML+CSS实现圆角矩形(不需要图片)——抄自GTalk
- Android-->圆角图片,圆角任意View,圆角父布局Layout(任意形状的View且超简洁实现)
- Android实现自定义ImageView的圆角矩形图片效果
- 不用js实现背景图片的切换
- 用JAVA awt实现Image Asset Studio生成圆形或圆角矩形图片功能