起初以为是插件添加的，关闭所有插件后该东西依然存在。后来查到原来是WordPress自动添加的，recentcomments，应该就是为调用最新评论的边栏插件应用的样式，由于我没有使用自带的评论调用，所以这对于我来说就是无用的，于是就设法去掉它。

方法一：修改/wp-includes/default-widgets.php中的以下代码。

function recent_comments_style() {
	if ( ! current_theme_supports( 'widgets' ) // Temp hack #14876
		|| ! apply_filters( 'show_recent_comments_widget_style', true, $this->id_base ) )
		return;
	?>
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<?php
}

从注释可以看出这是WordPress模板的hack，这段东西要怎么修改要斟酌斟酌了，直接去掉里面“style”之间的东西就最简单了。这个方法有个缺点就是升级之后继续修改……

方法二：添加一下带到到模板的function.php中。

function twentyten_remove_recent_comments_style() {
	global $wp_widget_factory;
	remove_action( 'wp_head', array( $wp_widget_factory->widgets['WP_Widget_Recent_Comments'], 'recent_comments_style' ) );
}
add_action( 'widgets_init', 'twentyten_remove_recent_comments_style' );

当初新浪微博的通知框是不会动的，你滚到下面了就看不到通知了，想提个意见，来不及提就出现了现在它这样的效果。虽然不是什么新鲜事了，估计人家也弄过这样的了，我就蛋疼蛋疼玩一下吧，为整年没玩过的东西开个头。

演示（或许）稍后跟进，好困，纯属扯蛋。//at 16:35

CSS:

#sina_notice{padding:5px;background:#FDFFEA;border:1px solid #CCCCCC;position:absolute;top:0;right:200px;z-index:99}
#sina_notice a{color:#399FD6}
#sina_notice img{margin-left:5px}

HTML:

<div id="sina_notice">
	1条新通知，<a href="#">查看通知</a>
	<a href="#" onclick="javascript:turnoff('sina_notice')">
		<img src="http://pic.yupoo.com/ygs924_v/BcG6x1FR/VkhqY.png" alt="关闭" />
	</a>
</div>

关闭按钮JAVASCRIPT:

<script type="text/javascript">
  function turnoff(obj){
    document.getElementById(obj).style.display="none";
  }
</script>

滚动jQuery:

$(function() {
    var $sidebar   = $("#sina_notice"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 0;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});

因为说可以百度Google打电话问朋友，更因为没有使用过inline-block，所以很快我找到了这篇“跨浏览器的inline-block”，呵呵，代码都没测试就发过去了，比较杯具。后来对方问我产生着问题的原因，当然我是不知道的，我问他，原来是这样子……

原来的代码有换行，如下：

<ul>
<li></li>
<li></li>
<li></li>
</ul>

去掉换行，如下：

<ul>
<li></li><li></li><li></li>
</ul>

啊……啊……

我说IE6除外只是因为此框框在IE6表现正常，并没受浮动影响，至于真相是什么，还有待考究。

HTML结构

<div id='container'>
	<div id='left'>填充文字</div>
	<div id='right'>填充文字</div>
</div>

解决方法
1.添加额外标签
在容器末尾添加<div style=”clear:both”></div>从而将容器撑开，但这样会添加额外的标签。
Demo

2.浮动容器
将容器#container添加float:left，虽然这样能产生想要的效果，但是下一个元素会受到这个浮动元素的影响。
Demo

3.使用overflow属性
应用值为hidden或auto的overflow属性有一个有用的副作用，会自动地清理包含的任何浮动元素。
Demo

4.使用:after伪类(IE6无效)
使用:after在容器末尾添加新的内容并清除内容浮动。

#container{
	display: inline-block; /*ie for mac*/
}
#container:after{
	content:".";  /*额外的东西越小越好，此处添加一个点*/
	display:block; /*这是必须的*/
	clear:both; /*这是必须的*/
	visibility:hidden; /*隐藏所添加的内容*/
	height:0; /*不占用空间*/
}

Demo

5.其他
IE6在有些情况下使用以上方法并没有清除浮动，而IE很多奇怪的渲染问题可以通过赋予其“layout”得到解决，或者说触发IE的layout属性，例如添加CSS zoom:1，_height:1%，至于什么是“layout”，我也不太懂，可以搜索一下。

欢迎探讨~

而结论也非常简单，看真相：

CSS:
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle}
body{font-family:tahoma;font-size:12px}

