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=UTF-8" /> <meta name="description" content="Happy template" /> <meta name="keywords" content="happy, template" /> <meta name="author" content="Luka Cvrk (www.solucija.com)" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Happy Template - Free Template by Solucija.com</title> </head> <body> <div class="wrap"> <h1 id="logo"><a href="#">happy <br /> template</a></h1> <ul id="menu"> <li> <a href="#">Home</a> </li> <li> <a href="#">Photography</a> </li> <li> <a href="#">Video</a> </li> <li> <a href="#">Locations</a> </li> <li> <a href="#">Contact</a> </li> </ul> <div id="text"> <h2>Nam tortor libero dictum porta</h2> <p> Maecenas erat. Suspendisse odio orci, <a href="#">convallis ac, volutpat non, volutpat et, lectus</a>. In cursus rhoncus ante. Quisque nibh lacus, pellentesque sed, porttitor a, luctus blandit, mi. Nam tortor libero, dictum porta, vulputate nec, imperdiet sed, mauris. Maecenas libero neque, volutpat sit amet, varius et, pretium quis, purus. Nulla ut magna. Nunc nec dui eget erat vulputate sagittis. <a href="#">Suspendisse fermentum</a> odio. Mauris magna sem, pellentesque sit amet, nonummy vel, nonummy id, velit. Mauris facilisis, quam ut semper adipiscing, magna diam laoreet ante, ac varius massa dolor sit amet augue. Vivamus purus. Integer consequat. Nunc et nunc. Phasellus augue diam, vestibulum non, iaculis eget, tristique sed, lectus. Sed pede. Nullam egestas ante a mauris. Aliquam metus turpis, luctus ac, sagittis eget, <a href="#">elementum tincidunt</a>, massa. Aenean justo nisl, luctus sit amet, malesuada ac, dignissim ac, eros. </p> </div> <div id="green_bubble"> <p> <a href="http://www.declips.com" title="serving your daily dose of interesting and relevant videos from all major video sites">Latest Project</a><a href="http://www.solucija.com/commercial-templates" title="Professional CSS Templates">Showcase</a><a href="#">Philosophy</a><a href="#">Vision</a> </p> </div> </div> <div id="footer"> <div class="wrap"> <div id="bubble"> <p> Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis. </p> </div> <div id="copyright"> <p> Sponsored by <a href="http://webpoint.wordpress.com/">B4Contact</a> · Released under a <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Licence</a> </p> <p> Copyright © 2008 − Happy Template − Design: Luka Cvrk − <a href="http://www.solucija.com/" title="Information Architecture and Web Design">Solucija</a> </p> </div> <div class="clear"></div> </div> </div> </body> </html>
css代码如下:
/*
project: happy template
author: luka cvrk (www.solucija.com)
*/
* {
margin: 0;
padding: 0;
}
:focus, :active {
outline: 0
}
ul, ol {
list-style: none
}
h1, h2, h3, h4, h5, h6, pre, code {
font-size: 1em;
}
a img {
border: 0
}
body {
font: .9em Georgia, "Times New Roman", Arial, Sans-Serif;
background: #E8F7FC url(images/bg.jpg) repeat-x;
color: #306172;
}
a {
color: #3A65A8;
text-decoration: none;
}
h1 {
font-size: 2.9em;
font-weight: normal;
}
h2 {
float: left;
text-transform: lowercase;
clear: both;
font-size: 2.4em;
margin: 0 0 20px;
font-weight: normal;
color: #CB6F9C;
background: url(images/h2bg.jpg) repeat-x bottom;
}
p {
clear: both;
margin: 5px 0 15px;
line-height: 1.7em;
}
.clear {
clear: both;
}
.wrap {
margin: 0 auto;
900px;
}
#logo {
float: left;
margin: 40px 0 0;
}
#menu {
text-transform: lowercase;
float: right;
height: 120px;
padding: 73px 0 0 98px;
475px;
background: url(images/white_bubbles.jpg) no-repeat top right;
}
#menu li {
display: inline;
}
#menu li a {
float: left;
padding: 3px 6px;
margin: 0 20px 0 0;
font-weight: bold;
color: #B25281;
}
#menu li a:hover, #menu li a.current {
background: #EDD3E0;
}
#text {
clear: both;
margin: 0 0 40px;
}
#green_bubble {
padding: 30px 0 68px 280px;
height: 30px;
background: url(images/green_bubbles.jpg) no-repeat center left;
}
#green_bubble a {
color: #34AE61;
font-weight: bold;
margin: 0 30px 0 0;
}
#footer {
padding: 85px 0 5px 0;
background: #FF99CB url(images/bottom.jpg) repeat-x;
}
#copyright {
float: left;
margin: 80px 0 0;
color: #9D436F;
font-size: .8em;
}
#copyright p {
margin: 0 0 5px;
}
#copyright a {
color: #60183B;
}
#bubble {
float: right;
font-size: .9em;
font-weight: bold;
color: #D46FA0;
background: url(images/pink_bubbles.jpg) no-repeat;
220px;
height: 145px;
padding: 52px 30px 0 150px;
text-align: right;
}
