飞扬轻狂's blog

我心飞扬我意轻狂

存档在 ‘.net’ 分类

摘录 feed burner 的 html柱状图

2006年5月10日

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>

没有评论 »

发表在.net

2010年三月
一	二	三	四	五	六	日
« 二
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

返回顶端

XHTML 1.0验证通过 | CSS3验证通过