前言
完全是为了玩儿的哈。。。just enjoy it 。。。正如计算机科学的鼻祖高德纳（Donald Knuth）所说，编程是一门艺术，而不是一门科学! 虽然我离这个比较远，然得努力啊
目的
主要是想学习下这里面的第一种布局, coolshell真是个好地方!
1-使用CSS完成三栏固定布局结构- 这篇文章解释了如何实现一个基于的HTML/CSS来设计一个简单的带有基本要素（顶部的logo条，导航条，文本区，定义分类的中部栏，右边侧栏插入google的120X600的广告区）的固定三栏页面布局。
初步折腾效果
基本上大部分都是"死"的! 变动态的, 还是找个MVC框架研究下, 可能偶尔工作中需要用!
test1.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="test1.css">
<link rel="shortcut icon" href="favicon.ico" />
<title>
I love Helen!
</title>
</head>
<body bgcolor="#8A8A8A">
<div id="container" >
<!--<div id="topbar">
Top
</div>-->
<div id="navbar" style="background:#696969; color:#FFF">
<a href="http://localhost/colin/test1.php">首页</a>
<a href="http://blog.csdn.net/lin_credible" target="_blank">关于colin</a>
<a href="mailto:linuxtaolinran@gmail.com">更多</a>
</div>
<div id="main" style="background:#CCCCCC; color:#000">
<div id="column_left">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#column_left').highcharts({
chart: {
type: 'column'
},
title: {
text: '配置下发结果统计'
},
subtitle: {
text: '目的: 动态跟踪'
},
xAxis: {
categories: [
'结果'
]
},
yAxis: {
min: 0,
title: {
text: '量(IP数)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table width="100">',
pointFormat: '<tr><td style="color:{series.color};padding:0;">{series.name}:</td>' +
'<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '成功',
data: [80]
}, {
name: '失败',
data: [10]
}, {
name: '下发中',
data: [20]
}]
});
});
</script>
<script src="./highcharts.js"></script>
</div>
<div id="column_right">
<h2>失败IP列表</h2>
<?php $fail = array('127.0.0.1','192.168.1.1','255.255.255.0','8.8.8.8','0.0.0.0');?>
<lo>
<?php foreach ($fail as $key) : ?>
<li><?php echo $key;?></li>
<?php endforeach; ?>
</lo>
</div>
<div id="column_right_adsense">
<h2>介绍</h2>
这里提供更快捷和已配置好的**入口!
<br>
<hr/>
<?php date_default_timezone_set('Etc/GMT-8');?>
<time <?php echo "datetime=".date("Y-m-d");?> class="icon">
<em><?php echo date("l");?></em>
<strong><?php echo date("F");?></strong>
<span><?php echo date("j");?></span>
</time>
</div>
<!-- Don't remove spacer div. Solve an issue about container height -->
<div class="spacer"></div>
</div>
<div id="footer">
<p> 版本@2014 作者:Colǐn[ux]-单引号</p>
</div>
</div>
</body>
</html>
动一下
data3.php
// 擦，直接连mysql得了，哈哈
test3.php
效果:
参考
[1]: 三栏固定布局的css；
[2]: 右边那个日历的css；
[3]: column_left里面的那个图表参考;
[4]: css-text-shadow(不过又没用了)；
[5]: how-to-load-mysql-results-to-highcharts-using-json
[6]: how-to-create-dynamic-x-axis-data-using-json
遗留sql问题
1. 如何让count(*)为null的时候返回0;
2. 存储过程如何返回多行?
参考代码
1. 三栏固定布局css步骤
Step 1: HTML file structure
Create a new page and copy and past this code within <body> tag:
<div id=
"container"
>
<div id= "topbar" >Top Bar/Logo Layer </div>
<div id= "navbar" >
<div id= "main" >
<div id=" column_left" >
<h1>Post Title </h1>
<h2>12 january 2008 </h2>
<p>Add your text here </p>
</div>
<div id=" column_right ">
<h3>Categories </h3>
Right Content to add Categories, web 2 widget (twitter, mybloglog recent readers...)
</div>
<div id= "column_right_adsense">
<h3>AdSense </h3>
Adsense 120 X 600
</div>
<!-- Don't remove spacer div. Solve an issue about container height -->
<div class=" spacer" ></div>
</div>
<div id=" footer" >© 2008 Information about your site </div>
</div>
<div id= "topbar" >Top Bar/Logo Layer </div>
<div id= "navbar" >
<a href="
index.html?home"
>Home
</a>
<a href= "index.html?about" >About </a>
<a href= "mailto:myemailaddres@email.com" >Contact me </a>
</div>
<a href= "index.html?about" >About </a>
<a href= "mailto:myemailaddres@email.com" >Contact me </a>
<div id= "main" >
<div id=" column_left" >
<h1>Post Title </h1>
<h2>12 january 2008 </h2>
<p>Add your text here </p>
</div>
<div id=" column_right ">
<h3>Categories </h3>
Right Content to add Categories, web 2 widget (twitter, mybloglog recent readers...)
</div>
<div id= "column_right_adsense">
<h3>AdSense </h3>
Adsense 120 X 600
</div>
<!-- Don't remove spacer div. Solve an issue about container height -->
<div class=" spacer" ></div>
</div>
<div id=" footer" >© 2008 Information about your site </div>
</div>
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 ;}
/* ------------------------------
CUSTOM CLASSES
------------------------------ */
/* Add here your custom classes ... */
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 ;}
#main{ width : auto ; display : block ; padding : 10px 0 ;}
#footer{ width : auto ; display : block ; padding : 10px 0 ; font-size : 11px ; color : #666666 ;}
#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 ;}
#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 ... */
