不用图像构造圆角框

Example eight: final example

This is the final example wich uses some of the techniques we saw in the previous ones. In this case, I did not use embedded css or javascript. The head section contains the following lines:

<link rel="stylesheet" type="text/css" href="roundedPage.css">

<link rel="stylesheet" type="text/css" href="niftyCorners.css">

<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">

<script type="text/javascript" src="nifty.js"></script>

<script type="text/javascript" src="final.js"></script>

The final.js contains all the javascript calls, let's see its content:

window.onload=function(){

 if(!NiftyCheck())

  return;

 RoundedTop("div#container","#FFF","#e7e7e7");

 RoundedBottom("div#container","#FFF","#E9F398");

 RoundedTop("ul#nav li","transparent","#E8F0FF");

 Rounded("div#box","#C0CDF2","#E4E7F2");

 Rounded("div#minipics li","#C0CDF2","#FFF");

 RoundedTop("div.gradient","#C0CDF2","#B8B8B8");

 RoundedBottom("div.gradient","#C0CDF2","#ECECF2");

}

A good practice is in fact avoiding using embedded javascript or CSS in the head section.

Quite easy, isn't it? If we'd use one of the css techiques based on background images, probably we'd used 18 images, maybe some extra and non-semantic wrapper and a lot of css declaration. Could you imagine the kilobytes that were spared? Probably, about 18-20Kb or so.