取巧的边框等高

css_border左右结构是平常页面中最经常看到的结构,简洁一些的页面就会使用边框将左右两边隔开,但往往由于左右两边的内容可能是不等高的,所以就会有一高一低的现象。这个时候不管是给A写个边框还是给B写个边框,都会有高低不平,解决这个边框的高低不平之前有看过很多解决方法,但总的来说有些复杂,其实有一种取巧的方法就可以做到,那就是利用CSS属性中的负值。

比如这个示例图中的边框,取一个DIV将A、B两部分都包容起来,然后写border:1px solid #000;再给A容器写右边框border-right:1px solid #000;B容器也写边框border-left:1px solid #000;这样不管哪边高哪边低,都会保证起码有一条边框线是从头到底的。

但这样两条边框线就会造成重复,于是可以给B容器写margin-left:-1px;这样让两条边框重叠在一起,即可解决边框重复的问题。

PS:回头一看,写了个这么囧的日志,算了,既然写了就发了吧。

IE下文本被折行的解决方案

无论何时,IE总是让页面制作者感到那么的黯然销魂,尤其是IE6,IE7次之,虽然IE8已经做了很大的改进,但由于XP用户的数量实在太大,而且大部分不愿意升级他们的浏览器,所以页面制作者只能一次又一次的被IE6折磨得死去活来。

今天在写页面的时候,碰到了折行的问题,正好复习一下CSS中关于断行处理的问题,在这里纪录一下心得:

HTML结构及CSS样式如下:

<ul>
<li><a href=”#”>…</a></li>
<li><a href=”#”>…</a></li>
<li><a href=”#”>…</a></li>
</ul>

li {float:left; margin-right:10px; line-height:20px;}

阅读详细 »

为什么视觉设计师需要懂HTML

注:本文所说的视觉设计师专指网页视觉设计师。

网页设计师与平面设计师都归类为设计师,其实这两个职业是跨行业的,虽然有很多设计师一直在跨行业工作着。这两个职业的最大区别应该是在思维上,对于平面设计师来说,天马行空般的创新思维很重要,他们需要的是在一张白纸上勾画出符合客户需求的绚丽创意;而对于网页设计师来说,更多的是需要考虑创意在网络上实现的成本以及可能性,天马行空般的思维成了次要的。

这也就是为何很多时候,网页设计师去做平面设计师的工作要比反过来容易得多。也许可以用这样一个比喻来形容:网页设计师去做平面设计师的工作就像是放开圈养在马棚里的马,也许没了撒野的能力,但还能奔跑;而平面设计师去做网页设计师的工作,则更像是原本狂奔的野马突然被圈养在马棚里,框架的束缚会让野马变成手足无措。

阅读详细 »

博客侧边栏订阅样式共享

博客之前侧边栏有六个订阅方式,分别是六个不同的在线阅读器,当时考虑的是提供更多的阅读器提供方式以满足不同需求的读者,但通过对订阅统计的分析,发现订阅博客的读者基本上是在Google Reader和鲜果两大阅读器阵营,而且更重要的是除了六个阅读器外没有提供原生的订阅链接,所以就修改了这一块的样式。

有朋友觉得这个样式好看些,希望共享样式出来,所以在这里就把样式共享出来。这里的修改只针对Prower V2这个主题。

先下载这个图片上传到主题的images文件夹里:

阅读详细 »

前端开发调试利器:IETester

话说搞前端开发的,每天都要被那些不同内核的浏览器折腾得死去活来的,除去使用同一WebKit内核的Safari和Chrome,还有使用Gecko内核的Firefox,最要命的是微软的Internet Explorer系列浏览器,在市场上同时存在三个不同年代的版本,每个版本对WEB标准的支持都各有不同,这简直是要了开发人员的命。

从前年开始微软就说要强制升级用户电脑中的IE6到IE7,结果事实证明这只是个不是愚人节的愚人玩笑而已,直到今天IE6仍在用户桌面浏览器的份额中领先着。

而最为让开发人员头痛的是,一台电脑默认情况下只能装一个版本的IE,所以开发时即使要调试IE浏览器也只能是通过安装绿色版或是其他模拟IE的软件去进行调试,但由于这些软件并不是原生的IE浏览器,所以有些时候开发人员不得不面临在软件里调试正常的页面到了原生的IE下又出现问题的尴尬局面。

IETester则是个很优秀的IE调试软件,可调试的IE版本从IE5.5到IE8,基本上完全覆盖了市面上所存在的IE版本,当然如果还有比IE5.5更老的IE版本的话,那就直接抛弃外加鄙视他吧。

阅读详细 »