html 请用相对定位 绝对定位、浮动,对下面的页面分别实现多栏布局并且居...
发布网友
发布时间：2022-04-27 08:58
我来回答
共1个回答
热心网友
时间：2022-04-20 20:57
利用相对定位 绝对定位、浮动布局代码如下（直接复制以后代码即可）：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>相对定位 绝对定位、浮动布局</title><style>#container{ margin:0 auto; width:1000px; clear:both; position:relative;/*相对定位*/}#header{ margin:0 auto; width:1000px;height:100px; background:#f00; color:#fff;}#father{ margin:0 auto; width:1000px; height:500px;}#left{ margin:0 auto; width:200px; height:500px; float:left; background:#00CCFF;/*左浮动*/}#main{ margin:0 auto; width:600px;height:500px; background:#0066FF; float:left;/*左浮动*/}#right{ margin:0 auto; width:200px;height:500px; background:#00CCFF; float:right;/*右浮动*/}#footer{ margin:0 auto; width:1000px; height:100px; background:#f00; position:absolute;bottom:0; left:0;/*绝对定位*/}</style></head><body><div id="container"><div id="header">header</div><div id="father"> <div id ="left">B</div> <div id ="main">A</div> <div id ="right">C</div></div><div id="footer">footer</div></div></body></html>