HTML:
<input class=”inputcheckbox” name=”test” value=”1″ type=”checkbox”>
<label>测试文字x</label>

解决实际问题的就是 CSS。

.aligncenter,div.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignleft{float:left}
.alignright{float:right}
.wp-caption{background-color:#f3f3f3;border:1px solid #ddd;-khtml-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin:10px;padding-top:4px;text-align:center}
.wp-caption img{border:0 none;margin:0;padding:0}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}

此外，有更多的 WordPress 默认的类标签，你可以选择你想要的风格：

.categories {...}
.cat-item {...}
.current-cat {...}
.current-cat-parent {...}
.children {...}
.pagenav {...}
.page_item {...}
.current_page_item {...}
.current_page_parent {...}
.current_page_ancestor {...}
.widget {...}
.widget_text {...}
.blogroll {...}
.linkcat{...}

最常见的私有属性是用于 Webkit 核心浏览器的(比如, Safari)， 它们以 -webkit- 开始，以及 Gecko 核心的浏览器(比如 Firefox)，以 -moz- 开始，还有 Konqueror (-khtml-)、Opera (-o-) 以及 Internet Explorer (-ms-) 都有它们自己的属性扩展（目前只有 IE8 支持 -ms- 前缀）。

被 CSS3 的动感所吸引，下午折腾了一下，成果就像你现在用 Chrome 或者 Opera 浏览本博并用鼠标经过文章标题的效果一样(FireFox下并不理想)。
使用的 CSS 如下:

h2{
	-moz-transform: translate(0px, 0px);
	-moz-transition-duration:0.3s;
	-webkit-transform: translate(0px, 0px);
	-webkit-transition-duration:0.3s;
	-o-transform:translate(0px, 0px);
	-o-transition-duration:0.3s;
}

h2:hover{
	-moz-transform: translate(10px, 0px);
	-moz-transition-duration:0.3s;
	-webkit-transform: translate(10px, 0px);
	-webkit-transition-duration:0.3s;
	-o-transform:translate(10px, 0px);
	-o-transition-duration:0.3s;
}

CSS3 吸引人的当然不只这个，折腾人的是因为它还未成为标准，还有各种不同标准的浏览器…

而且在 IE8 的兼容视图也有同样的问题，所以我之前使用 _weight 定宽只能把 li 在 IE6 下整齐排列，但 IE7、8就不行。其实解决方法很简单，使用 white-space:nowrap; 就可以规定段落中的文本不进行换行：)

本文所整理的工具按照以下类别归档：网格和布局，CSS 优化，CSS 菜单工具，CSS 按钮，CSS 圆角，CSS 框架，CSS Sprites，CSS 排版以及 CSS 表单。

网格和布局

The 1KB CSS Grid
新颖的 CSS 网格工具，可用于简化内容管理系统的页面模板，轻巧易用。

Variable Grid System
基于 960px 的常规网页布局，用于快速生成基本的 CSS 网格。

Grid Designer 2
可控性强，选项丰富的网格系统，支持 CSS 在线即时输出。

Design By Grid PNG Grid Generator
生成用于网格的 PNG 图片，以方便地用作 PSD 或 HTML/CSS 设计背景，免除手工制作网格的麻烦。

nP: Grid Generator
用于设计布局结构，制定列、边缘、间距等参数。

YAML Builder
可视化，快捷的标准 XHTML 页面框架生成工具，但对 IE6 兼容欠佳。

GRIDINATOR
简单定制基于网格的布局，可自定义多种参数。

Grid System Generator
生成适用于 960.gs，Golden Grid，1KB Grid 的网格布局，也可生成基本的通用网格。

YUI: CSS Grid Builder
来自 Yahoo 的网格工具，用于创建基础布局，统一浏览器表现。

Blueprint Grid CSS Generator
帮助你创造更灵活的 CSS 蓝图，包括 grid.css、compressed.css 和 grid.png 文件。

CSS Grid Calculator
快速设计页面布局，以多种方式构造网格。对于页面元素在浏览器中的表现方式，提供了精确的视觉反馈。

Layout generators – www.pagecolumn.com
使用 CSS 2.0 技术生成 1-5 列的布局输出。

Dynamic 4 Column Layout Generator
可控性强的 4 栏式页面布局生成器。

CSS Layout Generator – CSS Portal
创建自适应或固定宽度栏式布局，可指定或者像素或百分比。

