Badst' weblog

总结 CSS3的各种效果太炫了，和几年前相比省了不知道多少功夫，一些简单的效果再也不要用图片了。 记得之前做的那个阳明的网站，一个透明效果搞到半死:( 有用的效果代码：（因标准不统一，各大浏览器有所不同，Firefox代码前加“-moz-”，Chrom/Safari代码前加“-webkit-” border-radius 圆角效果值越大圆的半径越大。 box-shadow 盒子阴影。可同时定义很多个，在中间以逗号分开“,”详见：CSS3属性Box-shadow text-shadow 文字阴影。详见：CSS3:文字阴影知多少 background 滑动门技术，一个图片，多个用途。通过控制背景的位置得到不同的显示结果。 CSS3里还能同时定义多个图片，以“,”分割，IE8目前都不支持这样的写法。

第一个字体写英文字体，然后第二个紧跟着中文字体。 font-family: Arial, ‘Microsoft YaHei’, Verdana, Sans-Serif; 这种方法Chrome支持，IE貌似支持的不好。已经确认IE无法支持。速度把CSS改回来。 IE会先用Arial的字体套在中文上，发现没效果，就用了默认的宋体！ 目前没有解决办法，暂时全用雅黑吧。 例： text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.

完全偷paragon的样式，Google Chrome的审查元素功能太好用了。。 comments.php里死活找不到样式在哪改的？搜了下 <?php wp_list_comments(‘type=comment&callback=mytheme_comment’); ?> 这个函数，才找到WordPress官方codex说明里的用法。原来样式是在function.php里面，果断改掉了。 You will need to define your custom callback function in your theme’s functions.php file. Here is an example: 上一篇/下一篇中的圆角方块效果 #artical ul.prevnext a { color: gainsboro; text-shadow: #191919 1px 1px 0; background: url(“images/pagination_bg.png”) repeat-x; padding: 6px 11px; font-size: 0.9em; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 1px 1px 3px [...]

很诡异文章发表的是<code>包含着<ol>，但实际结果却倒过来。只好重新编辑css。 在HTML编辑里，<code>后面回车再接<ol>才可以。。

只加了style.css，header，index，footer。其他的是扒别人的，还没做细致修改。 桂林山水的顶部背景，整体灰黑马赛克背景，主内容和side的分割背景，每篇文章的背景。 而且每篇文章都是用列表<li>来表示的而不是<div> 文章内容里的<li>标签还要重新定义一下。   发现box的宽度问题有了一个很好的解决办法。 IE的宽度是包括了margin,broder,padding的，这是公认的一个BUG，但这也不是没有好处，好处就是定下一个宽度后，不论margin,broder,padding的属性怎么变，整个的宽度不会变，变的只是最里面的内容的宽度。 现在的新一代浏览器都会正常显示了，但在设定一个宽度后，如果padding增加，那总宽度就增大了，不得不再调整这个宽度。解决方法就是：再套一个DIV，然后设这个DIV的padding。比如用.section。 整个网站都可以用这种方法实现15px的padding效果，15px是个很舒服的值。

在仿制Paragon的风格时确实遇到这个问题。 以#main定义主内容页面的背景图片。高度根据#container和#sidebar-second的高度自适应。 方法一： 一个神奇的class,在名为clearfix层的最下方产生一个高度为0的空格。IE8暂不支持。 .clearfix::after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; } IE则需要手动加代码 <div style="font: 0px/0px sans-serif;clear: both;display: block"></div> 方法二： 要实现自适应高度，div层必须具有float属性，float:left的话，div就跑到页面最左边去了，这好办，我在它的外面再套一层div，把位置定好，那么里面的就算float:left也不会被 移动位置了。 最外层#mainfather: margin:0 auto; 内层#main: background: red;float:left; 相比较来说，这个方法更简单和稳定。 代码测试：http://www.blueidea.com/tech/web/2006/3210.asp 参考来源：http://www.syscy.com/articleview/2009-3-22/article_view_707.htm

http://www.w3schools.com/cssref/default.asp 包含各属性的介绍和演示 http://www.findmebyip.com/litmus CSS3.0在各个浏览器中的支持情况 http://www.css3.info/ http://www.css3-html5.com/

重装wordpress并重新开始研究CSS3.0+HTML5 使用CSS3.0做出一个自己的主题：样本：http://www.paragon.fi/ 每天坚持写一篇有内容的博文关于CSS3.0+HTML5 每天坚持收集关于CSS3.0+HTML5的信息 再也没有精力去搞魔兽插件