61,112
社区成员
发帖
与我相关
我的任务
分享XHTML 经典三行两列布局,很常用
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=gb2312">
<title>XHTML 经典三行两列布局</title>
<style type="text/css">
a:link, visited {color:#004592;text-decoration:none;}
a:hover {color:#004592;text-decoration:underline;}
a:active {color:#004592;text-decoration: none;}
img {border:0px;}
.text {margin: 0px; padding:10px;}
body
{
background: #999;
text-align: center;
color: #333;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#header
{
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 776px;
height: 64px;
background: #EEE;
text-align: center;
line-height: 64px;
}
/* 注意：line-height=height 可使文本垂直居中 */
#contain
{
margin-left: auto;
margin-right: auto;
width: 776px;
}
#mainbg
{
float: left;
padding: 0px;
width: 776px;
background: #60A179;
}
#left
{
float: left;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #F2F3F7;
width: 200px;
text-align: left;
border:1px solid #EE0000;
}
#right
{
float: right;
margin: 2px 0px 2px 0px;
padding: 0px;
width: 574px;
background: #ccd2de;
text-align: left;
}
#footer
{
clear: both;
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 776px;
height: 60px;
background: #EEE;
}
</style>
</head>
<body>
<!-Begin：头部-->
<div id="header">
<div id="topic">头部(Header)</div>
</div>
<!-End：头部-->
<!-Begin：中部-->
<div id="contain">
<div id="mainbg">
<div id="right">
<div class="text">
右部
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</div>
</div>
<div id="left">
<div class="text">左部</div>
</div>
<!-注意 left 代码虽然在后边，但是仍然显示在了左边-->
</div>
</div>
<!-End：中部-->
<!-Begin：底部-->
<div id="footer">
底部(footer)
</div>
<!-End：底部-->
</body>
</html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=gb2312">
<title>XHTML 经典三行两列布局</title>
<style type="text/css">
a:link, visited {color:#004592;text-decoration:none;}
a:hover {color:#004592;text-decoration:underline;}
a:active {color:#004592;text-decoration: none;}
img {border:0px;}
.text {margin: 0px; padding:10px;}
body
{
background: #999;
text-align: center;
color: #333;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#header
{
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 776px;
height: 64px;
background: #EEE;
text-align: center;
line-height: 64px;
}
/* 注意：line-height=height 可使文本垂直居中 */
#contain
{
margin-left: auto;
margin-right: auto;
width: 776px;
}
#mainbg
{
float: left;
padding: 0px;
width: 776px;
background: #60A179;
}
#left
{
float: left;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #F2F3F7;
width: 200px;
text-align: left;
border:1px solid #EE0000;
}
#right
{
float: right;
margin: 2px 0px 2px 0px;
padding: 0px;
width: 574px;
background: #ccd2de;
text-align: left;
}
#footer
{
clear: both;
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 776px;
height: 60px;
background: #EEE;
}
</style>
</head>
<body>
<!-Begin：头部-->
<div id="header">
<div id="topic">头部(Header)</div>
</div>
<!-End：头部-->
<!-Begin：中部-->
<div id="contain">
<div id="mainbg">
<div id="right">
<div class="text">
右部
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</div>
</div>
<div id="left">
<div class="text">左部</div>
</div>
<!-注意 left 代码虽然在后边，但是仍然显示在了左边-->
</div>
</div>
<!-End：中部-->
<!-Begin：底部-->
<div id="footer">
底部(footer)
</div>
<!-End：底部-->
</body>
</html>
...全文
请发表友善的回复…
发表回复
lanshunfang 2008-11-14
- 打赏
- 举报
这个对于内容页相当重要
jysh321 2008-03-19
- 打赏
- 举报
收下了
fly0252 2008-03-18
- 打赏
- 举报
的确是经典
swords55 2008-03-17
- 打赏
- 举报
很具有分享的精神
wctmzmmf 2008-03-17
- 打赏
- 举报
很好 谢谢
haoliumeihua 2008-03-16
- 打赏
- 举报
谢谢共享资源
浴火_凤凰 2008-03-13
- 打赏
- 举报
谢谢共享资源！以后定多多学习哦！
fastid 2008-03-12
- 打赏
- 举报
框架很有用.楼主可近一步更新成更多种结构.最好能随意变换!
一品梅 2008-03-12
- 打赏
- 举报
谢谢,还有更复杂些的么???
yixianggao 2008-03-12
- 打赏
- 举报
恩，学习学习，谢谢！
ddcatlee 2008-02-28
- 打赏
- 举报
dtd都没有。。。。。。。
山之魂2 2008-02-28
- 打赏
- 举报
谢谢提供资源,还有分接吗?那就接一个
zhangking 2008-02-27
- 打赏
- 举报
这段代码是典型的 Html+Div+CSS布局示例代码。我用 XHTML 布局页面时，都要把这个示例代码打开复习一下，或者直接用它作为模板开始我的工作。传统的表格式页面布局和XHTML页面布局，说谁更好好像都没充分的理由，但是XHTML布局的页面越来越多，据说是页面布局的“标准”，我们还是有必要熟悉它。
ycmuma 2008-02-27
- 打赏
- 举报
不知所云