templatr
模板生成器，可在线创建单独的设计方案。无需了解任何 HTML 和 CSS 知识。

CSS Source Ordered 1-3 Columned Page Maker
生成 1-3 栏式页面的 CSS 代码。

CSS Creator
创建自适应宽度或固定宽度的浮动栏式布局。

CSS 优化和样式生成

Online CSS Optimiser/Optimizer
输入网址或复制并粘贴到样式输入框中，一键提交即可优化。

Free CSS Template Code Generator
三栏式布局生成工具，同步生成 HTML 和 CSS 代码。

CSS Builder – Generate Styles on the Fly
只需填写表格数据，单击生成，并复制代码到样式表。

Firdamatic: the Design Tool for the Uninspired Webloggers
通过完成一份简单的表格输入来创建和定制布局，轻而易举。

WordPress Theme Generator
在线定制独一无二的 WordPress 主题。只需改变颜色，设置，布局等参数，完成后保存并下载。

CSS Formatter and Optimiser/Optimizer
CSS 整形与优化工具，基于 CSSTidy 构建。

XHTML/CSS Markup Generator
通过框架加快 XHTML+CSS 设计工作，界面直观，语法缩短。

CSS 菜单工具

13 Styles – CSS Menu Generator
简单的 CSS 菜单生成器。

CSS Menu Builder
提供 30 多款横向菜单，700 多款垂直菜单，多种菜单组合方式应有尽有。

Pure CSS Menu.com
纯粹的 CSS 菜单生成工具。

CSS Menu Generator
多种现成 CSS 菜单可供选择，支持样式自定义。

My CSS Menu Generator – Horizontal, Vertical, Drop Down, DHTML CSS Menu
自定义创建浏览器兼容的 CSS 菜单。导航内容，方向性，均可控制。

CSS Menu Generator – Webmaster Toolkit
CSS 控制的文本形式的菜单有比图片形式的菜单具有更强的搜索引擎友好性。

CSS Menu Generator – CSS Portal
提供了较为丰富的 CSS 菜单模板。

List-O-Matic
著名的 List-O-Matic 可轻松制作最基本的 CSS 导航菜单，向导性的制作步骤更容易上手。

CSS 按钮

CSS Button and Field Tool
傻瓜化地配置样式和参数，即可一键生成代码。

Navigation Tab Menu Generator
菜单参数可调，改动刷新后可预览。

CSS 圆角

RoundedCornr: Rounded Corner and Gradient Generator
产生一个基本圆角。附带四个圆角图像文件和必要的 HTML 及 CSS 代码。

Spiffy Corners – Purely CSS Rounded Corners
简单生成 CSS 和 HTML 以满足创建无锯齿圆角，而无需使用图像或 JavaScript 脚本。

Spiffy Box – Simple Rounded Corner CSS Boxes
简单的 CSS 圆角框生成器。

Cornershop – Rounded Graphics for CSS Box Corners
生成圆角的 HTML 和 CSS 代码。

CSS 框架

CSS Frame Generator
构造基本的 CSS 框架，加强 CSS 编写的规格化。

CSS 表格

CSS Table Generator 0.1
简单的 CSS 表格生成工具。

HTML and CSS Table Border Style Wizard
配置选项丰富的可视化表格样式设计工具。

HTML Table Style Generator
简单配置即可设计美观的表格样式。

CSS Sprites

CSS Sprite Generator
提供源图片上传，重复图片合并，大小调整，拼合输出，CSS 输出等选项的控制，支持简体中文。

CSSSprites.com
把背景图片的拼合任务交给 CSSSprites.com，它会帮你组图并给出单个图片的定位。

CSS 文本和字体

CSS Type Set
简单的文本样式配置工具。

CSS 表单

Quick Form Builder
快速简洁的表单创建工具，只需定义字段名称。

Form Style Web 2.0 Generator
参数详尽的表单配置向导，生成的表单样式代码可直接下载。

CSS 是重要的，它正在越来越广泛的被运用。层叠样式表拥有很多表格布局所没有的优势，首先从布局或者页面的设计与出现在页面中的信息中作严格的分离，从而让页面的设计能够很容易被改变，仅用一个 CSS 文件更换另一个。难道它不够强大吗？恩，是的，其实它很强大。

