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

作者: 日期:2020-08-28 浏览:

现在网站技术已经非常成熟了,基本上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.hzmscm.com
主页
电话
微信
联系