<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>css3伸缩条形图 - 站长素材</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="wrapper">
<h1>css3伸缩条形图</h1>
<div id="content">
<ul id="bar">
<li id="iphone">
<div class="top">
<img src="images/iphone.png" alt="iPhone" />
</div>
<div class="bottom">
<div class="infobox">
<h3>iPhone</h3>
<p>80,1</p>
</div>
</div>
</li>
<li id="macbook">
<div class="top">
<img src="images/macbook.png" alt="MacBook" />
</div>
<div class="bottom">
<div class="infobox">
<h3>MacBook</h3>
<p>102,6</p>
</div>
</div>
</li>
<li id="ipod">
<div class="top">
<img src="images/ipod.png" alt="iPod" />
</div>
<div class="bottom">
<div class="infobox">
<h3>iPod</h3>
<p>198,4</p>
</div>
</div>
</li>
<li id="cinema">
<div class="top">
<img src="images/cinema.png" alt="Cinema Display" />
</div>
<div class="bottom">
<div class="infobox">
<h3>Cinema Display</h3>
<p>38,2</p>
</div>
</div>
</li>
<li id="macmini">
<div class="top">
<img src="images/macmini.png" alt="Mac Mini" />
</div>
<div class="bottom">
<div class="infobox">
<h3>Mac Mini</h3>
<p>55,6</p>
</div>
</div>
</li>
</ul>
<div id="apple">
<img src="images/apple.png" alt="Apple Inc" />
<p>Numbers in millions sold<br />*Numbers are fictional</p>
</div>
</div>
</div>
<div style="text-align:center;clear:both">
<p>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
