tags：柱状图,统计图表,html,feedburner
<head>
<style>
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved. */
/* http://creativecommons.org/licenses/by/2.0 */
/* This style sheet is licensed under a Creative Commons License. */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }
</style>
<style>
/* GENERAL */
a.extLink {
background: url(/fb/i/icn/arrow_up.gif) no-repeat;
background-position: center right;
padding-right: 12px;
}s
a.extLink:hover {
text-decoration: none;
border-bottom: 1px solid #015fab;
}
* html #blast {
display: none;
}
/* MENU ITEMS */
li#dashboardLink a,
li#adDashboardLink a {
background-image: url(/fb/i/icn/gauge.gif);
}
li#subscribersLink a {
background-image: url(/fb/i/icn/subscriber.gif);
}
li#itemsLink a {
background-image: url(/fb/i/icn/item.gif);
}
li#uncommonLink a {
background-image: url(/fb/i/icn/uncommon.gif);
}
li#adStatsByDateLink a {
background-image: url(/fb/i/icn/bar.gif);
}
/* CHART WIDGET */
#chart {
height: 166px;
}
* html #chart {
height: 145px;
}
/* single item title */
#chart h3 {
margin-left: 1px;
font-weight: normal;
margin-top: -3px;
}
/* date range select */
#chart p {
text-align: right;
font-size: 11px;
margin: -26px 0 10px 0;
}
#chart p select {
font-size: 10px;
margin-left: 4px;
}
* html #chart p {
margin-top: 0;
}
/* the big guy himself */
#chart dl {
border-top: 1px solid #e6e6e6;
padding-top:19px;
width: 483px;
}
/* damn you IE! */
* html #chart dl {
width: 472px;
padding-left: 22px;
}
#chart dt {
display: none;
}
#chart dd {
float: left;
}
#chart dd a {
display: block;
background: #7cc483;
border-right: 1px solid #74b47a;
border-left: 1px solid #90d197;
border-top: 1px solid #90d197;
border-bottom: 1px solid #999;
color: white;
text-align: center;
font-weight: bold;
font-size: 9px;
line-height: 0;
}
#chart dd a:hover {
background: #88c98e;
text-decoration: none;
}
#chart dd a.weekend {
background: #74b47a;
}
#chart dd a.weekend:hover {
background: #7cc483;
}
#chart dd a span {
display: block;
margin-top: 8px;
}
/* y-axis min/max labels */
span#maxLabel,
span#minLabel {
display: block;
font-size: 12px;
letter-spacing: -1px;
text-align:right;
line-height: 16px;
margin: -17px 0 0 10px;
padding: 0 6px 0 0;
color: #444;
border-bottom: 1px dotted #ddd;
}
* html span#maxLabel {
margin-top: -122px;
}
span#minLabel {
margin-top: 86px;
}
/* chart changes size, etc depending on selection and context */
.thirty-day dd a {
width: 12px;
margin-right: 1px;
}
.thirty-day dl {
padding-left: 25px;
}
.seven-day dl {
padding-left: 24px;
}
.seven-day dd a {
width: 60px;
margin-right: 3px;
}
/* for one-day view only */
.one-day dd a {
opacity: 0.4;
-moz-opacity:0.4;
filter: alpha(opacity=40);
}
.one-day dd a#selected {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
/* earliest to date */
.all img {
margin-top: 3px;
}
#chart.all {
height: 139px;
}
/* PAGE BODY */
#statsHolder {
padding: 12px;
background-image: url(/fb/i/stats/bg-statsArea.gif);
background-repeat: no-repeat;
border-bottom: 1px solid #999;
background-position: center top;
}
* html #statsHolder {
background-position: center 12px;
}
/* DATE AND POSITION POINTER */
h4#date {
background-image: url(/fb/i/stats/point.gif);
background-repeat: no-repeat;
background-position: -45px 2px;
margin-top: -25px;
padding-top: 24px;
}
* html h4#date {
margin-top: -13px;
}
#feed-single-item #statsHolder p {
margin-top: 6px;
font-size: 12px;
color: #333;
line-height: 12px;
}
p.seeMore {
margin-top: 12px;
}
/* BIG NUMBERS */
#statsHolder ul li {
list-style: none;
margin-left: 0;
padding-left: 16px;
margin-top: 18px;
font-size: 16px;
color: #333;
background-image: url(/fb/i/bullet_red_diamond.gif);
}
#statsHolder ul li strong {
font-size: 28px;
vertical-align: -4px;
letter-spacing: -1px;
padding-right: 6px;
color: black;
}
#feed-aggregate-items ul li strong,
#feed-single-item ul li strong {
vertical-align: -2px;
}
#statsHolder ul li em {
font-size: 18px;
font-style: normal;
font-weight: bold;
}
#statsHolder ul li.primary strong {
font-size: 34px;
vertical-align: -6px;
}
/* the pie */
#feed-subscribers img {
margin-top: 3px;
}
/* uncommon uses listing on dashboard */
#statsHolder ul.uncommonUses li {
line-height: 20px;
margin-top: 12px;
}
#statsHolder ul.uncommonUses li strong {
font-size: 16px;
letter-spacing: 0;
vertical-align: 0;
}
/* stats tables */
#statsHolder table {
border-collapse: collapse;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
color: #222;
margin-top: 12px;
width: 472px;
}
#statsHolder table td,
#statsHolder table th {
padding: 5px;
text-align: left;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
width: 40px;
text-align: right;
}
#statsHolder table td.longCol,
#statsHolder table th.longCol {
width: auto;
text-align: left;
}
#statsHolder table tr#total {
background: url(/fb/i/bg/bg_pink2.gif);
font-weight: bold;
}
#statsHolder table th {
background: url(/fb/images/home_right_gradient.jpg) repeat-x 0px -70px;
color: #222;
text-transform: uppercase;
font-weight: bold;
font-size: 10px;
padding-top: 1px;
padding-bottom: 1px;
}
#statsHolder table td {
font-size: 13px;
}
#statsHolder table tr.hover * {
background-color: #015fab;
color: white;
}
/* client table specifically */
#statsHolder table td p {
display: none;
font-size: 11px;
line-height: 16px;
margin-bottom: 4px;
color: #444;
}
#feed-subscribers #statsHolder table tr td.longCol{
overflow:hidden;
}
#feed-subscribers #statsHolder table {
table-layout: fixed;
}
/* uncommon uses table */
#statsHolder table td.check {
text-align: center;
}
#statsHolder table tr.whitelisted td a {
opacity: 0.4;
-moz-opacity:0.4;
filter: alpha(opacity=40);
}
#feed-uncommon-uses #statsHolder table ul {
display: none;
}
#feed-uncommon-uses #statsHolder table li {
font-size: 11px;
margin: 0;
background: none;
padding: 0;
}
#feed-uncommon-uses #statsHolder table li a {
color: #333;
}
#feed-uncommon-uses #statsHolder table td {
vertical-align: top;
}
#feed-uncommon-uses #statsHolder table td input {
margin-top: 5px;
}
/* *** TEASERS *** */
#statsTeaser {
background: url(/fb/i/stats/teaser-dashboard.gif) no-repeat left top;
height: 666px; /* the devil’s height */
padding-top: 65px;
}
#statsTeaser div,
div#teaser {
width: 300px;
margin: 0 auto 0 auto;
text-align: center;
padding: 1px 20px 20px 20px;
background: #f3f3f3;
border: 1px solid #aaa;
border-top-color: #ccc;
border-left-color: #ccc;
}
div#teaser {
width: auto;
margin: 12px 0 12px 0;
padding: 0;
}
div#teaser p {
margin: 12px;
}
#statsTeaser h4 {
font-size: 22px;
margin-bottom: 6px;
border: 0;
color: black;
letter-spacing: -1px;
line-height: 26px;
}
/* ********************* */
/* AD PERFORMANCE STYLES */
#months tr#header th {
text-align: center;
}
#months tr#header th.longCol {
text-align: left;
}
tr.subHeader td {
font-weight: bold;
}
#months tr td span {
color: #666;
font-size: 11px;
}
#months tr td span.paid {
color: #74b47a;
font-weight: bold;
}
#months tr th.payment {
width: 110px;
}
#ads-bycampaign ul#campaignStats {
margin-top: 20px;
}
#ads-bycampaign ul#campaignStats li {
margin-top: 12px;
}
#accountadstats table,
#stats-date table {
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
#accountadstats table tr,
#stats-date table tr {
color: #444;
}
#accountadstats table tr td,
#stats-date table tr td {
font-size: 11px;
padding-top: 2px;
padding-bottom: 2px;
}
#accountadstats table tr td.payment,
#stats-date table tr td.payment {
border-right: 1px solid #ddd;
}
#accountadstats table tr.subHeader td,
#stats-date table tr.subHeader td {
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
font-size: 13px;
padding-top: 16px;
}
table tr.subHeader {
color: #222;
}
#ads-bycampaign h5 {
font-size: 30px;
font-weight: bold;
letter-spacing: -1px;
line-height: 30px;
margin: 12px 0 8px 0;
}
</style>
</head>
<div id="chart" class="thirty-day">
<p>Show stats for
</p>
<dl>
<dt>4/9/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-09&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="weekend" id="" title="Sunday, Apr 09: 0 subscribers">S</a>
</dd>
<dt>4/10/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-10&id=124550" style="height:10px; margin-top:90px; text-indent: -9000px;" class="" id="" title="Monday, Apr 10: 0 subscribers">M</a>
</dd>
<dt>4/11/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-11&id=124550" style="height:50px; margin-top:50px; text-indent: -9000px;" class="" id="" title="Tuesday, Apr 11: 0 subscribers">T</a>
</dd>
<dt>4/12/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-12&id=124550" style="height:30px; margin-top:70px; text-indent: -9000px;" class="" id="" title="Wednesday, Apr 12: 0 subscribers">W</a>
</dd>
<dt>4/13/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-13&id=124550" style="height:100px; margin-top:0px; text-indent: -9000px;" class="" id="" title="Thursday, Apr 13: 0 subscribers">R</a>
</dd>
<dt>4/14/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-14&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="" id="" title="Friday, Apr 14: 0 subscribers">F</a>
</dd>
<dt>4/15/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-15&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="weekend" id="" title="Saturday, Apr 15: 0 subscribers">S</a>
</dd>
<dt>4/16/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-16&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="weekend" id="" title="Sunday, Apr 16: 0 subscribers">S</a>
</dd>
<dt>4/17/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-17&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="" id="" title="Monday, Apr 17: 0 subscribers">M</a>
</dd>
<dt>4/18/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-18&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="" id="" title="Tuesday, Apr 18: 0 subscribers">T</a>
</dd>
<dt>4/19/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-19&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="" id="" title="Wednesday, Apr 19: 0 subscribers">W</a>
</dd>
<dt>4/20/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-20&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="" id="" title="Thursday, Apr 20: 0 subscribers">R</a>
</dd>
<dt>4/21/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-21&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="" id="" title="Friday, Apr 21: 0 subscribers">F</a>
</dd>
<dt>4/22/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-22&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="weekend" id="" title="Saturday, Apr 22: 0 subscribers">S</a>
</dd>
<dt>4/23/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-23&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="weekend" id="" title="Sunday, Apr 23: 0 subscribers">S</a>
</dd>
<dt>4/24/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-24&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="" id="" title="Monday, Apr 24: 0 subscribers">M</a>
</dd>
<dt>4/25/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-25&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="" id="" title="Tuesday, Apr 25: 0 subscribers">T</a>
</dd>
<dt>4/26/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-26&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="" id="" title="Wednesday, Apr 26: 0 subscribers">W</a>
</dd>
<dt>4/27/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-27&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="" id="" title="Thursday, Apr 27: 0 subscribers">R</a>
</dd>
<dt>4/28/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-28&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="" id="" title="Friday, Apr 28: 0 subscribers">F</a>
</dd>
<dt>4/29/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-29&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="weekend" id="" title="Saturday, Apr 29: 0 subscribers">S</a>
</dd>
<dt>4/30/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-04-30&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="weekend" id="" title="Sunday, Apr 30: 0 subscribers">S</a>
</dd>
<dt>5/1/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-05-01&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="" id="" title="Monday, May 01: 0 subscribers">M</a>
</dd>
<dt>5/2/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-05-02&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="" id="" title="Tuesday, May 02: 0 subscribers">T</a>
</dd>
<dt>5/3/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-05-03&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="" id="" title="Wednesday, May 03: 0 subscribers">W</a>
</dd>
<dt>5/4/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-05-04&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="" id="" title="Thursday, May 04: 0 subscribers">R</a>
</dd>
<dt>5/5/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-05-05&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="" id="" title="Friday, May 05: 0 subscribers">F</a>
</dd>
<dt>5/6/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-05-06&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="weekend" id="" title="Saturday, May 06: 0 subscribers">S</a>
</dd>
<dt>5/7/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-05-07&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="weekend" id="" title="Sunday, May 07: 0 subscribers">S</a>
</dd>
<dt>5/8/06</dt>
<dd>
<a href="/fb/a/dashboard?day=2006-05-08&id=124550" style="height:0px; margin-top:100px; text-indent: -9000px;" class="" id="" title="Monday, May 08: 0 subscribers">M</a>
</dd>
</dl>
<span id="maxLabel">12</span>
<span id="minLabel">0</span>
</div>