在过去的几年里，网站开发者写了很多关于 CSS 的文章和开发了很多实用的技巧，这些能帮你节省很多时间。当然，如果你有足够时间也可能发现它们。在下面，你将会发现我们作为网站架构师真正不可或缺的技巧目录。它们确实是必要的，它们使我们的生活更简单。让我们看一看这 53 个基于 CSS 的技巧，如果你做网站开发，应该永远都愿意掌握它们。

1. CSS Based Navigation //基于 CSS 的导航
2. Navigation Matrix Reloaded //导航矩块翻转
3. CSS Tabs //CSS 标签
4. CSS Bar Graphs //CSS 条状图表
5. Collapsing Tables: An Example //压缩表格：一个实例
6. Adam’s Radio & Checkbox Customisation Method //亚当的单选框和复选框的用户化方法
7. CSS Image Replacement //CSS 图像替代
8. CSS Shadows(CSS Shadows Roundup) //CSS 阴影（CSS 阴影综述）
9. CSS Rounded Corners Roundup (Nifty Corners) //CSS 圆角综述（漂亮的拐角）
10. Drop Cap-Capital Letters with CSS //用 CSS 实现首字母下沉
11. Define Image Opacity with CSS //用 CSS 定义图像半透明
12. How to Create a Block Hover Effect for a List of Links //如何给链接列表创建鼠标悬停的区块效果
13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS) //用 CSS 实现引用（用 JavaScript 和 CSS 实现自动引用）
14. CSS Diagrams //CSS 图表
15.CSS Curves //CSS 曲线
16. Footer Stick //页脚帖允许一个网站页面的页脚显示在在浏览器窗口的底部或者网站页面内容的底部中实际最底的一个。
17. CSS Image Map //CSS 图像地图
18. CSS Image Pop-Up //CSS 图像弹出
19.CSS Image Preloader //CSS 图像预载
20. CSS Image Replacement for Buttons //CSS 按钮的图片替换
21.Link Thumbnail //链接缩略图
22. CSS Map Pop //CSS 地图提示
23. PHP-based CSS Style Switcher //基于 PHP 的 CSS 样式改变
24. CSS Unordered List Calender (CSS Styled Calender) //CSS 无序列表日历（CSS 设计的日历）
25. CSS-Based Forms: Techniques //基于 CSS 的表单：技巧
26. CSS-Based Tables: Techniques //基于 CSS 的表格：技巧
27. Printing Web-Documents and CSS //打印网站文档和 CSS
28. Improved Links-Display for Print-Layouts with CSS //用 CSS 改良打印布局的链接显示
29. CSS-Submit Buttons //CSS 提交按钮
30. CSS Teaser Box //CSS 内容摘要盒子
31. CSS Tricks for Custom Bullets //对于定义式列表的 CSS 窍门
32. Ticked Off Links Reloaded //用记号标出翻转的链接
33. CSS Zooming //CSS 缩放
34. Creating a Star Rater using CSS //用 CSS 创建星型评价
35. The ways to style visited Links //设计浏览过链接的方法
36. PDF, ZIP, DOC Links Labeling //PDF，ZIP，DOC 链接的标注
37. Displaying Percentages with CSS //用 CSS 显示百分比
38. Image Floats without the Text Wrap //没有被正文包围的浮动图片
39. Let visitors decide, whether or not will they open link in a new window //让访问者决定，是否会在新窗口带开链接
40. Simple accessible external links //简单易用的外部链接
41. Zebra Table with JavaScript and CSS //用 JavaScript 和 CSS 实现多条纹的表格
42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS) //用 CSS 实现垂直居中（用 CSS 实现水平和垂直居中）
43. Unobtrusive Sidenotes //不引人注目的旁注
44. Image Caption with CSS (Styled Images with Caption) //用 CSS 实现图像说明（设计给图像加上说明）
45. Dynamic Piechart with CSS //用 CSS 实现动态饼图
46. Format Footnotes with CSS //用 CSS 实现布局脚注
47. Hierarchical Sitemap with CSS //用 CSS 实现分等级的网站地图
48. Snook’s Resizable Underlines //史鲁克的可改变大小的下划线
49. Switchy McLayout: An Adaptive Layout Technique //马克布局改变: 一个自适应布局的技巧
50. StyleMap: CSS+HTML Visual Sitemap //样式地图：CSS+HTML 形象化的网站地图
51. Custom Reading Width //自定义阅读宽度
52. CSS Alert Message //CSS 提示信息
53. CSS Production Notes //CSS 产品注释