<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net</title> <style type="text/css"> <!-- * {font-size:13px;font-family:Arial;} #nav li {list-style:none; width:200px; margin-top:5px;padding:4px 6px;} #nav li a {text-decoration:none; color:#666;} #nav li a:hover {color:#000;} .aa {border-top:4px solid #7BC110; background:#be6;} .bb {border-top:4px solid #ff9900; background:#fc3;} .cc {border-top:4px solid #ff66ff; background:#fcf;} --> </style> </head> <body> <ul id="nav"> <li class="aa">CSS Templates Free Download </li> <li class="bb">CSS WebSites Showcase </li> <li class="cc">CSS Web Design Article </li> </ul> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
韓國網站的設計風格特徵鮮明，色彩明快，現在越來越多的人正在模仿這種風格。
韓國風格的網站設計思路之所以受到大家的喜歡，因為其色彩變化豐富，韓國風格的網站有一個最明顯的特點就是對於表格或是標題列常會加上橫或豎的一條色帶。我們平常是常過圖象圖片軟體來製作這樣的效果，圖片體積大，下載較慢。我們完全可以用CSS來做這樣的風格，因為用CSS只是對樣式定義，不需要應用圖片，下載速度會大大加快。
首先我們定義了清單項目，寬度外邊距及內邊距。再設定連結文字的樣式。我們使用類aa、bb、cc來定義不同清單項目的色彩，在這三個類的定義中，我們定義了上邊框為4px。也就是韓國風格中最常見的色帶。
