【
在底下追加的更新：2013/7/8 14:39
】

[我知道没人愿意看代码，所以这只是一个介绍性的文章]
像这种更新记录当然要先上旧版渣作的图了=w=(博主一向爱爆黑历史)

就像上面这样，原作是完全赶时间乱写出来的，代码均由php拼凑，结果就是服务器压力(本来就没有什么访客吧啊喂。。是你自己没事找事)

然后抛弃旧题，我们直接进正题，新的全部文章页面可以直接点击博客最上面的“全部文章”按钮(请确保你的浏览器比较新再点那个链接，否则会亮瞎你的双缩脲猫眼)。之所以要写这篇文章是因为光这么点代码尼玛我写了3天啊！！3天啊！所以要纪念一下。。
 
 
 
 
嗯哼。。回到正题，开始介绍新作的全部文章页面都有哪些功能


首先来张图


当你打开这个页面的时候，左上角会有个菊花在那转，这是正在加载数据。

加载完了以后这个菊花会消失

略带win8的风格，但我绝对不是抄win8界面，完全是懒得再去写更高级的界面了，这样的方块界面用很少的代码就可以拼出来，所以。。。。。
[现在可以按照我的意思正常显示此页的浏览器只有chrome，其它的我没空去和谐了，最不和谐的就是那个搜索框]

然后告诉你们一个秘密哦，这个页面会自适应，
当你把浏览器的窗口拉窄一点。。

有木有发现它变成了4格的0.0

然后再拉窄一点。。。

于是它变成了2格的了0.0

然后再拉窄一点。。

哇塞！原来的格子都变成了横条条0.0

然后我们来看一下每个格子的组成部分

中间：标题
左上：序号
左下：发布日期(鼠标移上格子才会从下面蹦~出来)
右下：评论数(鼠标移上格子才会从右边蹦~出来)
[这不是元素周期表]
 
 
 
 
 
 
 
 
 
接着来说一下这些格子的颜色【不得不说我真的不会配色=w=】
他们的颜色绝对不是偶然！一定有什么阴谋在里面！

好吧其实颜色是根据评论数来定的。。见下面

0评论

1评论

2评论

3评论

4评论

5评论

6评论

7评论

8评论

9评论

>=10评论

实际效果


颜色我真的不是很会配，而且这里的颜色是乱选的.做这里也花了不少时间。

然后来讲一下这个新加入的搜索的使用，这货是用的js遍历搜索，遍历的是加载的时候生成的列表【喂不要说那么高深的东西！】
本来我的意思是输入框的内容变一下就搜索一遍，结果我发现只有按了回车或者用鼠标点一下输入框外面才会开始搜索。。。

实例：o

输入o以后你需要按一下回车来触发事件【喂都叫你别说那么高深的东西了】【不这么说我也不知道该怎么解释了啊。。。】，然后开始搜索，不包含这个关键词的框框会淡出(淡淡的跑出)，包含的会留下来(不区分大小写)

再输入”su”,按一下回车

原本包含o的搜索结果里包含osu的结果会保留下来，其它的会消失

然后清空输入框再按个回车，所有的框框又会跑回来了。(这我就不上图了)

到这里基本就介绍完了只是来观赏的游客们可以关闭这个页面了，或者你喜欢我的作品也可以点最下面的分享按钮

【更新2013/7/8 14:39】
根据番茄的建议，我给这货加上了背景图，看起来也不是很垃圾的样子，就这样保持吧，来一张图

然后我简化了数据部分，这个涉及到代码，请看下面这部分的上面。
-~~~~~~~~~~~~~-卖萌的分割线-~~~~~~~~~~~~~~-

【在2013/7/9 0:36的更新：虽说我原本想的事手持设备使用上面最后一种样式，但是现在不管是最大尺寸650px和handheld这么设置都不行啊，我的iphone依然4格的样式，谁知道怎么回事】
【更新2013/7/8 14:39】
我把原本php的json缩小了来再次减小压力，做法如下
1.把原本的键值缩短：date→d,comment→c,title→t
2.去掉url,直接使用id，然后在客户端用js拼出一个完整的网址，这样大大减小了json的体积
另外附件我也更新了

【我还是忍不住要说明一下细节。。。。】
这个东西一共分4部分：

一个html:位置：/     (你们看到的)
一个css文件:位置：/     (给html提供样式)
一个js文件:位置：/js/     (主要文件，进行所有动画效果和操作)
jquery:位置：/js/
一个php脚本:位置：/     (为html提供json类型文章数据，

你们可以在http://luojia.me/getpost.php看到json的内容)

关于input的问题我实在搞不明白为什么在opera和firefox和IE里不可以显示正确的样式

关于搜索的触发事件(改变内容就触发)有谁知道请告诉我谢谢！

关于自适应部分的css细节

@media only screen and (min-width:0px) and (max-width:600px) {
.tooltitle {
    display: none;
}
input.search {
    width: auto;
    right: 1em;
    left: 1em;
}
#juhua{
 display:none;   
}
}
 @media only screen and (min-width:1025px) {
.postblock {
    width: 20%;
}
.yangben {
    width: 20%;
}
}
 @media only screen and (max-width:1024px) {
.postblock {
    width: 25%;
}
.yangben {
    width: 25%;
}
}
 @media only screen and (max-width:960px) {
.postblock {
    width: 50%;
}
.yangben {
    width: 50%;
}
}
@media only screen and (min-width:0px) and (max-width:650px) {
.postblock {
    width: 100% !important;
    height: auto !important;
}
.blocktitle {
    text-align: left !important;
    position: relative !important;
    top: auto !important;
    left: 40px !important;
    padding: 0;
}
.toptool {
    height: 2em !important;
}
html {
    padding: 2em 0 0 0 !important;
}
input.search {
    width: 100% !important;
    height: 100% !important;
    top: 0.1em !important;
    right: 0 !important;
    left: 0 !important;
}
.postnumber {
    font-size: 15px !important;
    left: 0em;
}
.commentcount {
    font-size: 15px;
}
.date{
    display:none;
}
}

主文件的代码很简洁

 佳佳酱才是小黑呢

    

嗯就这么点，但是js文件很长，就不贴在这里了。

最后来自带一个附件链接：百度盘
拿去研究和使用我都没意见，使用方法是直接解压到wordpress的根目录下然后打开html文件修改名字和链接地址(使用请注意博客底下的版权信息)
 
 
 
 
 
 
 
 
 
 
 
 
（没人会用这货的吧눈_눈。。。。。）