等待-放飞梦想

使用lesscss来编码编写css

Await — Sat, 24 Sep 2011 05:10:24 +0000

lesscss 是动态的样式表语言，他让css增加变量，组合，函数，运算等语法。这个项目的网站在国内访问不到，大家都懂的。

lesscss使用方法有两种：

页面添加一个 less.js的文件，css使用 style.less 文件后缀来编写，不过需要有服务器的环境支持

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript">script>

在服务器端使用node.js来编译，node.js 使用 less的方法如下：
先使用npm包管理器来安装
$ npm install less
然后就可以使用命令行来编译压缩less代码了
$ lessc styles.less > styles.css

下面是一些lesscss的语法：

1、使用变量：

// LESS
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
/* Compiled CSS */
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

2、组合

// LESS
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
/* Compiled CSS */
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

3、选择器

// LESS
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
/* Compiled CSS */
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}

4、变量预算

// LESS
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
/* Compiled CSS */
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}

5、import 外部css

@import "lib.less";
@import "lib";

通用引用了lesscss，我们就可以将css写得模块化，有更好的阅读性。

首先可以通过 import 讲网站的样式分成 n个模块，当页面需要哪个模块就引用哪个。还可以将css3那些新增的功能定义成类库，由于有函数的功能，那些圆角，阴影之类样式只需要定义一次就可以了。讲页面需要使用到的主要文本，边框，背景色定义成变量给后续样式使用，到时网站风格需要改变，颜色也很好的修改。

我个人觉得先阶段lesscss的不足有：

1. css3的样式不能自动补全其他浏览器的hack。
2.使用nodejs在window系统下的支持不够，不过最近刚刚不久发布了一个nodejs window版，这方面估计在不久的将来会改善
3.编辑器，ide对lesscss语法缩进支持不够友好。

转自–强记《使用lesscss来编码编写css》

2009-11-11 -- 左右两栏等高实现方法 (6)
等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简...
2009-08-30 -- CSS 3.0 参考手册 (中文版) (9)
作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
2009-07-07 -- 如何使你的CSS样式更易阅读? (15)
在做wordpress主题的时候，样式是最重要的一部分。作为主题的制作者，我们不但要考滤页面的还原完整度，还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美，但每个人都想主题更...
2009-06-18 -- 关于CSS的书写习惯 (7)
其实每个人都有自己喜欢的书写格式习惯，我在刚学CSS的时候，什么都不知道，只是要实现什么效果，我后就写个ID或类进去。放哪个位置也不管，丢进去就行了。反正效果实现了；后来当需要修改某些地方的时候，才发...
2009-06-03 -- CSS实现自动换行的小技巧 (4)
大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！对于div 1.（IE浏览器）white-space:normal; word-...

Jsonp 方式跨域获取 json 数据

Await — Sat, 17 Sep 2011 00:56:02 +0000

这两天一直大折腾这个腾讯微博的广播调用。在胖神的帮助下，总算完成的差不多了。基本上和腾讯微博的页面格式保持一致。
数据来源是用腾讯微博RSS/JSONP格式输出的地址。

http://v.t.qq.com/output/json.php?type=2&name=Dawait&sign=d9fbc9349a11247c6a891050c4fae755b023303a

type=1 为我的广播；
type=2 为我的首页时间线；
直接打开这个地址，会看到有一串很大的数据，weiboData({Data…});一开始不了解这个JSONP是啥玩意。所以用PHP把这个做相应处理后再输出JSON格式，然后AJAX请求，返回后处理。后来在胖神（现在叫胖帝了）的指导下，才知道可以直接用JS读取数据。于是一翻折腾，总算完成了。后来查了查下资料，了解了一下 jsonp 跨域请求方式.跟大家分享一下。

其实 jsonp 是个很简单的一个东西。
主要是利用了 script 标签对 javascript 文档的动态解析来实现。（其实也可以用eval函数）。

