使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页。

<html><head><style type="text/css">
div.container
{width:100%;margin:0px;border:1px solid gray;line-height:150%;}
div.header,div.footer
{padding:0.5em;color:white;background-color:gray;clear:left;}
h1.header
{padding:0;margin:0;}
div.left
{float:left;width:160px;margin:0;padding:1em;}
div.content
{margin-left:190px;border-left:1px solid red;padding:1em;}
</style></head>
<body><div class="container">

<div class="header"><h1 class="header">W3CSchool.cn</h1></div>

<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>

<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3CSchool.cn you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3CSchool.cn - The Largest Web Developers Site On The Net!</p></div>

<div class="footer">Copyright 2008 by YingKe Investment.</div>
</div></body></html>

显示效果如图：

 

posted @ 2013-12-15 22:03  birdlow  阅读(345)  评论(0)    收藏  举报