飞扬轻狂's blog » .net http://blog.fallseir.com 我心飞扬 我意轻狂 Thu, 06 May 2010 07:13:50 +0000 en hourly 1 http://wordpress.org/?v=3.0 摘录 feed burner 的 html柱状图 http://blog.fallseir.com/2006/05/%e6%91%98%e5%bd%95-feed-burner-%e7%9a%84-html%e6%9f%b1%e7%8a%b6%e5%9b%be/ http://blog.fallseir.com/2006/05/%e6%91%98%e5%bd%95-feed-burner-%e7%9a%84-html%e6%9f%b1%e7%8a%b6%e5%9b%be/#comments Wed, 10 May 2006 06:41:09 +0000 飞扬轻狂 http://blog.fallseir.com/2006/05/%e6%91%98%e5%bd%95-feed-burner-%e7%9a%84-html%e6%9f%b1%e7%8a%b6%e5%9b%be/ 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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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>
 

]]> http://blog.fallseir.com/2006/05/%e6%91%98%e5%bd%95-feed-burner-%e7%9a%84-html%e6%9f%b1%e7%8a%b6%e5%9b%be/feed/ 0