<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>DaFrontPage</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<!--[if IE]><script src="http//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="wrapper"><!-- #wrapper -->
<h1><a href="#">Da Front Page</a></h1>
<nav><!-- top nav -->
<div class="menu">
<ul>
<li><a href="#">Top News</a></li>
<li><a href="#">National</a></li>
<li><a href="#">World</a></li>
<li><a href="#">Politics</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Science</a></li>
<li><a href="#">Health</a></li>
<li><a href="#">Travel</a></li>
</ul>
</div>
</nav><!-- end of top nav -->
<header><!-- header -->
<div class="headlineimage">
<img src="images/headlineimg.jpg" alt="" />
</div>
<div class="headline">
<h2><a href="#">Fans Mourn Pop Singer's Tragic Death</a></h2>
<p>Duis sagittis ipsum. Praesent de mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestib ulum lacinia arcu eget nulla. Vestibulum lacinia arcu eget nulla. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Duis sagittis ipsum. Praesent de mauris. </p>
</div>
</header><!-- end of header -->
<section id="main"><!-- #main content area -->
<!-- Triple columns with images, captions, and info blocks -->
<section class="triplecols">
<article class="tripleblocks tripleleftblock">
<a href="#"><img class="thumbnail" src="images/storyimg1.jpg" title="protests" alt="protests"/><span class="caption"><b>Protest Outside Courtroom</b></span></a>
<p class="byline">By Jeffrey Wiggins</p>
<p>Duis sagittis ipsum. Praesent de mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestib ulum lacinia arcu eget nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. </p>
</article>
<article class="tripleblocks triplemiddleblock">
<a href="#"><img class="thumbnail" src="images/storyimg2.jpg" title="thompson" alt="thompson"/><span class="caption"><b>Thompson Wins Senate Race</b></span></a>
<p class="byline">By Anderson Mealey</p>
<p>Duis sagittis ipsum. Praesent de mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestib ulum lacinia arcu eget nulla. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
</article>
<article class="tripleblocks triplerightblock">
<a href="#"><img class="thumbnail" src="images/storyimg3.jpg" title="education" alt="education"/><span class="caption"><b>Schools Get Huge Boost In Donations</b></span></a>
<p class="byline">By Marcia Burns</p>
<p>Duis sagittis ipsum. Praesent de mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestib ulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
</article>
</section>
<!-- Triple columns with images, captions, and info blocks -->
<section class="triplecols">
<article class="tripleblocks tripleleftblock">
<a href="#"><img class="thumbnail" src="images/storyimg4.jpg" title="snow" alt="snow"/><span class="caption"><b>Roads Closed Due To Storm</b></span></a>
<p class="byline">By Jim Strong</p>
<p>Duis sagittis ipsum. Praesent de mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestib ulum lacinia arcu eget nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. </p>
</article>
<article class="tripleblocks triplemiddleblock">
<a href="#"><img class="thumbnail" src="images/storyimg5.jpg" title="accident" alt="accident"/><span class="caption"><b>Strange Accident In Midtown</b></span></a>
<p class="byline">By Larry Edmonds</p>
<p>Duis sagittis ipsum. Praesent de mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestib ulum lacinia arcu eget nulla. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
</article>
<article class="tripleblocks triplerightblock">
<a href="#"><img class="thumbnail" src="images/storyimg6.jpg" title="firefighters" alt="firefighters"/><span class="caption"><b>Firefighters Prepare For Dry Season</b></span></a>
<p class="byline">By Faith Chance</p>
<p>Duis sagittis ipsum. Praesent de mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestib ulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
</article>
</section>
</section><!-- end of #main content -->
<footer>
<section id="footer-area">
<section id="footer-outer-block">
<aside class="footer-segment first">
<h3>Friends</h3>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
<li><a href="#">three linkylinks</a></li>
</ul>
</aside><!-- end of #first footer segment -->
<aside class="footer-segment second">
<h3>Awesome Stuff</h3>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
<li><a href="#">three linkylinks</a></li>
</ul>
</aside><!-- end of #second footer segment -->
<aside class="footer-segment third">
<h3>Coolness</h3>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
<li><a href="#">three linkylinks</a></li>
</ul>
</aside><!-- end of #third footer segment -->
<aside class="footer-segment last">
<h3>Blahdyblah</h3>
<p>© 2010 <a href="#">yoursite.com</a> Integer nec odio. Praesent libero. Sed cursus ante.</p>
</aside><!-- end of #fourth footer segment -->
</section><!-- end of footer-outer-block -->
</section><!-- end of footer-area -->
</footer>
</div><!-- #wrapper -->
<!-- Free template created by http//freehtml5templates.com -->
</body>
</html>
H202_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip （15个子文件） 
H202 
Medio-webfont.eot 29KB Medio-webfont.woff 17KB Medio-webfont.ttf 29KB
Medio-webfont.svg 40KB
index.html 7KB print.css 328B images 
storyimg6.jpg 54KB headlineimg.jpg 101KB storyimg5.jpg 56KB bg.jpg 264B storyimg2.jpg 42KB storyimg4.jpg 26KB storyimg3.jpg 12KB storyimg1.jpg 25KB styles.css 4KB资源评论
