zoukankan      html  css  js  c++  java
  • 不用css样式表和背景图片实现圆角矩形,超简洁!

    当网站页面的整体布局设计好后,接下来有很多细节的实现是很让人头疼的。其中之一就是圆角矩形的实现。

    在网上看了很多圆角矩形的实现方法,基本有两种,一种是用纯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
    实现代码:

    JavaScript code
     
    ?
    1
    Nifty("div#content,div#nav");



    2.与背景图片完美结合:
    示例:http://www.sz137.com/sz137/demo3.html
    实现代码:

    JavaScript code
     
    ?
    1
    Nifty("div#box","transparent");



    3.圆角导航栏:
    示例1:http://www.sz137.com/sz137/demo4_1.html
    实现代码:[code]Nifty("ul#nav a","small transparent top");[/code]

    示例2:http://www.sz137.com/sz137/demo4_2.html
    实现代码:

    JavaScript code
     
    ?
    1
    Nifty("ul#nav a","top");



    4.圆角按钮:
    示例:http://www.sz137.com/sz137/demo5.html
    实现代码:

    JavaScript code
     
    ?
    1
    Nifty("ul#nav a","small transparent top");



    5.右上角不要圆角,固定高度:
    示例:http://www.sz137.com/sz137/demo6.html
    实现代码:

    JavaScript code
     
    ?
    1
    Nifty("div#about li","tl bottom big fixed-height");



    6.same-height属性:
    示例:http://www.sz137.com/sz137/demo7.html
    实现代码:

    JavaScript code
     
    ?
    1
    Nifty("div#content,div#nav","same-height");
  • 相关阅读:
    Linux
    Monkey命令
    ADB命令
    DOS命令
    列表
    函数
    文件读写及实操项目
    Selenium2自动化——初体验
    新开淘宝店怎么提升信誉,是不是真的要刷钻?
    JSFL:导入根文件夹将所有图片添加库链接导出swf
  • 原文地址:https://www.cnblogs.com/SJP666/p/4678752.html
Copyright © 2011-2022 走看看