我在这里: 首页 » 网页设计 » 浏览文章: 网页设计之Z-Blog主题CSS代码修改心得和体会
« 北漂之四月北漂有感北漂假日之2008年的5.1假期 »

网页设计之Z-Blog主题CSS代码修改心得和体会

#divAll{width:100%; margin:0 auto; padding:0}

#divPage{width:100%; margin:0 auto; padding:0; text-align:left; float:left;}

#divMiddle{width:962px; margin:0 auto; padding:0; text-align:left; float:center;}

#divSidebar{width:175px; margin:0 0 0 0; padding:0 0 0 0; text-align:right; float:left;}

#divMainIndex{width:475px; margin:0 0 0 0; padding:0 0 0 0; float:left; text-align:right;}

#divMain{width:766px; margin:0 20px 0 0; padding:0 0 0 0; text-align:center; float:left; border-right:1px dashed #BDBA9C; }

#MidContent {width: 302px; margin:0 0 0 0; padding:0 0 0 0; float:right; text-align:right; color:#333; line-height:160%; border-left:1px dashed #BDBA9C; border-right:1px dashed #BDBA9C;}

 属性值解析:
width:页面宽度;
margin:页面边缘与边缘之间的距离;
auto:自动调整距离;
padding:边缘与内容之间的距离;
float:页面的对齐方式;
text_align:文字的对齐方式;
border-left:页面左边线;
border-right:页面右边线;
1PX:页面左边线的单位距离;
dashed:虚线;
#BDBA9C色值(具体颜色可以通过PS查询);

DIV类名解析:
divall:在这我定义它为整张页面(这可以比作背景)
divpage:可以理解成divall
divmiddle:中间页面
divsidebar:边页面
divmainindex:主要区域
divmain:主要区域内容
midcontent:剩余页面内容

以上是北漂领袖东Blog目前整体框架的CSS定义,按以上摆放顺序效果图如下:

如图:我把宽度最大值定为962PX 高度在一定的情况下制定的,每个页面设置相对前面一层页面宽度和高度都缩小5PX ,目的为了让大家看的清楚些!

看我BLOG现在是右边广告,中间文章,如过想两者换个位置的话应该如下图叠放:

其实只是最后2张层的对齐方式改变了而已,从图看出不难!

分析步骤:首先改别人的主题一定要记得看人家是如何定义属性的,就是那个*.CSS的文件,改变其中某个属性值就可能引起全局变化哦,很神奇,很有意思的.一般都在主题文件夹根目录的,用记事本打开就可以进行修改了.然后找到你想要改的类名,进行慢慢调整了,别钻牛角尖,多试着换个思考方式去想问题,这样可以事半功倍哦!


有一节课上,陈程老师讲到在网络调研中发现:很多人看网页的时候,一般是F型看的,右边的内容很容易被人忽略,右上角很容易被人误点,在右上角加个广告的话,那肯定可以带来很高的效益哦!推荐在右上角加个CPC型的广告
从那节课后,我就决定要改变BLOG原来的样式,把中间的广告内容和中间的文章换个位置,自那以后我每天去研究BLOG代码,试过好多方法,改过页面大小,重新定义所有类(这方法虽然可行,但很麻烦,一般人改一半自己都会晕)一次次修改,一次次失败,让我感到特别的无奈,想过放弃,但我没有,我还记得我来学习的目的,无论怎么样?我不会再轻易放弃,学校还有好多老师,同学他们都可以帮我,真的不会可以求助他们。虽然我走了很长一段歪路,但很觉得,起码我真正了解了CSS的作用!

我的BLOG就是根据每层页面的对齐方式和页面内容的位置,适当调整对齐方式即可达到得到所想要的位置。如果你在没看分析图的时候靠想象力把这个图分析出来,那你的逻辑思维和空间想象力应该挺强了!

以上是我对自己BLOG主题模块CSS的分析,这是我两周(人笨,学的比较慢)来改CSS的一点心得体会,希望可以对那些和我一样有想改主题,还没找到人有所帮助!

记得以前游戏学院的一位程序老师说过改别人的代码很麻烦,有那些去改的时间不如自己写,同样的时间可能效率还更高些,我觉得也是。如果有能力还是自己做比较快,去了解别人的东西是比较麻烦的,挺费时间的毕竟不是人家的思维和你自己的思维是不一样的,按别人的想法去做的话会很吃力。

建议大家原创为主,不要总去去抄袭,COPY别人的,当然可以取其精华,不断学习别人的上处弥补自己的短处,才可以学的更多,人才可以更完美!


作者:陆晓东
MSN:lud1987924@live.cn
原文地址:http://www.lxdong.com/post/css-xindetihui.html
版权申明:本博客原创文章,系本人原创。欢迎各大网站或个人转载,转载时请务必保留原作者信息及原文地址,否则将保留追究相关法律责任的权利!
  • 相关文章
  • quote 1.啊
  • 打磨打磨打磨打磨打磨打磨打磨打磨打磨打磨打磨打磨打磨打磨打磨
  • 2008-11-12 11:28:59 回复该留言

发表评论

为了防止SPAM,含链接的评论需要审核后才能显示。

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

Search