[div+css布局][求教]诚心请教一个div+css布局的做法,谢谢大家了

NIJIA72 2009-03-29 02:44: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 id="ctl00_Head1">
<title>Untitled Page </title>
</head>
<body>
<div id="container">
<div id="pageHeader">
<div id="pageMenu">
这里是主菜单
</div>
<div id="pageStatus">
这里是状态栏
</div>
</div>
<div id="pageBody">
<div id="sideMenu">
这是侧边菜单
</div>
<div id="content">
这是正文部分
</div>
</div>
<div id="pageFooter">
这是脚注
</div>
</div>
</body>
</html>


一直以来都是用Table来布局,现在想用div + css 做以上一个布局,
网站是公司内部的一个OA系统,所以与一般的网站在布局上有点区别,一般不出现在向下滚动条
需求如下
header与footer 高度,位置固定
body 自适应高度
sideMenu 自适应高度,宽度200px
content 自适应高度,自适应宽度

希望在IE6 IE7 FF 下浏览正常统一,并且不希望出现滚动条
看到好久div +css模式,也认识到了这种设计的好处,
但就是做不出这个效果,反倒觉得用 table 来实现容易得很

现在贡上100分求高手教我如何做这个布局,

谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢!!!!!!!!!
...全文
263 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
CALM 2009-04-11
  • 打赏
  • 举报
回复
都满足不了楼主的需求啊,这个似乎是div css布局的一个难点
zyyutian 2009-04-04
  • 打赏
  • 举报
回复
<!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>DIV+CSS布局(经测试支持IE6/IE7/IE8/Opera/Safari/Netscape/火狐/谷歌等主流浏览器)</title>
</head>
<style type="text/css">
body,div /*css 复位*/
{
padding:0;
margin:0;
}
#content {
width:960px;
margin:10px auto;
background-color:#FFFF00;
padding-bottom:2px;
}

#head{
width:900px;
margin:10px auto;
background-color:#808000;
padding-bottom:2px;
}

#head_menu{
width:860px;
margin:10px auto;
background-color:#804000;
height:30px
}

#head_statusbar{
width:860px;
margin:10px auto;
background-color:#800000;
height:30px
}

#body {
width:900px;
margin:10px auto;
background-color:#FF0080;
border:1px solid black;

}

#sidemenu{
width:200px;
margin:10px 9px 10px 10px;
background-color:#80FFFF;
float:left;
display:inline;/*解决 IE6因浮动后采用margin出现双倍距离的BUG*/
}

#right_main{
width:670px;
margin:10px 0;
background-color:#008080;
float:left;
}

#foot{
width:900px;
margin:10px auto;
background-color:#0080FF;
height:50px;

}

p{
line-height:80px;
}

.clear{
clear:both;
}
</style>
<div id="content">
container
<div id="head">
header
<div id="head_menu">
menu
</div>
<div id="head_statusbar">
menu
</div>
</div>

<div id="body">
<div id="sidemenu">
sidemenu
<p>
skijsdfsfssdfsdfsd<br />
sfsfsfs<br />
skijsdfsfssdfsdfsd<br />
skijsdfsfssdfsdfsd
</p>
</div>
<div id="right_main">
content
<p>
skijsdfsfssdfsdfsd<br />
sfsfsfs<br />
skijsdfsfssdfsdfsd<br />
skijsdfsfssdfsdfsd
</p>
</div>
<div class="clear"></div>
</div>

<div id="foot">footer</div>
</div>
<body>
</body>
</html>

lihan6415151528 2009-04-04
  • 打赏
  • 举报
回复
宽度设置成百分比形式
meigui99000 2009-04-04
  • 打赏
  • 举报
回复
我觉得表格也不错啊
billfranck 2009-04-03
  • 打赏
  • 举报
回复
用%号这种表示可以达到你的效果
baifuta 2009-04-01
  • 打赏
  • 举报
回复
html,body{width:100%;height:100%} //自动撑满屏幕的
筱伟 2009-03-30
  • 打赏
  • 举报
回复
没有滚动条,这个还要看屏幕分辨率吧!要是高度射到太小了,大分辨率的屏幕地下会有空白,如果设大了,小分辨率的屏幕会显示不完全。
HalloMoto 2009-03-30
  • 打赏
  • 举报
回复
用js吧.
NIJIA72 2009-03-30
  • 打赏
  • 举报
回复
首先谢谢2楼的朋友,
不过我还有几点问题,你给我的布局整体高度宽度是固定的
我们大老板的 有21寸宽屏上看, 整个布局只出现在显示器中间一点点,
而公司里其它人电脑屏幕尺寸都是不一样的

所以我的想法是,想做个自适应高度宽度的布局, 要自动撑满屏幕的
header ,footer高度固定,比如都是100px
header 最上面, footer 最下面,
body的高度不固定,不论分辨率自动撑满屏幕,

sideMenu的高度自动撑满body, 宽度200px,
content 高度撑满body ,宽度 撑满body的宽 - 200px;
mike_24 2009-03-29
  • 打赏
  • 举报
回复
UP2楼
s_liangchao1s 2009-03-29
  • 打赏
  • 举报
回复

<!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 id="ctl00_Head1">
<title>Untitled Page </title>
<style type="text/css">

body {
font: 12px Tahoma;
margin: 0px;
text-align: center;
background: #FFF;
}


#container {
width:800px;
margin: 10px auto;
}


#pageHeader {
width: 800px;
margin: 0px auto;
height: 100px;
background: #FFCC99;
}


#pageMenu {
width: 758px;
height: 30px;
color: #FFFFFF;
margin: 20px 20px 5px 20px;
border: 1px solid #666633;
background-color: #330033;
}


#pageStatus {
width: 758px;
height: 30px;
color: #FFFFFF;
margin: 5px 20px 0px 20px;
border: 1px solid #666633;
background-color: #996633;
}


#pageBody {
width: 800px;
margin: 0px auto;
height: 400px;
background: #CCFF00;
overflow: hidden;

}


#pageFooter {
width: 800px;
margin: 0 auto;
height: 50px;
background: #00FFFF;
}


#sideMenu {
width: 160px;
text-align: left;
float:left;
clear: left;
border: 1px solid #E00;
height: 398px;
overflow: hidden;

}


#content {
width: 637px;
text-align: left;
float: right;
clear: right;
height: 398px;
border: 1px solid #FF0033;
border-left: none;
overflow: hidden;

}
</style>
</head>
<body>
<div id="container">
<div id="pageHeader">
<div id="pageMenu">
这里是主菜单
</div>
<div id="pageStatus">
这里是状态栏
</div>
</div>
<div id="pageBody">
<div id="sideMenu">
这是侧边菜单
</div>
<div id="content">
这是正文部分
</div>
</div>
<div id="pageFooter">
这是脚注
</div>
</div>
</body>
</html>



my145794 2009-03-29
  • 打赏
  • 举报
回复
网页制作有两种方式 一种使用表格(居中)嵌套
一种使用div+CSS 主要用这个定位style="width:99px;height:16px;top:85px;left:550px;position:absolute;"

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