作者:鹏飞网络 时间:2014-7-5 分类:网站建设知识
现在网站技术已经非常成熟了,基本上90%的网页已经完全抛弃了table排版布局,但一些新手使用div+css还可能存在这样那样的问题,我们以下介绍一些div+css的使用小方法。
第一:网页版块水平居中
css中使用*{padding:0px;margin:0px;}定义整体居中,然后在标签的属性中使用 style="margin:auto;"。
第二:内容居中:设置标签的style属性,text-align:left内容靠左对齐,text-align:right右对齐,text-align:center居中对齐。
第三:设置边框需要注意
一般在设置一个区域块四边线为1时,如果你的div块宽度设置的是500,那你加上border: 1px solid #CBDDE1;这个宽度以后会根据浏览器不同而出现两种情况,一种是还是500,另一种是502,这样的话就可能造成你的总体宽度不够导致版块错位,这也是一些网页经常会在不同浏览器显示的效果不同的原因,正确的做法是做一个div宽度设置成500,然后在其中嵌套一个div,把这个加上加上border: 1px solid #CBDDE1;,代码如下:
【div style="width:500px;border: 1px solid #CBDDE1;"】 内容 【/div】
改成
【div style="width:500px;"】
【div style="border: 1px solid #CBDDE1;"】
内容区
【/div】
【/div】
注:复制测试的时候请把【】换成<和>
第四:div使用float:left浮动属性会出现他的父div内容块大小不会自动改变,这种情况只要在使用float以后加上clear:both就可以解决。
第五:单行内容在div垂直居中,设置一个div高度为50,那只需要再设置一个行高50就可以,例: style="height:50px; line-height:50px;"
第六:设置整体的布局浮动块的时候不同浏览器也有可能会造成错位,一般在网页上需要划分左右列的时候可以在使用float:left属性中加上display:inline;。
.......
一般使用div+css排版的时候会出现各种问题,只要制作人员心平去和的去思考总会解决的,有解决不了的可以联系我们技术人员寻求帮助。