当前位置: 代码迷 >> HTML/CSS >> HTML+CSS典型网页布局
  详细解决方案

HTML+CSS典型网页布局

热度:481   发布时间:2013-12-07 21:37:58.0
<!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>CSS布局入门,二列右列宽自适应</title> 
<style> 
body{ 
margin:0
} 
#top{ 
background-color:blue; 
height:100px; 
text-align:center 
} 
#left{ 
background-color:#cccccc; 
border:2px solid #333333; 
width:100px; 
height:400px; 
float:left;  
} 
#right{ 
background-color:#cccccc; 
border:2px solid #333333; 
height:400px; 
  
} 
#buttom{ 
background-color:green; 
height:100px; 
} 
</style> 
</head> 
<body> 
<div id="top">顶部</div> 
<div id="left">左列</div> 
<div id="right">右列</div> 
<div id = "buttom">下面-居中</div> 
</body> 
</html>

  相关解决方案