先看看效果再说吧
css代码如下：
/**
* Css文件
*/
*{
padding: 0;
margin: 0;
}
body{
background: #fff url(images/main_bg.jpg) no-repeat;
font-size: 62.5%;
font-family: Georgia, "Times New Roman", Times, serif;
}
#headerwrapper{
505px;
height: 180px;
margin-top: 265px;
margin-left: 120px;
}
#header_left{
255px;
float: left;
}
.heading_color{
color: #CCCC99;
font-style: normal;
}
blockquote{
font-size: 1.6em;
font-style: italic;
color: #CCCC99;
padding-top: 20px;
padding-left: 5px;
margin-top: 10px;
}
.quote_author{
color: #CCCC99;
text-align: right;
font-style: italic;
font-size: 0.7em;
font-weight: bold;
margin: 0px;
}
#header_right{
float: right;
185px;
padding-top:20px;
font-size: 1.2em;
}
#navlist{
border-bottom: 1px solid #CCCCCC;
175px;
}
#navlist li{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid #CCCCCC;
}
#navlist li a{
color: #999900;
text-decoration: none;
}
p{
color: #666666;
margin: 20px;
}
h1{
font-size: 3em;
color: #CCCCCC;
font-style: italic;
border-bottom: 1px dotted #CCC;
padding-bottom: 8px;
}
h2{
margin-left: 20px;
color: #444444;
font-size: 1.2em;
background: url(images/date.gif) no-repeat;
padding-top: 1px;
padding-left: 5px;
height: 25px;
}
#main_content{
580px;
clear: both;
margin-top: 75px;
margin-left: 100px;
font-size: 1.2em;
}
.date {
font-size: .6em;
color: #CCCCCC;
}
#footer{
font-size: 1.2em;
580px;
margin-top: 10px;
clear: both;
margin-left: 100px;
text-align: center;
}
a:link {color: #999900} /* unvisited link */
a:visited {color: #999900} /* visited link */
a:hover {color: #993300} /* mouse over link */
a:active {color: #999900} /* selected link */
html代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>The Leaf | By Dieter Schneider 2007 | www.csstemplateheaven.com</title> <link rel="stylesheet" type="text/css" title="The Leaf" media="screen" href="style.css" /> </head> <body> <div id="headerwrapper"> <div id="header_left"> <h1>The <span class="heading_color">BIG</span> Leaf</h1> <blockquote> <p> Dreams are renewable. No matter what our age or condition, there are still untapped possibilities within us and new beauty waiting to be born. </p> <p class="quote_author"> -Dale Turner- </p> </blockquote> </div> <div id="header_right"> <ul id="navlist"> <li id="active"> <a href="#" id="current">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">Forum</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div> </div> <div id="main_content"> <h2>About the template <br /> <span class="date">2007.04.25</span></h2> <p> Duis suscipit, tellus et sollicitudin pharetra, neque mauris placerat nibh, ultrices porta felis quam sit amet tortor. Nulla eget ipsum ac odio tincidunt volutpat. In iaculis condimentum magna. Sed molestie. Sed libero justo, bibendum ac, sagittis et, imperdiet quis, ante. Vivamus et risus. Etiam a dolor vehicula libero eleifend aliquet. Integer eget ligula quis dui luctus porta. Aliquam nonummy. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse rhoncus molestie nulla. Nullam consectetuer lectus quis pede. Proin viverra pharetra risus. Nam ut nulla non nisl tincidunt venenatis. Suspendisse potenti. </p> <h2>Integer eget <br /> <span class="date">2007.04.25</span></h2> <p> Duis suscipit, tellus et sollicitudin pharetra, neque mauris placerat nibh, ultrices porta felis quam sit amet tortor. Nulla eget ipsum ac odio tincidunt volutpat. In iaculis condimentum magna. Sed molestie. Sed libero justo, bibendum ac, sagittis et, imperdiet quis, ante. Vivamus et risus. Etiam a dolor vehicula libero eleifend aliquet. Integer eget ligula quis dui luctus porta. Aliquam nonummy. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse rhoncus molestie nulla. Nullam consectetuer lectus quis pede. Proin viverra pharetra risus. Nam ut nulla non nisl tincidunt venenatis. Suspendisse potenti. </p> <h2>Maecenas erat <br /> <span class="date">2007.04.25</span></h2> <p> Mauris in velit quis nisl molestie dictum. Ut ac lacus. Nullam sed orci cursus leo luctus euismod. In mauris eros, ultrices in, auctor nec, porttitor eu, orci. Fusce at quam. Sed ornare posuere lorem. Aliquam erat volutpat. Pellentesque nulla est, auctor eu, molestie vitae, ultrices id, neque. Duis adipiscing sagittis arcu. Maecenas erat diam, volutpat ac, condimentum nec, dictum id, libero. Duis sed lorem eget justo posuere iaculis. Quisque sodales aliquam diam. </p> </div> <div id="footer"> <p> Created by <a href="http://www.dieter.no">Dieter Schneider</a> 2007 | <a href="http://www.csstemplateheaven.com"> www.csstemplateheaven.com</a> </p> </div> </body> </html>
