<!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>
<title>1-3-1 布局适应宽度</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="screen">
body {
background: #FFF;
font: 13px/1.5 Arial;
margin:0;
padding:0;
}
p{
text-indent:2em;
}
.rounded {
background: url(images/left-top.gif) top left no-repeat;
width:100%;
}
.rounded h2 {
background:
url(images/right-top.gif)
top right no-repeat;
padding:20px 20px 10px;
margin:0;
}
.rounded .main {
background:
url(images/right.gif)
top right repeat-y;
padding:10px 20px;
margin:-2em 0 0 0;
}
.rounded .footer {
background:
url(images/left-bottom.gif)
bottom left no-repeat;
}
.rounded .footer p {
color:#888;
text-align:right;
background:url(images/right-bottom.gif) bottom right no-repeat;
display:block;
padding:10px 20px 20px;
margin:-2em 0 0 0;
}
#header,#pagefooter,#container{
margin:0 auto;
width:85%;
}
#container{
position:relative;
}
#navi{
position:absolute;
top:0;
left:0;
width:150px;
}
#content{
margin:0 250px 0 150px;
}
#content img{
float:right;
}
#side{
position:absolute;
top:0;
right:0;
width:250px;
}
#pagefooter{
clear:both;
}
</style>
</head>
<body>
<div id="header">
<div class="rounded">
<h2>Page Header</h2>
<div class="main">
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
<div id="container">
<div id="naviWrap">
<div id="navi">
<div class="rounded">
<h2>Navi Bar</h2>
<div class="main">
<p>
对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
</div>
<div id="content">
<div class="rounded">
<h2>Page Content</h2>
<div class="main">
<img src="images/cup.gif" width="128" height="128" />
<p>
对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发，介绍CSS语言的特点。这是一行文本，这里作为样例，显示在布局框中。这是一行文本，这里作为样例，显示在布局框中。</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
<div id="sideWrap">
<div id="side">
<div class="rounded">
<h2>Side Bar</h2>
<div class="main">
<p>
但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。这是一行文本，这里作为样例，显示在布局框中。这是一行文本，这里作为样例，显示在布局框中。
</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
</div>
</div>
<div id="pagefooter">
<div class="rounded">
<h2>Page Footer</h2>
<div class="main">
<p>
这是一行文本，这里作为样例，显示在布局框中。
</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
</body>
</html>
