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

2021-05-27    分类: 网站建设

现在网站技术已经非常成熟了,基本上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排版的时候会出现各种问题,只要制作人员心平去和的去思考总会解决的,有解决不了的可以联系我们技术人员寻求帮助。

网站标题:网页使用div+css排版的一些小技巧
本文链接:https://www.cdcxhl.com/news/115235.html

成都网站建设公司_创新互联,为您提供电子商务企业建站动态网站网站改版网站收录定制网站

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网站建设公司