来个超简单的例子：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Test Jsonp</title> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <script type="text/javascript"> function weiboData(data){ alert(data.msg); } </script> <script type="text/javascript" src="http://v.t.qq.com/output/json.php?type=1&name=Dawait&sign=d9fbc9349a11247c6a891050c4fae755b023303a"></script> </head> <body> </body> </html>

提示：你可以先修改部分代码再运行。

点击运行之后会弹出一个对话框，内容为OK。
这里weiboData是回调函数名称，data就是里面的json数据。

Jsonp原理：

首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时，服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

这个和上面的例子有点区别，腾讯微博是服务器生成固定的名称，客服端直接调用就行了。
到此终于知道JSONP是啥了。大家也可以试试去折腾

随机日志

2010-10-12 -- 分享Flight主题中的焦点图（基于JQ） (22)
关于这个焦点图没啥说的了，网上太多了。但自己一直没找到个合适的。现在的这个是Dreamy主题中的升级版，虽然看起来一模一样。其实做了很多扩展，优化了结构和JS部分。可以选择切换方式（左右滚动，上下滚动...
2009-11-25 -- 一个jQuery弹出层(tipsWindown) (99)
弹出层效果网上很多很多，也没啥好说的了。写这个只是作为学习JQ的一些记录。此插件的一些方法参考了花匠的dialog；在此表示感谢。接着说说这种弹出层的原理或者说是做法。总结下经验；首先需要一个遮罩...
2008-10-13 -- 巧妙设计你的链接[seo] (2)
一般来说，用户浏览网页时只选择浏览最重要的信息或比较容易发现、瞬间可至的信息，他们必须要能够对网页内容做出一个快速评估，找到他们正在寻找的信息并转到另一个网页中去。通常情况下，网络作家会使用超文本链接...
2009-06-05 -- wordpress定制首页输出 (6)
这个方法我们可以在一些CMS主题中经常看到。像wopus的首页；它在首页调用了很多分类。然后把分类的第一条和其他的标题区分出来；我们先来看下默认的主循环。这里是循环的内容 ...
2008-11-24 -- AddThis——为你的文章添加一个Share按钮 (6)
今天偶然在一个外国的BLOG客上看到一看Share按钮。鼠标放上去会弹出一个把当前文章收藏到google.digg.ask...上的列表。看下图: 于是自己申请一个号。放上这个小...

jQuery中queue和dequeue的用法

Await — Thu, 08 Sep 2011 07:57:00 +0000

今天在做右下角那个静止的工具栏时遇到了一个问题。鼠标放上去的时候，要让周围的4个按钮按顺序显示出来，移开的时候要按顺序隐藏。左思右想发现用animate的回调函数方式来写比较麻烦。于是百度了下，发现jQuery中有一个队列方法“queue”。
定义和用法
queue() 方法显示或操作在匹配元素上执行的函数队列。
queue和dequeue的过程主要是：
1，用queue把函数加入队列（通常是函数数组）
2，用dequeue将函数数组中的第一个函数取出，并执行(用shift()方法取出并执行）

也就意味着当再次执行dequeue的时候，得到的是另一个函数了
同时也意味着，如果不执行dequeue，那么队列中的下一个函数永远不会执行

对于一个元素上执行animate方法加动画，jQuery内部也会将其加入名为 fx 的函数队列
而对于多个元素要依次执行动画，则必须我们手动设置队列进行了。

一个例子，要两个div依次向左移动，点击这里查看
如果只是轮流移动次数较少，可以使用animate的回调函数来做，一个动画放在另一个动画的回调里边
比如

$(“#block1″).animate({left:”+=100″},function() {
$(“#block2″).animate({left:”+=100″},function() {
$(“#block1″).animate({left:”+=100″},function() {
$(“#block2″).animate({left:”+=100″},function() {
$(“#block1″).animate({left:”+=100″},function(){
alert(“动画结束”);
});
});
});
});
});

