Recent Comments
Tag Archives: css
以速度的名义
网站如何留住用户？除了内容吸引人之外，最重要的一点就是网站的访问速度，如果连打开都成问题，还谈什么用户体验？
网站的访问速度一般受制于许多方面的原因：
网站带宽及线路、网站服务器吞吐量、服务器脚本程序、客户端优化。
今天的重点就是说一下客户端如何优化才能加速访问网站。
(more…)
纯CSS画三角形
如果要在页面上输出左边这个三角形，大多数情况下，我们想到了做一张图片。
做图片直观、方便，但图片需要下载，会增加一次页面请求。
如果你有对页面加载速度些偏执，采用图片一定不是你的首选，其实用纯CSS也能解决问题。
比起图片，我们仅仅增加页面上几十个字节的大小，换来了减少一次页面请求的时间，何乐而不为呢？
如何用纯CSS画三角
原理很简单，利用border属性在交界处的分割线来完成。
我们给一个div画上粗一些边框，然后给4条边框分别上色之后……
如下图：边框的交界处采用了斜线分割。
Tagged css
使用WordPress的子主题功能
WordPress有众多主题模板，即便不会自己做主题，也能从中选出一个自己喜欢的。
但即便如此，自己中意的模板可能还是会有些小地方不尽如人意，或者说主题作者总有自己的喜好，不可能做到面面俱到。
这时如果你会点HTML知识，那可以自己修改这个主题，一般Wordpress主题都是符合GPLv2协议的，允许你去修改。
不过当作者将主题升级，你从后台升级主题时，总会收到一句提示 “主题升级后，你所作的所有修改都将消失”，如果你的主题作者很勤快，经常更新，那这对你来说将是一场噩梦。
解决方法
不过好在Wordpress支持“子主题”技术，利用子主题我们可以 不修改原主题代码 而达到 修改原主题式样 的目的，很拗口是不是？简单来说，就是制作一个原主题的镜像，在这个镜像中，我们只把需要修改的部分写进去，而不是直接修改原主题，这样在原主题升级后，我们做的修改依然都保存着。
怎么做？
WordPress的主题都存放在wp-content目录中，以我用的主题“lightword”为例，我们建立一个目录，名字就叫“lightword-child”，也放在wp-content中。
(more…)
DIV在Firefox中大了2px？
刚接触用Div布局时，许多人都只针对IE开发。但随着其他标准浏览器在市场中出现的比重越来越大、人们对于标准越来越重视，目前针对W3C进行开发、对IE系列进行兼容已经成为主流。
Div标签，作为标准化Web应用来说，已经成为最重要一个名词。甚至在网络上经常出现“DIV+CSS”这类词语来表示标准化Web开发。
曾经在给一个老网站做兼容Firefox时出现一个问题，现在看来这完全不是问题，但在当时着实费了一番脑筋。
当时在将页面中凌乱不堪的结构重新布局时发现，有些Div在Firefox中会多出2px，有些则没有。
太令人费解了，同一个页面，对Div居然有2种解释？
但在观察后发现，所有大了2px的Div都有边框，就是这个边框使得Div大了2px。
一番google后，终于明白其中的道理。
IE和W3C分别有一套盒子模型，Firefox中采用W3C标准模型，而IE中则采用Microsoft自己的标准，
看下面2个示例图：
margin-top失效？
最近在处理一个页面时发现一个奇怪的现象，参考下面简单的HTML代码：
<style>
#parent {width:200px; height:200px; background-color:red;}
#child {width:100px; height:100px; margin-top:10px;background:blue;}
</style>
<div id=”parent”> <div id=”child”></div> </div>
Firefox中的margin-top:10px失效了 IE中margin-top:10px正常
Tagged css, html, margin-top, margin折叠
