九宫格日志
九宫格日志就是现在比较流行的用九个方格的形式来记录一些微型的话语日志，由于其比较美观和省事，现在被各大网站采用，成为一种独特的博客形式。
九宫格实现其实非常的简单，我这里记录一种兼容性最好的一种方法。在九个格子的建立中可以使用table方法，ul li方法等等，但是经过数次实验和与后台的交互，发现用ul li更能满足被很好解析。
贴上代码仅供参考
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>box</title>
6 </head>
7
8 <style>
9
10 .healthDaily{
11 overflow:hidden;
12 width:420px;
13 height:450px;
14 background: url("http://img1.cache.netease.com/bbs/img11/stylebox/top.jpg");
15 border:1px solid #ffc8b4;
16
17 }
18 .healthDaily ul{
19 margin:0;
20 padding:0;
21 list-style:none;
22 }
23 .healthDaily li{
24 float:left;
25 display:inline;
26 margin:-1px 0 0 -1px;
27 list-style:none;
28 border-top:1px solid #ffc8b4;
29 border-left:1px solid #ffc8b4;
30 width:140px;
31 height:150px;
32 overflow:auto;
33
34 }
35 .nine-1 {
36 background: url("http://img1.cache.netease.com/bbs/img11/stylebox/breakfast.jpg") no-repeat 0 0;
37 }
38 .nine-2 {
39 background: url("http://img1.cache.netease.com/bbs/img11/stylebox/lunch.jpg") no-repeat 0 0;
40 }
41 .nine-3 {
42 background: url("http://img1.cache.netease.com/bbs/img11/stylebox/supper.jpg") no-repeat 0 0;
43 }
44 .nine-4 {
45 background: url("http://img1.cache.netease.com/bbs/img11/stylebox/sport.jpg") no-repeat 0 0;
46 }
47 .nine-5 {
48 background: url("http://img1.cache.netease.com/bbs/img11/stylebox/hope.jpg") no-repeat 0 0;
49 }
50 .nine-6 {
51 background: url("http://img1.cache.netease.com/bbs/img11/stylebox/happy.jpg") no-repeat 0 0;
52 }
53 .nine-7 {
54 background: url("http://img1.cache.netease.com/bbs/img11/stylebox/loseweight.jpg") no-repeat 0 0;
55 }
56 .nine-8 {
57 background: url("http://img1.cache.netease.com/bbs/img11/stylebox/gain.jpg") no-repeat 0 3px;
58 }
59 .healthDay-textarea{
60 margin-left:8px;
61 margin-top:30px;
62 height: 105px;
63 color:#880000;
64 font-weight:bold;
65 font-size: 16px;
66 line-height: 16px;
67 border:0;
68 width:115px;
69 background:transparent;
70 font-weight:bold;
71 resize:none;
72 outline:none;
73 overflow:hidden;
74 }
75 .healthDay-textarea-on{
76 border:1px solid #FFC8B4;
77 overflow:auto;
78 font-weight:bold;
79 font-size: 16px;
80 line-height: 16px;
81 background-color:white;
82 height: 95px;
83 }
84 </style>
85 <body>
86
87 <div class="healthDaily">
88 <ul>
89 <li>
90 <div class="nine-1">
91 <textarea class="healthDay-textarea" cols="6"></textarea></div>
92 </li>
93 <li> <div class="nine-2">
94 <textarea class="healthDay-textarea" cols="6"></textarea></div>
95 </li>
96 <li><div class="nine-3">
97 <textarea class="healthDay-textarea" cols="6"></textarea></div>
98 </li>
99 <li><div class="nine-4">
100 <textarea class="healthDay-textarea" cols="6"></textarea></div>
101 </li>
102 <li style="background-image:url(http://img1.cache.netease.com/bbs/img11/stylebox/middlepic.jpg)"></li>
103 <li><div class="nine-5">
104 <textarea class="healthDay-textarea" cols="6"></textarea></div>
105 </li>
106 <li ><div class="nine-6">
107 <textarea class="healthDay-textarea" cols="6"></textarea></div>
108 </li>
109 <li><div class="nine-7">
110 <textarea class="healthDay-textarea" cols="6"></textarea></div>
111 </li>
112 <li><div class="nine-8">
113 <textarea class="healthDay-textarea" cols="6"></textarea></div>
114 </li>
115 </ul>
116 </div>
117
118 </body>
119 <script charset="gb2312" src="http://img3.cache.netease.com/cnews/js/ntes_jslib_1.x.js" language="javascript" type="text/javascript"></script>
120 <script>
121 (function($){
122 var dataBox = $(".healthDaily");
123
124 if(!dataBox) return;
125 var dataDate = $("li", dataBox);
126
127 $("textarea", dataDate).addEvent("focus", function(){
128 $(this).addCss("healthDay-textarea-on");
129 }).addEvent("blur", function(){
130 $(this).removeCss("healthDay-textarea-on");
131 }).addEvent("keyup", function(){
132 if(this.value && this.value.length>30){
133 this.value = this.value.substring(0,30);
134 return false;
135 }
136 });
137 dataDate.addEvent("blur", function(){
138 $("textarea", this).addCss("healthDay-textarea-on");
139 });
140
141 })(NTES);
142 </script>
143 </html>
