李家界网站建设-第10天:响应式高度 w3cn.org

2021-04-22 09:12 jianzhan
--------

李家界网站建设

-------

假如大家想在3列合理布局的最终加一行页脚,放版权之类的信息内容。就遇到务必对齐3列底部的难题。在table合理布局中,大家用大表格嵌套循环小表格的方式,能够很便捷对齐三列;而用div合理布局,三列独立分散化,內容高矮不一样,就很难对齐。实际上大家彻底能够嵌套循环div,把三列放进一个DIV中,就做到了底部对齐。下面是完成事例(白色情况框仿真模拟一个网页页面):

这里是#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;} 这里是#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF; }包括了#menu,#sidebar和#content 这里是#menu{ FLOAT: right; MARGIN: 2px 0px 2px 0px; PADDING:0px 0px 0px 0px; WIDTH: 400px; BACKGROUND: #ccd2de;

这里是#sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; },情况色调用的是#main的情况色

这里是#content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;}

这里是关键內容,依据內容全自动适应高宽比

这里是关键內容,依据內容全自动适应高宽比

这里是关键內容,依据內容全自动适应高宽比


实际款式表都写在相应版块里了。关键在于#mainbox层嵌套循环了#menu,#sidebar和#content三个层。当#content的內容提升,#content的高宽比就会增高,同时#mainbox的高宽比也会撑开,#footer层就全自动下移。这样就完成了高宽比的自适应。

此外值得留意的是:#menu和#content都是波动在网页页面右面"FLOAT: right;",#sidebar是波动在#menu层的左边"FLOAT: left;",这是波动法律规定位,还能够选用肯定精准定位来完成这样的实际效果。

这个方式存在另外一个难题,就是侧列#sidebar的情况没法百分之百。一般的处理方法就是用body的情况色来填填满。(不可以应用#mainbox的情况色,由于在Mozilla等访问器中#mainbox的情况色无效。)

CSS合理布局16例 onestab:三栏复合型合理布局演试 onestab:随意屈伸的三栏式版面

Ti凡科抠图:[onestab 的"P.I.E"专题] 也有更多精彩详细介绍,强烈推荐去看看。

TOP ---------

李家界网站建设

------------