当网站页面的整体布局设计好后,接下来有很多细节的实现是很让人头疼的。其中之一就是圆角矩形的实现。
在网上看了很多圆角矩形的实现方法,基本有两种,一种是用纯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
实现代码:
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 欢迎转载!
|
相关推荐
div+css无图片实现圆角矩形(兼容Firefox)
采用纯css实现圆角矩形的方法。付源码及代码讲解。
css_圆角矩形 css_圆角矩形 css_圆角矩形
用CSS实现的矩形圆角,虽然CSS能实现圆角矩形,但是还是建议大家用图片
css3实现圆角矩形 使用border-radius实现圆角,兼容到IE6
css层叠样式表手册_css样式表_css层叠样式表_css样式表下载css层叠样式表手册_css样式表_css层叠样式表_css样式表下载css层叠样式表手册_css样式表_css层叠样式表_css样式表下载
现在网页上用到圆弧的地方一般都是图片,这里介绍一种用CSS作的圆角矩形,用编程的方法在网页上生成圆弧。一开始在网上发现圆弧不是图片的时候真的惊呆了,后来就仔细研究了别人做的东西,终于弄明白了,大家只要看...
主要介绍了使用Div+CSS纯图片实现圆角矩形的方法小结,CSS3中用代码绘制圆角矩形非常方便,而本文要介绍的则是利用图片来实现兼容性更强的方法,需要的朋友可以参考下
漂亮的图片的村托,让您的网页更唯美,比如说做一个电子相册,加上这个圆角矩形的css代码就很漂亮了
css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表
css样式表手册->web前端样式开发->中文
运用css技术就能显示出圆角的效果,避免用图片在ie6中显示边边角角的问题,与图片透明不足的效果交替。
无聊时写的,实现了一个可搜索的下拉控件和圆角矩形,代码很简单,高手请勿喷。无聊时写的,实现了一个可搜索的下拉控件和圆角矩形,代码很简单,高手请勿喷。无聊时写的,实现了一个可搜索的下拉控件和圆角矩形,...
css样式表代码
圆角矩形CSS样式四种 看了就知道,我也是收录的, 所以是我把别人的和自己的整合了一下.
CSS样式表中文手册.zip CSS样式表中文手册 CSS样式表 CSS样式手册 CSS样式 CSS
CSS层叠样式表中文手册CSS层叠样式表中文手册CSS层叠样式表中文手册CSS层叠样式表中文手册CSS层叠样式表中文手册CSS层叠样式表中文手册CSS层叠样式表中文手册CSS层叠样式表中文手册CSS层叠样式表中文手册CSS层叠样式...
形考任务四 活动1:采用CSS样式来设置背景、标题和段落的颜色。