|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
增加了开发风险,一个CSS文件的出错,可能导致整站崩溃,惨不忍睹,大量的访问链接同时调用静态的css文件,可能造成并发错误,调用失败。下载上去本人看一下效果吧,假如必要圆角的话,不必你会忏悔的!
点击下载此文件
当网站页面的全体结构计划好后,接上去有良多细节的完成是很让人头疼的。个中之一就是圆角矩形的完成。
在网上看了良多圆角矩形的完成办法,基础有两种,一种是用纯css完成,不必要背景图片;另外一种是用背景图象完成。可是,不论是哪种,都有一个配合的弱点:必要利用良多代码来嵌套,而这些代码对搜刮引擎来讲毫偶然义。
在《csscookbook》一书中先容了一种完成圆角矩形非常简便的办法,那就是用NiftyCornersCube。
先看一个复杂的例子:<scripttype="text/javascript"src="niftycube.js"></script>
<scripttype="text/javascript">
window.onload=function(){
Nifty("div#box","big");
} 云云复杂!当页面圆角矩形良多的时分这类简便就更不言而喻了。
上面详细先容NiftyCornersCube的利用:
NiftyCornersCube(以下简称Nifty)是基于[url=http://baike.baidu.com/view/130692.htm]GNUGPLlicence[url]的自在软件,全部程序代码不外10KB,包含一个JS文件和一个CSS文件。利用Nifty不必要背景图片,它会主动依据你的背景色彩婚配出圆角。利用Nifty会用到两组参数:第一组是CSS选择符(CSSSelector),用来指定哪些单位(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#nava","smalltransparenttop"); 示例2:http://www.sz137.com/sz137/demo4_2.html
完成代码:4.圆角按钮:
示例:http://www.sz137.com/sz137/demo5.html
完成代码:Nifty("ul#nava","smalltransparenttop"); 5.右上角不要圆角,流动高度:
示例:http://www.sz137.com/sz137/demo6.html
完成代码:Nifty("div#aboutli","tlbottombigfixed-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
我在这里借用了新浪博客的盒子来说明下,大家可能发现了,其实边框border往往就只有1px的宽度,谁叫它是边框呢。 |
|