您的位置：程序门 -> web 开发 -> html（css)

求一个简单的css布局!!!

[收藏此页] [打印本页]选择字色：背景色：字体：[大][中][小]

求一个简单的css布局!!!

发表于：2008-01-07 19:05:58 楼主

我想让ie及firefox等呈现都一样的布局如下：
<div id="header"> </div>
<div id="layout">
<div id="left_tree"> </div>
<div id="right_content"> </div>
<div>
<div id="footer"> </div>
采用上中下的布局
header 为头
footer为尾
layout为中且里面包括左 left_tree及右right_content
layout中left_tree及右right_content的的高度会自适应增长

发表于：2008-01-07 19:45:341楼得分:0

友情up

发表于：2008-01-08 01:29:522楼得分:0

html code

<!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>
</head>
<body>

<style type="text/css">
#main{width:200px; border:1px solid;}
#left_tree{width:15%; float:left;}
#right_content{width:80%; float:right;}
#footer{clear:both;}
</style>

<div id="main">
<div id="header">head</div>
<div id="layout">
<div id="left_tree">1<br/>2<br/>3<br/>4<br/>5</div>
<div id="right_content">12345</div>
</div>
<div id="footer">foot</div>
</div>


</body>
</html>

发表于：2008-01-08 08:08:213楼得分:0

我觉得,作为习惯,是不是要给header,footer加上

html code

 clear:both

的属性?

发表于：2008-01-08 08:32:094楼得分:0

html code

<!doctype html public "-//w3c//dtd xhtml 1.1//en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>网页标题</title>
    <meta name="generator" content="editplus" />
    <meta name="author" content="netwild@163.com" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <style type="text/css">
    #container{font:9pt verdana,geneva,sans-serif;}
    #header{width:990px;height:100px;background:#00ccff;margin:1px auto}
    #layout{width:990px;height:300px;margin:1px auto;}
    #left_tree{width:200px;height:100%;background:#ffcc33;float:left;margin-right:2px}
    #right_content{width:788px;height:100%;background:#99ff00;float:left}
    #footer{width:990px;height:100px;background:#00ccff;clear:both;margin:1px auto}
    </style>
</head>
<body>
<div id="container">
    <div id="header">header</div> 
    <div id="layout"> 
        <div id="left_tree">left_tree</div> 
        <div id="right_content">right_content</div> 
    </div> 
    <div id="footer">footer</div>
</div>
</body>
</html>

发表于：2008-01-08 10:21:255楼得分:0

我也刚学css,这里有些教程你看看或许有帮助《精通css+div网页样式与布局》（适合入门)和css设计彻底研究（适合提高）
http://515151it.zhan.cn.yahoo.com

发表于：2008-01-08 17:31:356楼得分:0

html code


<!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>help</title>
</head>
<style type="text/css">
*{ margin:0; padding:0;}
#header{ width:200px; height:100px; margin:0 auto; background-color:#33ccff;}
#layout{ width:200px; height:auto; margin:0 auto; background-color:#cc0000;}
#left_tree{ width:99px; height:auto; float:left; background-color:#ff3300;}
#right_content{ width:100px; height:auto; float:right; background-color:#990033;}
#foot{ width:200xp; height:100px; margin:0 auto; background-color:#000033;}
</style>
<body>
 
<div   id="header"> header</div> 
<div   id="layout"> 
    <div   id="left_tree"> left_tree</div> 
    <div   id="right_content">right_content</div> 
<div> 
<div   id="footer">footer</div> 
          
            header   为头   
            footer为尾   
            layout为中且里面包括左   left_tree及右right_content 
            layout中left_tree及右right_content的的高度会自适应增长

</body>
</html>

参与一下

发表于：2008-01-09 17:23:027楼得分:0

给你一个我自己写的实际列子我写了注释的

test.htm
————————————————————————————
<!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" lang="gb2312">
<head>
<title> 遵循web标准的网页示例 </title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<link rel="stylesheet" rev="stylesheet" href="main.css" type="text/css" media="all" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta content="all" name="robots" />
<meta name="author" content="kefu@zhiweieji.cn,大唐" />
<meta name="copyright" content="www.w3cn.org,自由版权,任意转载" />
<meta name="description" content="网页设计师,web标准,推动web标准在中国的应用" />
<meta content="designing, with, web, standards, xhtml, css, graphic, design, layout, usability, ccessibility, w3c, w3, w3cn, geonado" name="keywords" />
</head>

<body>

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

<div id="mainbox">

<div id="left"> left </div>

<div id="right"> right </div>

<div id="content">
<div id="sample"> <a href="http://www.zhiweikeji.cn"> 引用id选择器 </a> </div>
<div class="timefont"> 引用类别选择器 </div>
</div>

