Szykowne narożniki, czyli Nifty Corners - Szykowne narożniki - Nifty Corners |
![]() |
![]() |
Strona 14 z 15 Przykład dziesiąty: Layout z niftyDobrnęliśmy więc do ostatniego przykładu, layoutu używającego zaokrąglonych narożników. Naprawdę sprawiło mi wiele radości przygotowanie tego przykładu bez użycia obrazków, tylko nifty corners. W tym przypadku nie użyłem osadzonego CSS’a lub skryptu Java. Sekcja nagłówka zawiera następujące linie: <link rel="stylesheet" type="text/css" href="niftylayout.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="layout.js"></script> Plik layout.js zawiera wszystkie wywołania skryptu Java, zobaczmy zawartość: window.onload=function(){ if(!NiftyCheck()) return; Rounded("div#header","bottom","#D6DEEC","#84B7FF","smooth"); Rounded("div#header h1","bottom","#84B7FF","#657DA6","small smooth"); Rounded("div#content","tl bottom","#D6DEEC","#FFF","smooth"); Rounded("div#nav","tr bottom","#D6DEEC","#95B3DE","smooth"); Rounded("div#sidenotes","all","#D6DEEC","#B1C0D5","smooth"); Rounded("form","all","#D6DEEC","#B4CEF7","smooth"); Rounded("blockquote","tr bl","#FFF","#CDFFAA","border #88D84F"); Rounded("div#relax","all","#FFF","transparent"); Rounded("div#footer","all","#D6DEEC","#CCCCCC","small border #fff"); } Dobrą praktyką jest w rzeczy samej unikanie używania osadzania skryptów Java lub CSS w sekcji nagłówka. Jedna rzecz o ostatnim przykładzie: ciekawostką jest że uzyskaliśmy grube "nifty corners" wokół nagłówka poprzez zaokrągenie jednocześnie nagłówka i h1 wewnątrz nagłówka. Zanim zakończymy: Spróbuj zobaczyć jak będzie wyświetlana strona z wyłączonym skryptem Java, aby zobaczyć jak zatraca się jej wdzięk. Przygotowując ten przykład, zacząłem włąśnie od takiego projektu. |
|
Zmieniony ( 26.06.2007. ) |
następny artykuł » |
---|