网站常识Common Sense

当前位置:首页 > 网站常识 > 网页使用div+css排版的一些小技巧
网站知识Website knowledge 网站常识Common Sense 推广知识Popularizing knowledge 空间知识Spatial knowledge 备案问题Filing problems

网页使用div+css排版的一些小技巧

作者:鹏飞网络   时间: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排版的时候会出现各种问题,只要制作人员心平去和的去思考总会解决的,有解决不了的可以联系我们技术人员寻求帮助。