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

zhangking 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>
...全文
386 14 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
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
  • 打赏
  • 举报
回复
不知所云

61,129

社区成员

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

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