标签 CSS 下的所有文章

WordPress自带主题twentytwelve的CSS学习笔记

现在大部分流行的WP主题都采用了响应式设计(Responsive Web Design),我的博客主题修改自twentytwelve – WP自带的的一个轻量级主题,个人认为它的样式表写法在兼容性上已经做得很好了。今天就来提炼一下其中的精华,也包括一些不太常见的CSS条目。 查看详细 »

WordPress标签云美化设置

我的博客用的主题是从twentyTwelve修改过来的。个人比较喜欢这个主题干净简洁的风格,它的特色就在于无图片,载入快速,修改起来很很轻便。但是这个主题在一些地方还是略显粗糙的,需要自己动手打磨一番。这次我就拿标签云开刀。

默认的标签云字体看上去不太舒服,尤其是中文小字体,变形比较严重。网页设计中中文字体最好不要小于12px,否则就会产生变形。而这里的字体最小单位是8pt,显然不符合要求。
先贴上修改前后的对比图
blog_11_1 查看详细 »

对404页面的感想

在我从事网页设计的初期,在繁杂的工作压力下,是不知道SEO为何物的,能把一大堆页面维护好不出错已经很好了,别人在乎的也只是你设计的页面是不是漂亮。老板们口中经常提及的也只是Alexa排名。然而渐渐的,开始有人提出要把404页面作为网站标准配置,在这股热潮下大部分人所做的就是把系统默认的那个报错页面替换一下。但就是有一些PM似乎是找到了风水宝地一样,要求在404页面上放了大量的广告,还放了很多注册充值的链接。。。这一股风刮过后,那些PM就不再过问404了,就仿佛它们从不存在一样。现在点击老东家的网站,尽管主站已经改版了多次,404页面还是N年前那个(点这里)。最要命的是经过后来的几次服务器搬家设置,它已经起不到404的作用了,打其他网址进去,只给你一行冰冷的服务器报错信息… 查看详细 »

兼容几乎所有浏览器的CSS背景透明

以前喜欢用PNG图片做背景透明,在IE6下再加个htc才能做到全兼容,每次要改透明度就得重新做一张PNG,比较麻烦。这里找到一个比较简便的方法,不用加载图片,缺点是CSS长了点(要满足兼容性,长也是正常的),不过能节约时间。

原理是在旧版IE中用滤镜,在IE9以后支持CSS3的浏览器中用RGBA色,包含了透明度值,CSS代码如下 查看详细 »

VOILÀ网站改版完成

VOILÀ网站(www.vhr.com)是公司最重要的平台网站,由我全面负责网站的改版,需要进行前端的全部重构工作。由于每天都有大量日常的零碎工作,这个网站的改版总需要我另外“挤”时间去做,历时大半年才算完成。所幸的是可以完全根据自己的想法来设计构架,做起来也很过瘾。

这是一个酒店的查询和订房平台,www.vhr.com是它的域名。但我们还为这个网站绑定了几十个其他域名,需要根据不同的域名载入不同的CSS,实现“换肤”的功能,以便让网站能够根据不同的酒店品牌实现“本地化”。实现原理也很简单,把大部分样式写在一个主样式表中;把“换肤”用到的颜色,图片等设置分别写在每个域名对应要载入的样式表中即可。经过一番“样式表大作战”,使我对网站重构有了更加深入的认识,获益良多。 查看详细 »

关于在PC上正常,在iPad浏览器中页面向左偏移的问题

一个很老的问题,一年前在做VHR项目的时候就碰到过,当时解决后没做记录。这次做Hilton网站的时候又碰到,一时记不起是如何解决的了,只好通过排差法从头来过。

如图页面,在PC各浏览器都完美,但一些板块在iPad上似乎无法居中对齐,底部文字又是撑满的。CSS设置宽度的时候顶部大图是100%,下面文字区域宽度1000px。检查了其他几个有同样问题的页面,宽度1000px的区域在iPad上都是撑满了浏览器宽度,而宽度是100%的区域反而都在右侧缩进去一截。这个问题在PC上不易被发现,但在iPad上很普遍。新做的网站一定要在iPad上检查一下哦!
关于在iPad浏览器中页面向左偏移的问题
查看详细 »