用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 ... */