
艾默默同志编写的社区杂志模板虽然好用,
但自打对css产生兴趣后(之前应该也一样……),
看到那一大堆的套嵌表格就要抓狂。
有一天半的休息时间,感觉时间够,就自己把原来的整个杂志进行进行了全部的css化处理。
样式不做任何改变,仅用div和html tag对页面的元素进行css控制。
作品已经完成,有兴趣的点右边的图看看。
原来用表格套嵌的样式效果:>>点这里<<
这是第一次进行这么完整页面的css处理工作,除了排版不用再设计了,工作量和新作一个这样的页面有过之而无不及。
刚开始用之前自学的那些css知识已经完全够用,用float:left控制li来建立menu。
一直到开始做封面!痛苦的事情就来了,艾默默同志为了让封面图片有浮在前两个元素之上的效果。
原来使用的是表格切割法,把
封面图片切割成三块套嵌到表格中,这样,效果是有了,但是图片不仅丢失完整性,而且与前两个元素的背景的控制非常麻烦。
本着css能够实现一切的想法,我自然不会再去切割图片了,根据我之前的一些实验来看,让元素浮动到其他元素之上是很容易的事情。
但实际操作,问题就一堆堆涌上来了。
首先,利用负margin+z-index可以实现浮动效果,但是写在封面之后的leftpanel(为了减少margin,我决定先写位于右侧的封面)却遭了秧。
不同浏览器对css代码的支持度这下子体现了出来。
本来在dreamweaver编辑器、Firefox里都正常的封面之前的两元素后的左侧栏,在IE下却不能自动跟随。
这下子,我意识到了这次css改版的严峻性,身为firefox爱好者,我深深地感觉到责任的重大(自己寒一个~)。
于是乎,马上google。
得到两条解决措施:
1. 利用firefox支持对css的!important注释,而ie无法理解的原理,编写两条不同的css代码,针对firefox的用!important注释。
此方法简单可行。
2. 用js控制不同浏览器的显示,此方法彻底,不过我可没功夫去编写两套css代码。
接下来的工作就不需要这么多浮动技巧了。利用float进行左右控制即可。
不过对容器的套嵌控制的实践确实让我学到不少。
有时候,就是一个没有在子容器没定义width:100%就造成又要设置margin,margin的像素又不好控制的情况。
最让人头疼的是text-align的控制,整个页面是居中的,
但子元素们大都需要靠左排,有的有需要居中。
那个代码已经乱了套了,好像哪个元素都需要定义一下text-align,我现在自己都不清楚了,反正测试正常……
反正从中又学到一些小技巧。比如,css代码中,优先级是越写在最后的代码越优先,id比class优先。
不过这一切的努力好歹证明了自己的css水平基本入门了。但可怕的事情远不止这些。
昨天晚上好不容易临近下班弄完了,结果发现我们伟大的cms系统居然对一些css代码支持度很低,background定义的image就没法显示
分成两栏的li列表还是显示成一列,内容区不居中……霎时间有种要崩溃的感觉
好歹有些补救措施,起码把背景图片重新插进去了,其他的昨晚回家自己改了一下,不知道拿到cms编辑器里是不是可以正常了仍是未知数。
具体可以对比这两个页面:
1. 我上传到自己网站的页面
2. 社区杂志页面
第二个页面目前在firefox下根本就没法看。。。。
另外还有些奇怪的小问题。
在“酷图精选”栏目之后li的图标IE下就不显示了,害得我只有恶心了一把,手动添加小圆点
哪位给支支招,在此谢过。









辛苦您了!奖励小红花一朵!
在哪儿呢?
好啊,请教个CSS的问题:我博客上凡是蓝色的部分我想改成黑色,该怎么处理呢。
要不要把CSS贴出来给你?呵呵
貌似你的blog里的蓝色部分基本上都是图片……
这些文字可以改:
.entry h2 a {
color:#00A7D4;
}
a {
color:#00A7D4;
}
把这些改了。
呵,看来以后有什么难题又有一个问的地方了。
仰慕这个模板已经很久了,可以告知下载链接吗?(作者页面上似乎找不到)只是,恐怕我的yo2安装不了,不好意思在麻烦yo2站长了。
确实只能说明你没好好找。这些都提供了下载的。我也没空做调整,现在的样子就是原始设计。
作者是香港的服务器,访问超级慢,现在也不知道地址,反正你进入作者博客后找到download就对了。这些是skin不是模板,需要安装一个专门的skin插件,作者页面都有说明的
如果你想下更多的skin,还是好好看看作者的网站。
Hello, I’m Googlebot