imovies
当前位置:首 页>> 百 宝 箱 >>DIV+CSS 学习心得<7>:布局中我的些许疑惑

DIV+CSS 学习心得<7>:布局中我的些许疑惑

  在没有知道DIV这个东西之前,我是知道CSS的,在知道CSS之前俺都是用TABLE的,布局网页无非就是几行几列的一个表格,上下左右,配合前期PS里面做好的整体页面效果图,来布置具体的表格该怎么分割和组合。因为折腾了时间长了,人就懒了,TABLE+CSS也倒是用的很欢,然后慢慢也知道了DIV这个东东,但是已经习惯了表格,所以就没有去深究DIV这个事情。趁着春节前没什么事,所以还是打算把DIV这个玩意好好的收拾一下。前面也说了,要折腾,就要找个东西开刀,所以就先拿博客试水了,博客程序用的比较早,虽然是ASP+ACCESS的,也够用了,就一直也没换,顶多是一年半载空闲了换个风格,就这么一直用了下来。
  博客页面的模板架构是TABLE+CSS的,最原始的情况是每个栏目都可以单独弄一个模板,我也懒得折腾,就整个博客不管啥栏目都用了一个,基本布局就是上[页头:header,顶部登录信息+图片展示区],中[左:博客导航内容,右:博客正文列表],下[页尾footer],大框架就是这样了,很简单明了。于是就动手在DW里开始DIV+CSS的折腾了,根据大框架布局的话,基本也就是5个DIV定乾坤。头部是通栏,登录区和中间左右结构还有尾部是指定宽度的,如下图:

  大局已定,开工了。DW点火,5个DIV速度码好,结果,嗯,不是我想象中的那样哦,一头雾水,NND怎么都千篇一律的各占一行呢!第三和第四个必须左右排练啊,剩下三个你满行了也就算了,我也就不先惦记了,但是中间左右排列的部分,得想办法让他归位,先看看原始状态没有CSS哦。

  于是乎放Google,爬吧,肯定有前人也有我这种疑问,找啊找,摇啊摇,试啊试,总算到了外婆桥!功夫不负有心人吗。可以上CSS了,当然是外部CSS链接了,main.css开始入场。header通栏的好办,先不管他默认就是通栏的。第一个问题来了,登录区login part部分是有宽度的,要居中显示哦,放Google得知css里该怎么写,margin-left:auto; margin-right:auto;这两刀就安了,意思是让左右两边自动适应浏览器的宽度。第二个问题接踵而至,要让横行的两个DIV改左右排排坐吃果果啊。继续放Google吧,得知还得在他俩外在整个大的DIV[id=center_content],因为要居中,left nav和blog content list得套进去,且这两display:inline,就是前面说的让这两块在同一行排排坐,一个float:left,一个float:right,要不然这一左一右是搞不定的。好了,css布置完毕,点击下面的运行代码按钮就可以看到布局已经完成。




CSS样式表内容:


body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-image:url(images/bgimg.jpg);
    background-attachment:fixed;
    color: #333333;
    margin: 0px;
    padding: 0px;
}
p.demotext{font-family:'微软雅黑','黑体','宋体',Verdana, Arial, Helvetica, sans-serif; font-size:20px;}

/*     header      */
#masthead{
    background-image:url(images/blog_top_back.png);
    background-repeat:repeat-x;
    height:126px;
    margin-bottom: 10px;
    padding: 0px 0px 0px 0px;
    width: 100%;
}

/*     Login part      */

#login_part{width:1088px; height:100px;background-color:#FFFFFF;margin-left: auto; margin-right: auto;}

/*     left nav      */
#center_content{background-color:#FFFFFF;width:1088px;overflow:auto;margin-left:auto; margin-right:auto; margin-top:10px; margin-bottom:10px;}
#left_nav{display:inline;float:left;width:210px;background-color:#D1D1D1; padding:5px;}

/*     blog content list      */
#blog_content_list{display:inline;float:right;width:820px;background-color:#DFDFDF;padding:10px;}

/*     footer      */
#footer{width:1088px; height:100px;background-color:#FFFFFF;margin-left: auto; margin-right: auto;}


  上面还有个问题,就是左右排排坐的两部分,因为内容的高度会不同,所以牵扯到一个背景自动加高适应的问题,就是id=center_content这个div的背景,不管里面左右两个内容块谁高了,id=center_content这个div的背景色都会自动向下延伸,他的css里要加上overflow:auto,我Google的结果是overflow:hidden,按字面意思理解超出了一个是自动,一个是隐藏,我也不知道具体啥差别,反正都可以,我就用auto吧,比较符合我想的那种自动适应向下延伸。
  既然大框架的布局已经搞定,各个部分的细节问题就问题不大了,无非是在每个大块里添加若干个子块嵌套进去,再逐个定义好各个具体内容部分显示的class即可,之前也专门说了关于ID和Class的区别了,大框架唯一的部分我就用ID了,大框架里面的子块,子内容全都用class。还有就是html代码和css样式表文件中的注释行的问题,最好养成习惯,加上必要注释,你能看懂的,好记性不如烂笔头啊,有了注释内容,一年半载后你再来修改更新你的样式表或者修改html将会非常方便,事半功倍哦。即便是你不干了,接你班的后来者也会从心底里感谢你的,如果你换了一个地方,接手别人的东西之后要是看到同样的注释,你的心里也会豁然开朗的,我为人人,人人为我。
  关于HTML代码里注释行还得注意一点,注释行的注释方法,必须按照W3C的标准注释行来,<!--注释内容-->这种,这就是标准!切记,如果你那短线多了或者少了,Firefox这种极其W3C的浏览器,会把你的页面解释得一塌糊涂不堪入目,不信你试试看,除了Firefox之外其他的浏览器到是没有问题,对这个注释行的兼容都很好。所以为了适应所有的浏览器,还是按照标准去注释吧。另外还得再唠叨一个事情,如果你的网页是gb2312编码的,那你的css文件也是gb2312编码,默认的话不需要改动。如果你的HTML页面是utf-8的编码,那你的css文件也一定要是utf-8编码,否则你设定的样式会莫名其妙的失效,比如font-family设置的字体失效,虽然在DW里显示无问题,但是用浏览器查看的时候字体设置无效。
  在初步折腾DIV+CSS布局的过程中,基本我就碰到这么多问题,也基本都能Google之解决。如果你有什么新鲜问题需要交流也可以留言,咱们一起耍。
[Edit on 2011-2-10 3:05:22 By 笑傲江湖]
微信支付宝

标 签:CSSDIV

评 论0 引 用0 浏 览3706

上一篇[MOVIESHOW] Faster 极速复仇

下一篇CP+2011:Camera & Photo Imaging Show

说点什么:

正文内容:

 

图片博文

点击查看原图,原图模式下ESC键退出。

扫一扫分享之

人到穷途应一笑,几凡失意仍能傲。成败何须问江湖,我心依旧任逍遥。
这一生只想好好做个平凡的人,有个家有个梦,陪我迎接每一个早晨。
这一生只想好好做个平凡的人,何必争何必问,只有快乐开心才是真。