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布局的页面越来越多,据说是页面布局的“标准”,我们还是有必要熟悉它。
回复
ycmuma 2008-02-27
不知所云
回复
相关推荐
发帖
CSS
创建于2007-09-28

6.0w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
帖子事件
创建了帖子
2008-02-27 03:17
社区公告
暂无公告