您的位置：首页 > Web前端 > CSS

idv+css横向布局绝对定位

2011-06-16 07:17 288 查看

<!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=utf-8" />

<title>绝对定位css布局实例</title>

<style>

body

{

  margin:0;

}

#header

{

  position:absolute;

  top:2px;

  left:5px;

  height:80px;

  width:780px;

}

#nav

{

  position:absolute;

  top:87px;

  left:5px;

  height:400px;

  width:180px;

}

#content

{

  position:absolute;

  top:87px;

  left:195px;

  height:400px;

  width:590px;

}

#footer

{

  position:absolute;

  top:492px;

  left:5px;

  height:80px;

  width:780px;

}

div

{

  border:2px solid #000000;

}

</style>

</head>

<body>

  <div id="header">header部分</div>

  <div id="nav">绝对定位的nav部分</div>

  <div id="content">绝对定位的内容部分</div>

  <div id="footer">footer部分</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css header xhtml html border div

相关文章推荐

新的分享

章节导航