短标题(二,三,四文字长度)两端对齐的方式

首先说明,这是“世界末日”过后的第一遍文章。“世界末日”它如我们所想象的一样没有来,生活仍在继续,该承受的还是要承受,该追求的还是要努力去追求。

这篇文章的讲的主要是关于一行横向排列内容,而又包含前面标题并且要求它的文字两端对齐的一种方法。如下图,网上有很多方法,但是经过我测试,基本没有一种方法能通过所有浏览器测试。而以下这种方法则兼容了大多数主流浏览器(ie6、7、8、9,ff,chrome,safari)。

重点:必须定义标题的字体,这里我们设置字体为simsun; 继续阅读

发表在 前端技术 | 标签为 , | 留下评论

写在传说的末日前夕

今天是2012年12月21日,如果玛雅人的预言没错的话,那么明天就是世界末日。

在末日的前夕,我想写下自己的一些话语。

如果明天是末日,那么人类将会灭绝,他们所创造的几千年的文明也即将毁于一旦。我就无需再感叹人类的冷漠和人性的丑陋。也不会再看到人类之间的背叛,市面贪婪的嘴脸与日激增,猜忌更加是各式各样,物欲横流的世界迷惑了每个人的心。也许,世界末日就是为毁灭这种畸形社会而来的。

如果明天是末日,我就无需为自己的未来而迷茫,也不用因为现在的处境而尴尬,尽管人们所说的未来大多数是美好的。这个社会是不公平的,而且就我目前的情况,确实无法看到那些所谓的美好。 继续阅读

发表在 生活日志 | 标签为 , , , | 留下评论

关于三角形-css的几种写法

方法一:◆  制作法

重点:采用了两个标签内文字“”,并通过设置这个字符的颜色,字体,和行高,以及字符的字体大小,然后利用绝对定位的布局方法达到三角形的效果。

注意点:“”必须使用同一字体,否则在各个浏览器的展现方式不一样。还有必须设置行高。但遗憾的是,尽管这种写法在很多浏览器都能达到我们想要的目的,可是ie6却不知为何会出现如效果图一三角形顶部多一像素的展现方式(这需有待研究…)。于是为达到浏览器的统一效果,我们只能对ie6进行hack处理。 最终我们看到是,效果图二:

效果图一:未对ie6做兼容处理                                                                                     效果图二:对ie6做兼容处理 继续阅读

发表在 前端技术 | 标签为 , , , | 留下评论

自适应布局–中部内容自适应宽度

项目中虽然很少用到自适应布局,但是也有不少网站运用它,特别是一些大型的论坛网站,就拿本站的wordpress后台也是采用此种布局,因此了解这种布局的结构非常有必要。

特点和要求:左侧div和中侧div都在一个左浮动,并且宽度100%的大div中,并且此大div必须设置一个大于或者等于右侧div宽度的负右margin,在此大div左浮动的情况下,右侧div才会顶上来,与左、中侧div水平齐平。而对于右侧div的要求是:要与大div节点同级,并且需要设置右浮动。另外,想要左侧div与中侧div有一定水平距离,则要设置中侧div一个大于左侧div宽度的margin即可。

中侧div自适应宽度

以下是某个具体实例的代码: 继续阅读

发表在 前端技术 | 标签为 , | 留下评论

ie6 bug小结

1. 问题:ie6, ie7绝对定位元素不显示?

解决方案:在绝对定位元素外层加一空白div,不应用任何样式,方可让定位元素显示。

2. 问题:ie6 在绝对定位元素上,z-index不起作用?

解决方案:给绝对定位元素的整个DOM跟节点加z-index。

3.问题:ie6 下浮动的li 在中间的排产生错位?

解决方案:给li加一个min-height,当然这里不支持。下回会说道。 继续阅读

发表在 前端技术 | 标签为 , | 留下评论