XHTML 经典三行两列布局,很常用

zhangking 西安PHP教育培训中心创始人 2008-02-27 03:17:44

<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>

...全文

319 点赞收藏 14

写回复

14 条回复

切换为时间正序

当前发帖距今超过3年，不再开放新的回复

发表回复

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布局的页面越来越多，据说是页面布局的“标准”，我们还是有必要熟悉它。

回复赞