</div>

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

</body>
</html>

——————————————————————main.css
/* 1.系统默认选择器 */
body
{
margin: 0px auto;
padding: 0px;
background: url（../images/bg_logo.gif) #fefefe no-repeat right bottom;
font-family: 'lucida grande','lucida sans unicode','宋体','新宋体',arial,verdana,sans-serif; color: #666;
font-size:12px;
line-height:150%;
text-align:center;/*让选择器居中*/
}
/*定义链接的颜色
分别是：链接色、已访问过的链接色、鼠标停在上方时链接颜色、点下鼠标时链接颜色
注意，必须按lvha顺序写，否则显示可能和你预想的不一样。记住它们的顺序是"lvha"
*/
a:link
{
color: #000;
text-decoration: underline;
}

a:visited
{
color: #00f;
text-decoration: underline;
}
a:hover
{
color: #ff3300;
text-decoration: underline;
}
a:active
{
color: #ff3300;
text-decoration: underline;
}

/* 2.id选择器1 */

/*定义顶部层*/
#header
{
margin: 0px auto;/*让选择器居中*/
border: 0px;
background:#ccd2de;
width: 580px;
height: 60px;

}

/*定义中间层
mainbox包含了#left,#rifht和#content
*/
#mainbox
{
width: 580px; background: #fff; margin: 0px auto;/*让选择器居中*/
}

#left
{
float: left;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #f2f3f7;
width: 170px;
}

#right
{
float: right;
margin: 2px 0px 2px 0px;
padding:0px 0px 0px 0px;
width: 200px;
background: #ccd2de;
}

#content
{
float: right;
margin: 1px 0px 2px 0px;
padding:0px;
width: 200px;
background: #e0efde;
}

/*底部层，clear: both表示本层的左右都没有浮动层*/
#footer
{
clear: both;
margin: 0px auto;/*让选择器居中*/
padding: 5px 0px 5px 0px;
background: #ccd2de;
height: 40px;
width: 580px;
}

/* id选择器2:sample
1.#sample:
表示层的名称为sample，在页面中用就可以这样来调用：
<div id="sample"> </div>
2.margin：
是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。
"10px 10px 10px 10px"分别代表"上右下左"（顺时针方向)四个边距，如果都一样，
可以缩写成"margin: 10px;"。如果边距为零，要写成"margin: 0px;"。
注意：当值是零时，除了 rgb 颜色值 0%必须跟百分号，其他情况后面可以不跟单位"px"。
margin 是透明元素，不能定义颜色。
3.padding：
是指层的边框到层的内容之间的空白。和 margin 一样，分别指边框的上右下左边到内容
的距离。如果都一样，可以缩写成"padding:0px"。
单独指定左边可以写成"padding-left: 0px;"。padding 是透明元素，不能定义颜色。
4.border：
是指层的边框，"border-right: #ccc 2px solid;" 是定义层的右边框颜色为"#ccc"，
宽度为"2px"，样式为"solid"直线。如果要虚线样式可以用"dotted"。
5.background：
是定义层的背景。
分2级定义，先定义图片背景，采用"url（../images/bg_logo.gif)"来指定背景图片路径；
其次定义背景色"#fefefe"。"no-repeat"指背景图片不需要重复，如果需要横向重复用
"repeat-x",纵向重复则用"repeat-y",重复铺满整个背景用"repeat"。后面的right bottom
是指背景图片从右下角开始。如果没有背景图片可以只定义背景色 background: #fefefe
color用于定义字体颜色。
6.text-align：
用来定义层中的内容排列方式，center 居中,left 居左,right 居右。
7.line-height：
定义行高，150%是指高度为标准高度的 150%，也可以写作：line-height:1.5
或者 line-height:1.5em，都是一样的意思。
width 是定义层的宽度，可以采用固定值，例如 500px，也可以采用百分比，象这里的"60%"。要注意的是:这个宽度仅仅指你内容的宽度，不包含 margin,border 和 padding。但在有些浏览器中不是这么定义的，需要你多试试。
*/
#sample
{
margin: 10px 10px 10px 10px;
padding:20px 10px 10px 20px;
border-top: #ccc 2px solid;
border-right: #ccc 2px solid;
border-bottom: #ccc 2px solid;
border-left: #ccc 2px solid;
background: url（images/bg_poem.jpg) #fefefe no-repeat right bottom; color: #666;
text-align: left;
line-height: 150%;
width:60%;
}

/* 3.类别选择器 <div id="timefont"> </div> */
.timefont
{
font-size: 10px;
color: red;
letter-spacing : 0px;
}

下一篇：锁定表头,并横向拖动后select显示在表头上的问题（请完整看完问题再回答)
上一篇：如何得到卷滚条的宽度

其他资讯