网站建设知识企业官网定制开发,拥有网站建设制作的丰富经验,为企业提供高质量的网站建设服务

当前位置:首页 > 网站建设知识 > 网页使用div+css排版的一些小技巧
北京网站制作 网站建设公司 网站搭建 网站制作公司 企业建站 网站设计公司 网站开发 网站设计 北京网站设计 网页设计公司 常见问题 高端网站建设 企业网站建设 品牌网站建设 网页设计模板 网页设计与制作 网站建设多少钱 网站设计与制作 网站建设费用 做网站 做网站公司 高端网站设计 网站建设方案 网站建设制作 北京网站建设 网站建设知识 网站建设优化 网站建设空间 网站建设备案

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