但这种方法当动画较多的时候简直是残忍。

此时利用queue和dequeue则显得简单很多：

var FUNC=[
function() {$("#block1").animate({left:"+=100"},aniCB);},
function() {$("#block2").animate({left:"+=100"},aniCB);},
function() {$("#block1").animate({left:"+=100"},aniCB);},
function() {$("#block2").animate({left:"+=100"},aniCB);},
function() {$("#block1").animate({left:"+=100"},aniCB);},
function(){alert("动画结束")}
];
var aniCB=function() {
$(document).dequeue(“myAnimation”);
}
$(document).queue(“myAnimation”,FUNC);
aniCB();

1，我首先建立了一个函数数组，里边是一些列需要依次执行的动画
2，然后我定义了一个回调函数，用dequeue方法用来执行队列中的下一个函数
3，接着把这个函数数组放到document上的myAnimation的队列中（可以选择任何元素，我只是为了方便而把这个队列放在document上）
4，最后我开始执行队列中的第一个函数

这样做的好处在于函数数组是线性展开，增减起来非常方便。
而且，当不要要继续进行接下来动画的时候(比如用户点了某个按钮)，只需要清空那个队列即可。而要增加更多则只需要加入队列即可

//清空队列
$(document).queue(“myAnimation”,[]);
//加一个新的函数放在最后
$(document).queue(“myAnimation”,function(){alert(“动画真的结束了！”)});

这当然也可以用于ajax之类的方法，如果需要一系列ajax交互，每个ajax都希望在前一个结束之后开始，之前最原始的方法就是用回调函数，但这样太麻烦了。同样利用queue添加队列，每次ajax之后的回调中执行一次dequeue即可。

摘自：http://shawphy.com/2009/04/how-to-use-queue-and-dequeue.html

