用Highchart畫一個小圖玩下動一下參考遺留sql問題參考代碼

完全是為了玩兒的哈。。。just enjoy it 。。。正如計算機科學的鼻祖高德納（donald knuth）所說，程式設計是一門藝術，而不是一門科學!

雖然我離這個比較遠，然得努力啊

<a target="_blank" href="http://coolshell.cn/articles/6840.html">css 布局:40個教程、技巧、例子和最佳實踐</a>

這篇文章解釋了如何實作一個基于的html/css來設計一個簡單的帶有基本要素（頂部的logo條，導覽列，文本區，定義分類的中部欄，右邊側欄插入google的120x600的廣告區）的固定三欄頁面布局。

基本上大部分都是"死"的! 變動态的, 還是找個mvc架構研究下, 可能偶爾工作中需要用!

// 擦，直接連mysql得了，哈哈

step 1: html file structure

create a new page and copy and past this code within &lt;body&gt; tag:

&lt;div id="container"&gt;

&lt;div id="topbar"&gt;top bar/logo layer&lt;/div&gt;

&lt;div id="navbar"&gt;

&lt;a href="index.html?home"&gt;home&lt;/a&gt;

&lt;a href="index.html?about"&gt;about&lt;/a&gt;

&lt;a href="mailto:[email protected]"&gt;contact me&lt;/a&gt;

&lt;/div&gt;

&lt;div id="main"&gt;

&lt;div id="column_left"&gt;

&lt;h1&gt;post title&lt;/h1&gt;

&lt;h2&gt;12 january 2008&lt;/h2&gt;

&lt;p&gt;add your text here&lt;/p&gt;

&lt;div id="column_right"&gt;

&lt;h3&gt;categories&lt;/h3&gt;

right content to add categories, web 2 widget (twitter, mybloglog recent readers...)

&lt;div id="column_right_adsense"&gt;

&lt;h3&gt;adsense&lt;/h3&gt;

adsense 120 x 600

&lt;!-- don't remove spacer div. solve an issue about container height --&gt;

&lt;div class="spacer"&gt;&lt;/div&gt;

&lt;div id="footer"&gt;© 2008 information about your site&lt;/div&gt;

step 2: css file

now, create a new css file and link it into index.html

/* ------------------------------

html redefine tags

------------------------------ */

body{font-family:arial, helvetica, sans-serif; font-size:12px;margin:20px; padding:0;}

input, form, textarea

h1, h2, h3, h4, h5, h6{margin:0; padding:0;}

h1{font-size:18px;}

h2{font-size:14px; color:#999999;}

h3{font-size:13px; border-bottom:solid

1px #dedede; padding:4px 0;margin-bottom:10px;}

a:link, a:visited{color:#0033cc;}

a:hover{text-decoration:none;}

page structure

/* #container has an absolute width (780 pixel) */

#container{width:780px; margin:0 auto;}

#topbar{width:auto; display:block; height:60px;}

#navbar{width:auto; display:block; height:28px;}

#navbar a{heigth:28px; line-height:28px; padding:0

8px;display:inline;}

#main{width:auto; display:block; padding:10px

0;}

#column_left{width:460px; margin-right:20px; float:left;}

#column_right{width:160px; margin-right:20px; float:left;}

#column_right_adsense{width:120px; float:left;}

div.spacer{clear:both; height:10px; display:block;}

#footer{width:auto; display:block; padding:10px

0; font-size:11px;color:#666666;}

custom classes

/* add here your custom classes ... */