#raynix# » css

带着小抄去上班

raynix — Mon, 09 Mar 2009 07:34:30 +0000

你上考场那年带小抄了么？带了也别说，那是作弊。不过上班跟考试不同，你要尽可能的用上一切能方便工作的工具。下面是我最近喜欢的几张小抄：

以上小抄来自 http://www.addedbytes.com/cheat-sheets Thanks Dave!

Feed enhanced by Better Feed from Ozh

为IE6捉虫的一个小技巧

raynix — Fri, 24 Oct 2008 06:11:21 +0000

按照设计稿做好了CSS，但是唯独在IE6里面有着意外的表现：左栏和中栏之间的宽度比设计中指定值要大。是什么原因呢？我一时没想明白。于是我根据经验把可能影响到宽度的那个div的背景色改为红色，这样一看就明显了：

CSS里的设定是{padding:0; margin: 7px 0 0 10px;}，就是说上面留白7px，右和下不留，左边留白10px。根据经验，我怀疑是那个10px导致，于是为IE6单独写了ie6sux.css，并在里面补上{padding:0; margin: 7px -10px 0 10px;}，在右边给出-10px作为补偿。问题解决。

分析：IE6对留白（margin）的处理与众不同，留白的宽度似乎没有受到总宽度的限制，因此导致了右边超长出来。这应该算是个加减法级别的bug了。好在IE6用户会逐步转移到IE7，以后应该不必受此bug讨扰。

Feed enhanced by Better Feed from Ozh

论坛上图片的自动等比缩小

raynix — Thu, 12 Jun 2008 09:06:07 +0000

现在一张照片真的可以要多大有多大。特别感谢各DC制造厂家。

参考HTML Image Auto Resize, HTML图片大小自动调整

对于我的情况，帖子的css class是content，所以如下写即可：

.content img {
max-height:600px;
max-width:600px;
width:expression( (this.width > 600 && this.width > this.height) ? '600px': this.width+'px');
height:expression( (this.height > 600 && this.height > this.width) ? '600px': this.height+'px');
}

其中max-height/max-weight是标准css元素，可以被遵循标准的各个浏览器支持，IE7也可以。expression是IE6的私家菜:)

Feed enhanced by Better Feed from Ozh

习惯的力量：table VS div

raynix — Thu, 10 May 2007 13:54:03 +0000

记得我当初学习制作网页时，刚刚学会了用table，相当的有成就感，貌似已经没有我做不出来的页面布局了。后来，饭碗被fireworks这类页面“切割”软件给抢了，fireworks切一张设计图，也就几分钟的事。于是之后再说做网页，无非是用fireworks切方块了。

最近这几年，由于工作的原因，我的时间基本上都放在linux、mysql和ruby on rails上了，用进废退，“Web design”技能我差不多都还给教材了。这几天晚上没事给这小博改版，才发现世道已经变了，HTML被XHTML取代，CSS被CSS2取代，更要命的是布景模版里一个table都没有，全是div了。难怪老人家说逆水行舟，不进则退。这回我退的可以了，赶紧恶补吧。不过习惯的力量真是强大的，一边是熟悉但乏味的旧方法，一边是陌生但精彩的新方法，脑子里却总是不自觉的用旧方法思考起来……慢慢来吧。

Div也是方块，但是div的方块比起table的方块来，的确灵活多了（table指老式HTML+CSS页面布局，div指XHTML+CSS2布局，不过HTML+CSS应该也可以用div布局）：

table是顺序的，下一个td永远在上一个td的右面，而且水平一致；而下一个div可以在上一个div的任何方向上。
table是平面的，一个table不可能遮住另一个table；而div虽然不是3D的，但是是有层次的，一个div可以部分或全部遮住另一个div。
table定位永远是从上堆到下，从左堆到右；而div定位可以也是这样的常规顺序定位，也可以是相对定位（{posion: relative; float:right; top: +10px}这样一个定义就是说此div相对当前行居右对齐，并且顶部比当前行的顶部低10象素。页眉上的抓虾按钮就是采用类似方式定位的），还可以是绝对定位（{posion: absolute; left:...; top: ...;}以left,top的座标形式定位当前div），更可以是固定定位（{position:fixed;....}定位在屏幕上某点）。

另外XHTML相对HTML变化也很大，虽然我们习惯了一些不规范的写法，而浏览器也牵就我们，能把一些不规范的页面正常的显示出来，但是规范毕竟是大趋势。经过我的一番努力，本站已经通过了W3C的XHTML1.0 CSS2.0规范检查，链接在页脚上。你也可以用此工具检查一下你的网页是否已经XHTML了。

Feed enhanced by Better Feed from Ozh

WordPress改版手记

raynix — Sat, 05 May 2007 17:01:37 +0000

今天很有成就感，我把内森忽悠的也来玩Wordpress了。比起blogger、sina、sohu等现成的blog套餐，Wordpress就是个性DIY了。这里不谈Wordpress的安装等问题，只说说如何改版。

首先，虽然是DIY，但是我们没必要重新发明轮子，去WordPress官方布景站去搜一个合个性的布景吧。下载以后，把这个.zip文件解压缩到你的Wordpress布景文件夹，wp-content/themes下面，例如wp-content/themes/mytheme。Linux主机的话要记得chmod一下，使mytheme文件夹可写，这样以后你只需要wp-admin就可以修改布景了。

然后进入wp-admin，点开presentation->themes，如果文件夹没放错地方，那么这里应该出现你刚才上传的新布景了，一般还有预览图片呢。点击新布景，再看看你的WP站，已经旧貌换新颜了。接下来是一些DIY了。

布景DIY其实就是编辑HTML、CSS，有一定PHP基础的你可以做更进一步的定制，显示一些原来模版上没有的东西。具体如何修改HTML、CSS，这个就不是几句话说得清楚了，我这简单说说WP布景各部分的功能：

Stylesheet就是CSS了，现在绝大多数风格，例如背景色、前景色、字号、间距等等都在CSS 里做了
sidebar是右侧栏模版，一般显示blog分类、日历、归档等等
main index就是首页的模版
archives：归档页面模版
comments：评论模版
footer：页脚模版，一般是版权信息等等，powered by wordpress！
functions.php：这个是布景调用的php函数，轻易不要动
single post：点击一篇文章进入的单页的模版，类似main index，只是少了一层循环
404：页面未找到错误的页面模版
search results：搜索结果页面模版
page template：自定义页面，例如about，的模版，也类似single post
header：页首模版，一般是标题、导航所在

好了，最后记得在开始修改之前把原来模版内容先复制到本地，例如notepad里面，以防不测哦。

Feed enhanced by Better Feed from Ozh