雨城自从本月初学习DIV+CSS网站布局以来,深深喜欢上了这种布局方式,感觉确实比用TABLE方便和条理清晰。在学习的过程中,也遇到了一些难题,记录于此,与爱好者共同讨论学习。
注:以下内容为本站原创,版权属飞腾设计网及本人所有,转载请注明出处,谢谢合作。请大家多多支持、鼓励本站,让我们有更强的信心,写出适用的教程,奉献给大家。[本篇文章持续更新中,建议网友加入收藏,以备参考……] [转自:飞腾设计网 www.feitec.com]
此文获得水夜云轻老师的大力支持,在此表示感谢。 [转自:飞腾设计网 www.feitec.com]
1、网页居中显示:
需要设置两个地方,一个是body,一个是外边框div。
CSS:
body{
margin:0;
padding:0;
text-align:center;
}
#main{ /*最外层DIV*/
width:760px;
margin:0 auto;
padding:0
}
2、文字垂直居中显示:
在DIV中定义一个行高与其高度相同即可。
CSS:
.title{
height:25px;
line-height:25px;
vertical-align:middle;
}
3、图片垂直居中显示:
在<img>标签中加入align="absmiddle" 即可。
4、清除浮动:
如果在同一行上有几个DIV并列显示,那么必须在其中加入清除浮动代码,如果在一行上只是一个DIV,好象不必清除浮动。
CSS:
.clear{clear: both;}
HTML示例:
<div id="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<!--清除浮动后,后面的代码排列就不会有任何变形了,不管是在IE还是FF中,都很正确-->
<div ……
5、三列结构中的的DIV写法:
适用于左右栏是窄幅,中栏为主要内容显示,让其宽度自适应。
CSS:
#main{
width:760px;
margin:0 auto;
}
.left{
width:100px;
float:left;
}
.right{
width:120px;
float:right;
}
.center{
margin:0 120px 0 100px;/*页面中栏内容,未设置浮动,通过设置左右边界达到此DIV放于中栏的效果*/
width:auto;
}
.clear{clear: both;}
HTML:
<!--注意:center这个DIV的位置-->
<div id="main">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
<div class="clear"></div>
</div>
6、textarea在FireFox中不能自动换行的处理:
有时我们可能会遇到这种现象,在IE中可以自动换行,但在FF中就是不行,即使加了word-break:break-all;word-warp:warp;也没有效果,怎么回事呢?
主要原因是因为我们加入到textarea中的英文字符或代码过长,造成它误识别为一个单词所致。
解决方法也很简单,就是在内容中,人为加一些空格,让FF自动识别为多个单词,从而就能正确换行了。
更多的新手学习DIV+CSS难点之经验总结请到论坛查看: http://BBS.TC711.COM
【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】
来源:
飞腾设计网
日期:2008-3-13