<!doctype html>
<html lang="en">
<head>
<title>The Flower Blog</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" />
</head>
<body>
<header>
<h1>The Flower Blog</h1>
</header>
<nav>
<ul>
<li class="selected"><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Contact</a></li>
<li class="subscribe"><a href="#">Subscribe via. RSS</a></li>
</ul>
</nav>
<section id="intro">
<header>
<h2>Do you love flowers as much as we do?</h2>
</header>
<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.</p>
<img src="images/intro_flower.png" alt="Flower" />
</section>
<div id="content">
<div id="mainContent">
<section>
<article class="blogPost">
<header>
<h2>This is the title of a blog post</h2>
<p>Posted on <time datetime="2009-06-29T23:31+01:00">June 29th 2009</time> by <a href="#">Mads Kjaer</a> - <a href="#comments">3 comments</a></p>
</header>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Curabitur in odio augue. Morbi congue auctor interdum. Phasellus sit amet metus justo. Phasellus vitae tellus orci, at elementum ipsum. In in quam eget diam adipiscing condimentum. Maecenas gravida diam vitae nisi convallis vulputate quis sit amet nibh. Nullam ut velit tortor. Curabitur ut elit id nisl volutpat consectetur ac ac lorem. Quisque non elit et elit lacinia lobortis nec a velit. Sed ac nisl sed enim consequat porttitor.</p>
<img src="images/flower.png" alt="Flower" />
<p>Pellentesque ut sapien arcu, egestas mollis massa. Fusce lectus leo, fringilla at aliquet sit amet, volutpat non erat. Aenean molestie nibh vitae turpis venenatis vel accumsan nunc tincidunt. Suspendisse id purus vel felis auctor mattis non ac erat. Pellentesque sodales venenatis condimentum. Aliquam sit amet nibh nisi, ut pulvinar est. Sed ullamcorper nisi vel tortor volutpat eleifend. Vestibulum iaculis ullamcorper diam consectetur sagittis. Quisque vitae mauris ut elit semper condimentum varius nec nisl. Nulla tempus porttitor dolor ac eleifend. Proin vitae purus lectus, a hendrerit ipsum. Aliquam mattis lacinia risus in blandit.</p>
<p>Vivamus vitae nulla dolor. Suspendisse eu lacinia justo. Vestibulum a felis ante, non aliquam leo. Aliquam eleifend, est viverra semper luctus, metus purus commodo elit, a elementum nisi lectus vel magna. Praesent faucibus leo sit amet arcu vehicula sed facilisis eros aliquet. Etiam sodales, enim sit amet mollis vestibulum, ipsum sapien accumsan lectus, eget ultricies arcu velit ut diam. Aenean fermentum luctus nulla, eu malesuada urna consequat in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque massa lacus, sodales id facilisis ac, lobortis sed arcu. Donec hendrerit fringilla ligula, ac rutrum nulla bibendum id. Cras sapien ligula, tincidunt eget euismod nec, ultricies eu augue. Nulla vitae velit sollicitudin magna mattis eleifend. Nam enim justo, vulputate vitae pretium ac, rutrum at turpis. Aenean id magna neque. Sed rhoncus aliquet viverra.</p></div>
</article>
</section>
<section id="comments">
<h3>Comments</h3>
<article>
<header>
<a href="#">George Washington</a> on <time datetime="2009-06-29T23:35:20+01:00">June 29th 2009 at 23:35</time>
</header>
<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.</p>
</article>
<article>
<header>
<a href="#">Benjamin Franklin</a> on <time datetime="2009-06-29T23:40:09+01:00">June 29th 2009 at 23:40</time>
</header>
<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.</p>
</article>
<article>
<header>
<a href="#">Barack Obama</a> on <time datetime="2009-06-29T23:59:00+01:00">June 29th 2009 at 23:59</time>
</header>
<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.</p>
</article>
</section>
<form action="#" method="post">
<h3>Post a comment</h3>
<p>
<label for="name">Name</label>
<input name="name" id="name" type="text" required />
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" required />
</p>
<p>
<label for="website">Website</label>
<input name="website" id="website" type="url" />
</p>
<p>
<label for="comment">Comment</label>
<textarea name="comment" id="comment" required></textarea>
</p>
<p><input type="submit" value="Post comment" /></p>
</form>
</div>
<aside>
<section>
<header>
<h3>Categories</h3>
</header>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Sit amet consectetur</a></li>
<li><a href="#">Adipisicing elit sed</a></li>
<li><a href="#">Do eiusmod tempor</a></li>
<li><a href="#">Incididunt ut labore</a></li>
</ul>
</section>
<section>
<header>
<h3>Archives</h3>
</header>
<ul>
<li><a href="#">December 2008</a></li>
<li><a href="#">January 2009</a></li>
<li><a href="#">February 2009</a></li>
<li><a href="#">March 2009</a></li>
<li><a href="#">April 2009</a></li>
<li><a href="#">May 2009</a></li>
<li><a href="#">June 2009</a></li>
</ul>
</section>
</aside>
</div>
<footer>
<div>
<section id="about">
<header>
<h3>About</h3>
</header>
<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 <a href="#">laboris nisi ut aliquip</a> 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 officia deserunt mollit anim id est laborum.</p>
</section>
<section id="blogroll">
<header>
<h3>Blogroll</h3>
</header>
<ul>
<li><a href="#">NETTUTS+</a></li>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">In The Woods</a></li>
<li><a href="#">Netsetter</a></li>
<li><a href="#">PSDTUTS+</a></li>
</ul>
</section>
<section id="popular">
<header>
<h3>Popular</h3>
</header>
<ul>
<li><a href="#">This is the title of a blog post</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipisicing elit, sed do eiusmod</a></li>
<li><a href="#">Duis aute irure dolor</a></li>
<li><a href="#">Excepteur sint occaecat cupidatat</a></li>
<li><a href="#">Reprehenderit in voluptate velit</a></li>
<li><a href="#">Officia deserunt mollit anim id est laborum</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
</ul>
</section>
</div>
</footer>
</body>
</html>
用HTML5和CSS3开发博客DEMO
5星 · 超过95%的资源 需积分: 9 41 浏览量
2011-12-20
13:15:24
上传
评论 1
收藏 220KB RAR 举报 
[www.html51.com]HTML5&CSS3.rar （9个子文件） 
[www.html51.com]HTML5&CSS3 
index.html 7KB
master.css 6KB images 
sidebar_section_background.png 3KB sidebar_background.png 3KB rss.png 4KB intro_flower.png 134KB nav_background.png 3KB intro_background.png 3KB flower.png 68KB资源评论
linduchu2014-03-20很好的，引导作用
狂人_IT2012-12-19虽然不是我想要的，但写的挺好的，换能用
baqianliu262012-11-27谢谢分享 正好要用~