2011-08-17 -- Flight主题更新 (16)
这几天收到有些童鞋反应主题在wp3.2版本后台不能快速编缉文章，不能上传图片。抽空看了下，是JQ库版本冲突引起，现已更新。请移步到wopus主题站下载更新后的版本。也可以通过115网盘下载。...
2010-11-24 -- JQ弹出层插件(tipsWindow 2.8) (154)
已更新为2.7...
2010-10-12 -- 分享Flight主题中的焦点图（基于JQ） (22)
关于这个焦点图没啥说的了，网上太多了。但自己一直没找到个合适的。现在的这个是Dreamy主题中的升级版，虽然看起来一模一样。其实做了很多扩展，优化了结构和JS部分。可以选择切换方式（左右滚动，上下滚动...
2010-10-12 -- jquery ajax方法如load,get等在Chrome下失效的问题 (4)
最近碰到一个问题，发现jquery在chrome 中， ajax的load get等方法完全失效。代码如下： function getHtml(url,ctner){ //alert(c...
2009-11-30 -- 不刷新（AJAX）获取文章的内容 (53)
相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲...

WordPress主题：perfct 1.0

Await — Thu, 01 Sep 2011 06:14:51 +0000

已经很久很久没写日志了。更不知道有多久没有发布新主题了！好像已经失去了那种曾经的兴趣和动力，很多时候想写，却又找不到话题。有些技术上的文章想分享。但又懒得编缉。要分析，上代码，做实例。最终只是想想而已。在这段时间里，不是没有做过主题，很多时候，一时有了好想法。就开始写，往往是写了个首页。或头部就又写不下去了。前几天摄神发布了prower v4。看到之后，又有冲动了。于是把之前的一款放在那几个月了的主题继续整整。成了现在的perfct。

主题说明：

自定义菜单，且支持二级下拉菜单；
置顶文章区别显示；
侧边栏小工具(如何添加小工具？)
内容页侧边栏显示同分类下的最新文章；
分类页顶部显示分类名称及描述；(分类描述添加修改)
评论嵌套回复；(如何开启评论的嵌套回复？)

此主题没啥特别功能。且不再向IE6兼容。我自己测试了下，有一些小地方不兼容。所以，关于IE6的样式问题，请不要找偶。插件方面浏览次数需要“wp-postviews”支持。没装不会显示。其他的暂无！

后话：
计划在这个基础上作一些丰富的效果扩展。

兼容性修复。支持IE系列，firefox,Google Chrome等浏览器
自定义管理工具栏，默认的那个黑条条实在是太纠结了。
弹出层登录，信息提示效果。
缩略图，焦点图等效果。
主题后台功能设置
绑定腾讯微博
Ajax评论
相册，图片缩放等效果
集成表情、头像缓存功能

管理工具栏效果：

弹出登录效果：

提示信息效果：

暂时只想到这么多了。反正会慢慢折腾。直到满意为止！

下载地址：perfct-v1.0

2009-06-13 -- 主题Dreamy更新到v2.0 [06-18 00:08] (61)
距离这个主题发布上一版已经差不多两个月了，而这个主题我一直在修修改改。虽然很多同学问我要我BLOG用的版本，但很多地方没有完善，所以一直没有发布自己用的版本。但现在好了，终于可以发布这个新的版本了。这...
2009-06-07 -- 黑莓主题的改版总算完成了 (15)
这次改版很顺利，也没花多少时间。从设计到完成代码用了两天多时间；之所以这么快是因为主题是基于Dreamy这个主题的；大家可以看得出，有很多地方都相似，但细节方面有不少的修改；不废话了。看下最初的设计稿...
2009-03-31 -- 新主题预览图 (15)
自从发布Maxthon v2.0后，已经很久没有出新主题了。其中有太多原因了，其实也不是没有做，只是很多主题做到一半的时候就没在继续了，总是做着做着就觉得不行了。今天发布这个新主题的DEMO图，已经下...
2008-11-10 -- Wopus新主题终于上线了 (9)
经过最后一天的努力,WOPUS新主题终于上线.由于时间关系,仍存在很多问题.希望大家能及时反馈发现的问题,以便我们及时修正.谢谢大家的支持!~...
2011-08-17 -- Flight主题更新 (16)
这几天收到有些童鞋反应主题在wp3.2版本后台不能快速编缉文章，不能上传图片。抽空看了下，是JQ库版本冲突引起，现已更新。请移步到wopus主题站下载更新后的版本。也可以通过115网盘下载。...

Flight主题更新

Await — Wed, 17 Aug 2011 08:00:59 +0000

这几天收到有些童鞋反应主题在wp3.2版本后台不能快速编缉文章，不能上传图片。抽空看了下，是JQ库版本冲突引起，现已更新。请移步到wopus主题站下载更新后的版本。也可以通过115网盘下载。

2011-09-08 -- jQuery中queue和dequeue的用法 (1)
今天在做右下角那个静止的工具栏时遇到了一个问题。鼠标放上去的时候，要让周围的4个按钮按顺序显示出来，移开的时候要按顺序隐藏。左思右想发现用animate的回调函数方式来写比较麻烦。于是百度了下，发现j...
2011-09-01 -- WordPress主题：perfct 1.0 (88)
已经很久很久没写日志了。更不知道有多久没有发布新主题了！好像已经失去了那种曾经的兴趣和动力，很多时候想写，却又找不到话题。有些技术上的文章想分享。但又懒得编缉。要分析，上代码，做实例。最终只是想想而已...
2010-11-24 -- JQ弹出层插件(tipsWindow 2.8) (154)
已更新为2.7...
2010-10-12 -- 分享Flight主题中的焦点图（基于JQ） (22)
关于这个焦点图没啥说的了，网上太多了。但自己一直没找到个合适的。现在的这个是Dreamy主题中的升级版，虽然看起来一模一样。其实做了很多扩展，优化了结构和JS部分。可以选择切换方式（左右滚动，上下滚动...
2010-10-12 -- jquery ajax方法如load,get等在Chrome下失效的问题 (4)
最近碰到一个问题，发现jquery在chrome 中， ajax的load get等方法完全失效。代码如下： function getHtml(url,ctner){ //alert(c...

一个实用的wordpress导航

Await — Tue, 07 Jun 2011 08:52:18 +0000

在Wordpress模板函数库中的“链接函数”（在wp-includesLink-template.php中）有2个函数可以得到前、后文章链接：

previous_post_link()：生成当前文章的前一篇文章链接地址；
next_post_link()：生成当前文章的后一篇文章链接地址；

这2个函数是直接生成（即直接Echo）链接地址（包括标题、提示），而如果要返回链接的具体内容，则可用这2个函数：

get_previous_post()：返回当前文章的前一篇文章链接地址数组；
get_next_post()：返回当前文章的后一篇文章链接地址数组；

返回的数组结构为：

tdClass Object
(
[ID] => 2763
[post_author] => 1
[post_date] => 2009-06-01 03:40:48
[post_date_gmt] => 2009-05-31 19:40:48
[post_content] => 内容……
[post_title] => [转]SEO方程式让你彻底了解SEO
[post_category] => 0
[post_excerpt] =>
[post_status] => publish
[comment_status] => open
[ping_status] => open
[post_password] =>
[post_name] => zhuan-seo-fang-cheng-shi-rang-ni-che-di-liao-jie-seo
[to_ping] =>
[pinged] =>
[post_modified] => 2009-06-01 03:40:48
[post_modified_gmt] => 2009-05-31 19:40:48
[post_content_filtered] =>
[post_parent] => 0
[guid] => http://www.paopaoniu.com/?p=2763
[menu_order] => 0
[post_type] => post
[post_mime_type] =>
[comment_count] => 4
)

利用这几个函数的结合，然后利用类似“递归”的传递算法，则可获得相对于当前文章前、后的N篇文章！

2011-09-01 -- WordPress主题：perfct 1.0 (88)
已经很久很久没写日志了。更不知道有多久没有发布新主题了！好像已经失去了那种曾经的兴趣和动力，很多时候想写，却又找不到话题。有些技术上的文章想分享。但又懒得编缉。要分析，上代码，做实例。最终只是想想而已...
2011-06-07 -- 解决wordpress分页问题 (0)
这是为解决使用query_post()函数调用某一类文章后引起的分页问题的办法。 query_post()非常有用，可以输出wordpress主循环以外的自定义文章，但是缺点在于覆盖了post变...
2009-11-30 -- 不刷新（AJAX）获取文章的内容 (53)
相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲...
2009-07-07 -- WordPress页面函数：wp_list_pages() (16)
模板标签wp_list_pages( )将WordPress页面作为链接显示出来。该模板标签常用于自定义侧边栏或标题，也常用于其他模板中。该模板标签在WordPress 1.5及更新版本中可用。用...
2009-07-03 -- WordPress日期和时间函数：the_time() (8)
在wordpress主题中，有的时候我们会涉及到wordpress时间的格式，每次都去找很麻烦，查了一下WordPress的时间函数，以及调用的时候的时间参数，所谓时间参数，是WordPress应用时...

解决wordpress分页问题

Await — Tue, 07 Jun 2011 01:50:12 +0000

这是为解决使用query_post()函数调用某一类文章后引起的分页问题的办法。

query_post()非常有用，可以输出wordpress主循环以外的自定义文章，但是缺点在于覆盖了post变量的值，其中包括分页参数。因此问题表现为翻页无效，每一页都是一样的。

解决方法如下：

将以下类似的部分：
if (have_posts()) : ?>
query_posts("category_name=somecat"); ?>
while (have_posts()) : the_post(); ?>
替换为
if (have_posts()) : ?>
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("category_name=somecat&paged=$paged"); ?>
while (have_posts()) : the_post(); ?>

主要是加了一个$paged的判断。

2009-07-07 -- WordPress页面函数：wp_list_pages() (16)
模板标签wp_list_pages( )将WordPress页面作为链接显示出来。该模板标签常用于自定义侧边栏或标题，也常用于其他模板中。该模板标签在WordPress 1.5及更新版本中可用。用...
2011-09-01 -- WordPress主题：perfct 1.0 (88)
已经很久很久没写日志了。更不知道有多久没有发布新主题了！好像已经失去了那种曾经的兴趣和动力，很多时候想写，却又找不到话题。有些技术上的文章想分享。但又懒得编缉。要分析，上代码，做实例。最终只是想想而已...
2011-06-07 -- 一个实用的wordpress导航 (0)
在Wordpress模板函数库中的“链接函数”（在wp-includesLink-template.php中）有2个函数可以得到前、后文章链接： previous_post_link()...
2009-11-30 -- 不刷新（AJAX）获取文章的内容 (53)
相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲...
2009-07-03 -- WordPress日期和时间函数：the_time() (8)
在wordpress主题中，有的时候我们会涉及到wordpress时间的格式，每次都去找很麻烦，查了一下WordPress的时间函数，以及调用的时候的时间参数，所谓时间参数，是WordPress应用时...

未知宽度容器的居中解决方案

Await — Thu, 17 Feb 2011 02:27:36 +0000

如上图所示的分页，其结构如下：

<div class="pagenavi">
<ul>
<li><a href="" title="">1/18a>li>
<li><a href="" title="">上一页a>li>
<li class="current"><a href="" title="">1a>li>
<li><a href="" title="">2a>li>
<li><a href="" title="">3a>li>
<li><a href="" title="">...a>li>
<li><a href="" title="">18a>li>
<li><a href="" title="">下一页a>li>
ul>
div>

在这个结构中，“.pagenavi”是外部框架，100%宽度。而目的，是为了让“.pagenavi”下的“ul”块能够居中显示。可是因为“ul”块中的节点“li”并不固定且为块元素，所以无法确认其父层最终宽度。我们知道一般情况下要让元素居中，直接给宽度和“margin: 0 auto”就行了。但在这里无法确定其宽度，所以这时这种方法就行不通了。

解决方案一：相对浮动

“.pagenavi ul” 向左浮动50%，是以外层“.pagenavi”的宽度为标准的；子节点“li”向右浮动50%，是以层“ul”的宽度为标准的，这里无需定义内层的宽度。这样算是一个小技巧，让“ul”居中了。也补足了float没有center属性的缺陷。

.pagenavi ul{ float: left;
left: 50%;
position: relative;
}
.pagenavi li{
float: left;
position: relative;
right: 50%;
}

解决方案二：display:inline-block

.pagenavi li{
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:top;
}*/

详细的请点击下面的链接：

未知宽度容器的居中解决方案

2008-11-25 -- CSS清除浮动的一些方法 (6)
CSS的浮动为我们的布局带来了很大的好处，利用浮动我们可以很方便的写出各种版式。但浮动同时也带来很多问题；这些问题基本上都因为没有及时的或者在适当的位置清楚浮动。下面来说下常用的清除浮动方法： ...
2008-08-21 -- DIV水平居中的方法小结 (0)
我想这个是我们经常遇到的一个问题，当然对很多人来说，这是个很简单，很容易解决的问，在这里我只是把这些常用的方总结下。一、margin:auto 0 与 text-aligh:center 这个方...

2010 痛大于快乐

Await — Thu, 13 Jan 2011 14:09:58 +0000

很久没有更新Blog了，最近发现大家都在写年底总结。我一直在纠结中，想写点什么纪录入就要逝去的2010年。
2010年，在我的人生中发生了很多事情：
一月，我结婚了。从此，我的生命中多了一个这辈子最重要的人；
三月，一个对我很重要的人（奶奶）离开人世，从此，少了一个牵挂我的人；
七月，我的生命中迎来了两个新的生命。浩浩和瀚瀚，从此，多了一份责任；
八月，我又失去了一个对我很重要的人，瀚瀚因为早产低体重。最终还是离开了这个对他来说还很陌生的世界；

这一年，还发生了很多事情。但都没有这几件来的对我重要。就不纪录了；
本想多写点什么，但发现找不到什么词来表达我想要表达的。反正就这样纠结的快过完了；2011年，努力赚钱…还帐。生活就是这样，每个人都在纠结的活着，快乐、痛苦部佯随着我们的成长。年复一年……慢慢的我们学会了不再那么痛苦。不再那么纠结。改变不了就学会接受。

写在最后：
这一年，我要特别感谢一个人——酋长。一个真正的朋友；感谢的话说再多也无法表达心里的感谢之情。只想说，这辈子，我会记住有这样一个人。曾经给予我很多帮助。

随机日志

2008-11-24 -- AddThis——为你的文章添加一个Share按钮 (6)
今天偶然在一个外国的BLOG客上看到一看Share按钮。鼠标放上去会弹出一个把当前文章收藏到google.digg.ask...上的列表。看下图: 于是自己申请一个号。放上这个小...
2008-08-13 -- Hello world! (2)
HI！在网上漂了这么久，现在终于有一个小小的属于自己的地方了。在这要特别感谢酋长为我提供的空间以及域名.不然还不知道要什么才能建起这个小小的"空间". 这个BLOG主要用来记录自己在学习中的一些...
2008-12-17 -- Opera中国版“朱雀”正式发布 (13)
经过数月的努力，Opera 于今天正式全面升级在中国的整个产品线，同时发布 Opera 桌面中国版，Opera Mini 中国版，Opera 中国新版网站。详细改进列表： 1.全...
2009-07-02 -- WordPress分类列表函数:wp_list_categories (9)
wordpress的分类函数对于主题作者来说可能并不陌生，因为基本上我们一定会用到这个函数；在 Wordpress 中 wp_list_categories 是用来显示所有分类的链接列表，它有两种表示...
2009-04-07 -- 今天要回老家了 (9)
今天得早点起了，得去买票。算算有两年多没回老家了，现在的心情有点复杂。这两天每天都是睡到中午11点多才起来。睡太晚了，精神不好，郁闷。这个主题总算完成的差不多了，还有几个页面没做，回来后再整吧...

JQ弹出层插件(tipsWindow 2.8)

Await — Wed, 24 Nov 2010 06:27:40 +0000

关于插件：

已更新为2.8

一个基于jQuery的弹出层。最新版本2.8;
支持拖拽，支持多窗口。内容为文字，ID，图片，SWF，URL，框架；

这个插件前前后后修改了几个月了。一直在改进；到现在差不多了。以后不会经常更新了；
参数JS代码里已作注释，这里不再复述；所有参数都为可选。就这么多了；有问题大家留言或发邮件给我！

更新：(2011-05-16)

1. 已修复IE6下存在的问题；
2. 然后增强了随机生成的ID防重复；

3. 新增了一个获取当前弹出层ID的方法 $.XYTipsWindow.getID()；
4. 增加了ID判断，当传了ID的时候。只能弹出一个窗口；

更新：(2011-01-27)

1. 修复了IE下的fixed定位input type=text元素无法输入；
2. 重写了定位方法，参照floatDIV插件的定位方式；
3. 新增加了一个内容类型“swf”；
4. 新增对话模式(支持回调)；
5. 重写吸附模式定位；
6. 修复IE6下置底时仍可以往下拖动滚动条；
7. 新增“___windowBgColor”，“___windowBgOpacity” 两个参数用来设置遮罩层颜色和透明度；
8. 其他细节修改；

详细的看演示页吧：http://leotheme.cn/wp-content/uploads/Example/js/tipswindow/index.html

2009-11-25 -- 一个jQuery弹出层(tipsWindown) (99)
弹出层效果网上很多很多，也没啥好说的了。写这个只是作为学习JQ的一些记录。此插件的一些方法参考了花匠的dialog；在此表示感谢。接着说说这种弹出层的原理或者说是做法。总结下经验；首先需要一个遮罩...
2011-09-08 -- jQuery中queue和dequeue的用法 (1)
今天在做右下角那个静止的工具栏时遇到了一个问题。鼠标放上去的时候，要让周围的4个按钮按顺序显示出来，移开的时候要按顺序隐藏。左思右想发现用animate的回调函数方式来写比较麻烦。于是百度了下，发现j...
2011-08-17 -- Flight主题更新 (16)
这几天收到有些童鞋反应主题在wp3.2版本后台不能快速编缉文章，不能上传图片。抽空看了下，是JQ库版本冲突引起，现已更新。请移步到wopus主题站下载更新后的版本。也可以通过115网盘下载。...
2010-10-12 -- 分享Flight主题中的焦点图（基于JQ） (22)
关于这个焦点图没啥说的了，网上太多了。但自己一直没找到个合适的。现在的这个是Dreamy主题中的升级版，虽然看起来一模一样。其实做了很多扩展，优化了结构和JS部分。可以选择切换方式（左右滚动，上下滚动...
2010-10-12 -- jquery ajax方法如load,get等在Chrome下失效的问题 (4)
最近碰到一个问题，发现jquery在chrome 中， ajax的load get等方法完全失效。代码如下： function getHtml(url,ctner){ //alert(c...

您可能也喜欢：
CSS中关于背景图的应用技巧	关于CSS的书写习惯	IE6因为编码问题无法正确解析CSS文件	CSS 3.0 参考手册 (中文版)	如何使你的CSS样式更易阅读?
无觅

您可能也喜欢：
不刷新（AJAX）获取文章的内容	搜狐博客开放平台博客模板设计大赛	关于Tab(选项卡)的一些实现方式	如何合理使用链接打开方式	黑莓主题的改版总算完成了
无觅

您可能也喜欢：
用jquery写一个简单的菜单伸缩效果	jQuery 实现 tab 切换一例	用jQuery实现个性有序列表	jQuery实现背景图渐变切换	jQuery性能优化指南
无觅

您可能也喜欢：
WordPress主题高级技巧	WordPress主题”Dreamy”发布	WordPress主题之Maxthon 2.0.2[08-08-11]	新主题预览图	WordPress“主题壁纸”
无觅

您可能也喜欢：
分享Flight主题中的焦点图（基于JQ）	WordPress主题：perfct 1.0	WordPress“主题壁纸”	WordPress主题高级技巧	WordPress主题”Dreamy”发布
无觅

等待-放飞梦想

使用lesscss来编码编写css

相关文章

Jsonp 方式跨域获取 json 数据

随机日志

jQuery中queue和dequeue的用法

相关文章

WordPress主题：perfct 1.0

相关文章

Flight主题更新

相关文章

一个实用的wordpress导航

相关文章

解决wordpress分页问题

相关文章

未知宽度容器的居中解决方案

相关文章

2010 痛大于快乐

随机日志

JQ弹出层插件(tipsWindow 2.8)

相关文章

您可能也喜欢：
解决wordpress分页问题	IE下中英文字体不能对齐原因及解决	寻找Photoshop笔刷的15个好去处	酷狗推出手机版	浅议Web网页Form表单设计技巧
无觅

您可能也喜欢：
联想IdeaPad S9/S10的视频广告《爱，永远在线》	WordPress主题：perfct 1.0	WordPress“主题壁纸”	浅议Web网页Form表单设计技巧	用jQuery实现个性有序列表
无觅

您可能也喜欢：
分享Flight主题中的焦点图（基于JQ）	无聊——写了一个TOP10的样式	Opera中国版“朱雀”正式发布	关于Tab(选项卡)的一些实现方式	谷歌Adsense将推本地电子支付
无觅