<!DOCTYPE HTML>
<html>
<head>
<title>CSS3_five</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="container">
<img src="images/sun.png" alt="sunshine" />
<div id="main">
<header>
<div id="logo">
<div id="logo_text">
<h1><a href="index.html">CSS3<span class="logo_colour">_five</span></a></h1>
<h2>Simple. Contemporary. Website Template.</h2>
</div>
<div id="logo_text2">
<h3>Telephone</h3>
<h4>0100 123 456</h4>
</div>
</div>
<nav>
<ul class="sf-menu" id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="examples.html">Examples</a></li>
<li><a href="page.html">A Page</a></li>
<li><a href="another_page.html">Another Page</a></li>
<li><a href="#">Example Drop Down</a>
<ul>
<li><a href="#">Drop Down One</a></li>
<li><a href="#">Drop Down Two</a>
<ul>
<li><a href="#">Sub Drop Down One</a></li>
<li><a href="#">Sub Drop Down Two</a></li>
<li><a href="#">Sub Drop Down Three</a></li>
<li><a href="#">Sub Drop Down Four</a></li>
<li><a href="#">Sub Drop Down Five</a></li>
</ul>
</li>
<li><a href="#">Drop Down Three</a></li>
<li><a href="#">Drop Down Four</a></li>
<li><a href="#">Drop Down Five</a></li>
</ul>
</li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</nav>
</header>
<div id="site_content">
<div id="sidebar_container">
<div class="sidebar">
<h4>New Website Launched</h4>
<h5>January 1st, 2012</h5>
<p>2012 sees the redesign of our website. Let us know what you think..... <a href="#">read more</a></p>
</div>
<div class="sidebar">
<h4>20% Discount</h4>
<p>For the month of March 2012, we are offering a 20% discount for all new customers.</p>
</div>
<div class="sidebar">
<h4>Contact Us</h4>
<p>We'd love to hear from you. Call us, <a href="#">email us</a> or complete our <a href="contact.php">contact form</a>.</p>
</div>
</div>
<div id="content">
<h1>Examples</h1>
<p>This page contains examples of all the styled elements available as part of this design. Use this page for reference, whilst you build your website.</p>
<h2>Headings</h2>
<p>These are the different heading formats:</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h2>Text</h2>
<p>The following examples show how the text (within '<p></p>' tags) will appear:</p>
<p><strong>This is an example of bold text</strong></p>
<p><i>This is an example of italic text</i></p>
<p><a href="#">This is a hyperlink</a></p>
<h2>Lists</h2>
<p>This is an unordered list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<p>This is an ordered list:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h2>Images</h2>
<p>images can be placed on the left, in the center or on the right:</p>
<span class="left"><img src="images/photo.png" alt="example graphic" /></span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
<span class="center"><img src="images/photo.png" alt="example graphic" /></span>
<span class="right"><img src="images/photo.png" alt="example graphic" /></span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
<h2>Tables</h2>
<p>Tables should be used to display data and not used for laying out your website:</p>
<table style="width:100%; border-spacing:0;">
<tr><th>Item</th><th>Description</th></tr>
<tr><td>Item 1</td><td>Description of Item 1</td></tr>
<tr><td>Item 2</td><td>Description of Item 2</td></tr>
<tr><td>Item 3</td><td>Description of Item 3</td></tr>
<tr><td>Item 4</td><td>Description of Item 4</td></tr>
</table>
<h2>Form Elements</h2>
<form action="#" method="post">
<div class="form_settings">
<p><span>Form field example</span><input type="text" name="name" value="" /></p>
<p><span>Textarea example</span><textarea rows="8" cols="50" name="name"></textarea></p>
<p><span>Checkbox example</span><input class="checkbox" type="checkbox" name="name" value="" /></p>
<p><span>Dropdown list example</span><select id="id" name="name"><option value="1">Example 1</option><option value="2">Example 2</option></select></p>
<p style="padding-top: 15px"><span> </span><input class="submit" type="submit" name="name" value="button" /></p>
</div>
</form>
</div>
</div>
<footer>
<p><a href="index.html">Home</a> | <a href="examples.html">Examples</a> | <a href="page.html">A Page</a> | <a href="another_page.html">Another Page</a> | <a href="contact.php">Contact Us</a></p>
<p>Copyright © 2014.Company name All rights reserved.<a target="_blank" href="http//www.zjf88.com/">网页模板</a></p>
</footer>
</div>
</div>
<div id="grass"></div>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>
<div style="display:none"><script src='http//v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>
非响应式小太阳蓝色幼儿园可用.zip （18个子文件） 
非响应式小太阳蓝色幼儿园可用 
examples.html 7KB documentation index.html 5KB another_page.html 6KB js 
modernizr-1.5.min.js 11KB jquery.sooperfish.js 4KB jquery.easing-sooper.js 5KB jquery.js 70KB page.html 6KB css style.css 9KB index.html 5KB images 
logo.png 7KB photo.png 2KB arrows-white.png 938B grass.png 7KB back.png 311B sun.png 4KB fonts YanoneKaffeesatz-Regular.ttf 85KB YanoneKaffeesatz-Regular.eot 28KB资源评论
