推荐使用“百度统计”并且拷贝百度统计的前端框架

本篇博文讲两件事情，一个是推荐在博客园经常写博客的童鞋们一个很棒的工具--“百度统计”，另一个是“拷贝百度统计”的页面框架。

　　首先讲第一个事情，我的博客里有不少文章都是讲“用户行为分析”的，虽然现在不做这个方向的项目，但是对它的兴趣不减，所以我今天在自己博客里部署了百度的用户行为分析系统“百度统计”的采集脚本，感受的确是很棒，使用了百度统计后我发现我更能和看过我博客的童鞋们进行互动了。

　　下面我截取几张图片让大家感受下效果：

　　如图01：

　　如图02：

　　（注释：1.PV（page view）即页面浏览量，或点击量，通常是衡量一个网络新闻频道或网站甚至一条网络新闻的主要指标。
　　　　　　2.UV(独立访客)：即Unique Visitor,访问您网站的一台电脑客户端为一个访客。00:00-24:00内相同的tb客户端只被计算一次。）

　　全部来源展示页面：

　　大家看到，浏览我博客的人几乎都是通过搜索引擎找到我的文章

　　搜索关键字页面：

　　呵呵，这里我们可以看到那些人对什么技术感兴趣。

　　使用“百度统计”后，感觉它的页面做的很不错，如是有了“抠出”它页面代码的想法。

　　火影里有个拷贝忍者旗木卡卡西，这里我要做回页面拷贝程序员了。

　　很多童鞋都有种错误的感觉，觉得做页面很简单，因此他们也常常认为获取页面源代码是件很容易的事情,只要点击查看源代码的菜单就行，但是查看源代码所获取的代码是不是我们程序员真的想要，真的能拿来用的代码，这个不尽然，不信这点的朋友可以自己尝试下。下面是我的“抠出”百度统计的前端源码：

　　首先还是目录结构：

　　main.css代码：

View Code

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font: ;
    margin: 0;
    padding: 0;
}
body {
    background:url(../images/aside_bg.png) repeat-y scroll 0 0 transparent;
    min-width: 1263px;
}
body {
    font-family: Arial,'宋体';
    font-size: 12px;
}
body {
    line-height: 1;
}
a {
    color: #0965B8;
    cursor: pointer;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
img {
    vertical-align: middle;
}
label {
    vertical-align: middle;
}
ol, ul {
    list-style: none outside none;
}
label input {
    margin-right: 2px;
}
select, input {
    font-size: 12px;
    vertical-align: middle;
}
input {
    margin: 0;
    padding: 0;
}
.header-wrapper {
    background-color: #115FB6;
    background-image: url(../images/common-2382d36869c24837e0e6c1d2188cf698.png);
    background-position: left 0;
    background-repeat: repeat-x;
}
.header-wrapper .header {
    background-repeat: no-repeat;
    height: 50px;
}
.header-wrapper .logo {
    position: absolute;
    width: 150px;
}
.header-wrapper .logo img {
    height: 50px;
    width: 150px;
}
.header-wrapper .top-nav {
    color: #75A8D8;
    height: 24px;
    line-height: 22px;
    margin-right: 32px;
    text-align: right;
}
.header-wrapper .top-nav span.version {
    background-color: #0C5192;
    margin-right: 8px;
    padding: 0 8px;
}
.header-wrapper .top-nav span.version a {
    margin: 0;
}
.header-wrapper .top-nav a.new-version-guide {
    color: #FFFFCC;
}
.header-wrapper .top-nav span.version .sep {
    margin: 0 5px;
}
.header-wrapper .top-nav a {
    color: #B5D4F2;
    margin: 0 8px;
}
.header-wrapper .top-nav .more-hover .more {
    background-color: #E7F2FC;
    border: 2px solid #1162BA;
    left: 0;
    margin-left: 2px;
    padding: 0 5px;
    top: 0;
}
.header-wrapper .top-nav .more-hover a.more-arrow {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: right -99px;
}
.header-wrapper .top-nav .more-hover .more li {
    display: block;
}
.header-wrapper .top-nav .more-hover .more a {
    margin: 0;
}
.header-wrapper .top-nav .more-hover .more a, .header-wrapper .top-nav .more-hover .more a .new-count {
    color: #0965B8;
}
.header-wrapper .top-nav .account {
    color: #B5D4F2;
}
.header-wrapper .top-nav .more-nav {
    display: inline-block;
    position: relative;
    z-index: 11;
}
.header-wrapper .top-nav .more-nav a.more-arrow {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: right -70px;
    background-repeat: no-repeat;
    padding-right: 10px;
}
.header-wrapper .top-nav .more {
    position: absolute;
}
.header-wrapper .top-nav .more li {
    display: none;
    line-height: 18px;
    list-style-position: outside;
    padding-bottom: 4px;
    text-align: left;
}
.site-selector {
    color: gray;
    float: right;
    margin-right: 40px;
    width: 200px;
}
.selector {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -1418px;
    background-repeat: repeat-x;
    cursor: pointer;
    position: relative;
    z-index: 10;
}
.arrow {
    display: inline-block;
    float: left;
    height: 10px;
    width: 9px;
}
.selector .arrow {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -1458px;
    background-repeat: no-repeat;
    float: right;
    height: 20px;
    width: 18px;
}
.selector:hover .arrow {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -1498px;
}
.site-selector .text {
    float: left;
    width: 158px;
}
.selector .text {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    padding: 0 2px;
    position: relative;
    vertical-align: top;
}
.site-selector .options li.hover .is-not-default, .site-selector a.is-not-default {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -2015px;
}
.site-selector .options li.hover .is-not-default:hover, a.is-not-default:hover {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -2051px;
}
.site-selector .set-default {
    display: inline-block;
    height: 16px;
    padding: 0;
    position: absolute;
    right: 20px;
    top: 3px;
    width: 17px;
}
.site-selector .options {
    left: 0;
    max-height: 300px;
    overflow-y: auto;
    top: 20px;
    width: 198px;
}
.options {
    background-color: white;
    border: 1px solid #83B1E4;
    line-height: 25px;
    max-height: 260px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px 0;
    position: absolute;
    z-index: 1;
}
.layer {
    position: absolute;
    z-index: 1;
}
.header-wrapper .view-tab {
    float: left;
    margin-left: 150px;
}
.header-wrapper .view-tab a.setting-selected, .header-wrapper .view-tab a.report-selected, .header-wrapper .view-tab a.setting-selected:hover, .header-wrapper .view-tab a.report-selected:hover {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -220px;
    color: #1873C8;
    cursor: default;
    text-decoration: none;
}
.header-wrapper .view-tab a {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -128px;
    background-repeat: no-repeat;
    color: White;
    display: inline-block;
    font-weight: bolder;
    height: 26px;
    line-height: 26px;
    margin-right: 3px;
    width: 85px;
}
.header-wrapper .view-tab a:hover {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -174px;
}
.header-wrapper .view-tab a.report-selected .icon {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -386px;
    background-repeat: no-repeat;
}
.header-wrapper .view-tab a .icon {
    display: inline-block;
    float: left;
    height: 26px;
    margin-right: 14px;
    width: 30px;
}
.header-wrapper .view-tab a.setting .icon {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -266px;
    background-repeat: no-repeat;
}
.top-report-nav {
    color: #75A8D8;
    float: left;
    height: 26px;
    line-height: 26px;
    margin-left: 5px;
    position: relative;
    z-index: 10;
}
.l {
    float: left;
}
.top-report-nav a {
    color: #B5D4F2;
    margin: 0 10px;
}
.top-report-nav a.setting {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -2405px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 26px;
    margin-left: 0;
    margin-right: 0;
    width: 17px;
}
.top-report-nav a.setting:hover {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -2485px;
    background-repeat: no-repeat;
}
.top-report-nav span.recommend-reports-blank {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -2447px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 22px;
    line-height: 22px;
    margin-left: 10px;
    padding-left: 87px;
}
.top-report-nav .recommend-reports-box {
    background-color: #EEEEEE;
    border: 1px solid #83B1E4;
    height: 460px;
    line-height: 1.5;
    padding: 2px;
    position: absolute;
    right: 0;
    top: 26px;
    width: 170px;
}
.top-report-nav .recommend-reports-box .title {
    color: #999999;
}
.top-report-nav .recommend-reports-box p {
    line-height: 2;
}
.top-report-nav .recommend-reports-box span.red {
    color: #FF0000;
}
.red {
    color: red;
}
.top-report-nav .recommend-reports-box .recommend-reports-content {
    background-color: #FFFFFF;
    border: 1px solid #ABADB3;
    height: 380px;
    overflow-y: auto;
}
.top-report-nav .recommend-reports-box .recommend-reports-content .nav label {
    color: #000000;
    padding-left: 20px;
}
.top-report-nav .recommend-reports-box .recommend-reports-content .nav label input {
    display: inline-block;
    height: 20px;
    line-height: 20px;
}
.top-report-nav .recommend-reports-box .recommend-reports-content .nav li a.open {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -2527px;
    background-repeat: no-repeat;
    color: #333333;
    display: block;
    font-weight: bolder;
    line-height: 30px;
    margin: 0;
    padding-left: 20px;
}
.top-report-nav .recommend-reports-box .recommend-reports-operations {
    height: 63px;
}
.top-report-nav .recommend-reports-box p {
    line-height: 2;
}
.top-report-nav .recommend-reports-box .recommend-reports-operations a.selected {
    background-color: #73B1E0;
    color: #FFFFFF;
    font-weight: bold;
    padding: 2px 5px;
}
.top-report-nav .recommend-reports-box .recommend-reports-operations a {
    color: #0965B8;
    margin: 0 5px;
}
.top-report-nav a.selected {
    font-weight: bolder;
}
.r {
    float: right;
}
a.button {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -1075px;
    background-repeat: repeat-x;
    border-color: #B1AFB0 #8C8C8C;
    border-style: solid;
    border-width: 1px;
    color: black;
    display: inline-block;
    text-decoration: none;
}
.top-report-nav .recommend-reports-box .recommend-reports-operations a span {
    color: #000000;
    margin: 0 5px;
}
a.button span, a.button input {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
}
.site-selector .options li a {
    white-space: normal;
}
.options li a {
    color: #333333;
    display: block;
    padding: 0 10px;
    white-space: nowrap;
}
.site-selector .options li .set-default {
    background-image: none;
    right: 3px;
    top: 4px;
}
.site-selector .options li.hover {
    background-color: #DBE4FF;
}
.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: block;
}
.clearfix {
    display: inline-block;
}
.aside {
    position: absolute;
    width: 149px;
}
.misc {
    float: right;
    width: 40px;
}
.main {
    margin-left: 160px;
    margin-right: 40px;
}
.aside .nav li.selected {
    background-color: #EA764F;
    border-right: 4px solid #E3563A;
}
.aside .nav li.selected a {
    color: white;
    font-weight: bolder;
}
.aside .nav li a {
    color: #6191D4;
    display: inline-block;
    height: 29px;
    line-height: 29px;
    padding-left: 30px;
}
.aside .nav li a.open {
    background-color: #E2EDFB;
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -533px;
    background-repeat: no-repeat;
    color: #0965B8;
    display: block;
    font-weight: bolder;
    height: 30px;
    line-height: 30px;
    padding-left: 20px;
}
.aside .nav li .new {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -508px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 10px;
    margin-left: 6px;
    overflow: hidden;
    vertical-align: text-bottom;
    width: 22px;
}
.aside .helper-center {
    background-color: #EDF5ED;
    border: 1px solid #BDDEB2;
    margin: 51px auto auto;
    width: 140px;
}
.aside .helper-center .title {
    background-color: #CCF2CC;
    color: #0965B8;
    font-weight: bolder;
    line-height: 30px;
    padding-left: 20px;
}
.aside .helper-center .title a {
    color: #0C7823;
}
.aside .helper-center .text-wrapper {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -613px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 22px;
    margin: 8px 0 8px 3px;
}
.aside .helper-center .text-wrapper .text {
    background-color: transparent;
    border-width: 0;
    padding: 4px;
    vertical-align: super;
    width: 82px;
}
input.text {
    padding: 2px;
}
.gray {
    color: gray;
}
.aside .helper-center .text-wrapper a.button {
    vertical-align: top;
}
.aside .nav li a.close {
    background-color: #E2EDFB;
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -573px;
    background-repeat: no-repeat;
    color: #0965B8;
    display: block;
    font-weight: bolder;
    height: 30px;
    line-height: 30px;
    margin-bottom: 1px;
    padding-left: 20px;
}
.main div.content {
    min-height: 500px;
    min-width:1063px;
    padding-top: 13px;
}
div.title-bar {
    height: 20px;
    line-height: 20px;
    margin-bottom: 13px;
    width:100%;
    position: relative;
}
div.title-bar div.tool-bar a.send-report {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -1907px;
    background-repeat: no-repeat;
    padding-left: 18px;
    padding-right: 20px;
}
div.title-bar div.tool-bar a {
    display: inline-block;
    height: 20px;
    line-height: 20px;
}
div.title-bar div.tool-bar a.download-report {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -1961px;
    background-repeat: no-repeat;
    padding-left: 11px;
}
div.title-bar h1 {
    color: #333333;
    font-size: 14px;
    font-weight: bolder;
    padding: 0;
}
div.title-bar div.date {
    color: #5F3333;
    display: inline;
    font-size: 14px;
    white-space: nowrap;
}
div.title-bar a.report-help {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -1880px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 20px;
    margin-left: 5px;
    padding-right: 14px;
    text-decoration: none;
}
div.report-tip {
    position: relative;
}
.report-tip, .indicator-tip {
    cursor: help;
}
div.report-tip div.tip-arrow {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -1586px;
    background-repeat: no-repeat;
    height: 5px;
    left: 67px;
    position: absolute;
    top: -5px;
    width: 9px;
}
div.report-tip div.report-tip-content {
    background: url("../images/xx1.gif") repeat-y scroll 70% 0 #E9F5EC;
    border-bottom: 1px solid #BBDFC3;
    border-top: 2px solid #BBDFC3;
    cursor: default;
    margin-bottom: 10px;
    padding: 10px;
}
div.report-tip div.report-tip-content table.report-tip-table {
    width: 100%;
}
div.report-tip div.report-tip-content table.report-tip-table div.left-content {
    padding-right: 60px;
}
div.report-tip div.report-tip-content table.report-tip-table p.text {
    color: #ACD2B5;
    font-weight: bolder;
}
div.report-tip div.report-tip-content table.report-tip-table p {
    line-height: 1.5;
}
div.report-tip div.report-tip-content table.report-tip-table p.label {
    color: #4E7156;
}
div.report-tip div.report-tip-content table.report-tip-table div.right-content {
    padding-left: 20px;
}
div.report-tip div.report-tip-content table.report-tip-table .text-wrapper .text {
    height: 20px;
    line-height: 20px;
    margin-right: 5px;
    padding: 0;
    width: 155px;
}
div.report-tip div.report-tip-content table.report-tip-table .text-wrapper a.button {
    vertical-align: middle;
}
div.control-bar-wrapper {
    height: 30px;
    position: relative;
    z-index: 1;
}
div.control-bar-wrapper div.control-bar {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -1601px;
    background-repeat: repeat-x;
    height: 22px;
    line-height: 22px;
    padding: 4px 0;
    width: 100%;
    z-index: 2999;
}
div.control-bar-wrapper div.control-bar div.date-select-bar {
    padding-left: 20px;
}
div.control-bar-wrapper div.control-bar div.date-select-bar a {
    color: #0965B8;
    display: inline-block;
    height: 18px;
    line-height: 18px;
    padding: 2px 0;
}
div.control-bar-wrapper div.control-bar span.seprator {
    color: #0965B8;
    display: inline-block;
    padding: 0 10px;
    text-align: center;
    width: 10px;
}
div.control-bar-wrapper div.control-bar div.date-select-bar a.cur {
    background-color: #73B1E0;
    color: #FFFFFF;
    font-weight: bold;
    padding: 2px 5px;
}
div.control-bar-wrapper div.control-bar input.text {
    background-color: transparent;
    border: 0 none;
    color: #0965B8;
    cursor: pointer;
    font-family: Arial;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 2px 0;
    width: 150px;
}
div.control-bar-wrapper div.control-bar input.compare-date {
    margin: 0 4px;
    padding: 0;
}
div.control-bar-wrapper div.control-bar div.scroll-bar {
    margin-right: 10px;
}
div.control-bar-wrapper div.control-bar div.scroll-bar span.open {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -1701px;
    background-repeat: no-repeat;
    display: inline-block;
}
div.control-bar-wrapper div.control-bar div.scroll-bar span.scroll {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -1641px;
    background-repeat: no-repeat;
    cursor: pointer;
    display: inline-block;
    height: 22px;
    margin: 0;
    padding: 0;
    text-decoration: none;
    width: 20px;
}
.misc .feedback {
    margin-left: 7px;
    position: fixed;
    top: 300px;
}
.misc .feedback a {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -655px;
    background-repeat: no-repeat;
    display: block;
    height: 111px;
    width: 22px;
}
.misc .back-to-top {
    bottom: 10px;
    margin-left: 7px;
    position: fixed;
}
.misc .back-to-top a {
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -917px;
    background-repeat: no-repeat;
    display: block;
    height: 59px;
    width: 22px;
}
.body{
    min-width:1263px;
}
div.section {
    margin-top: 10px;
    width:100%;
}
.section {
    margin-bottom: 10px;
}
.tabs {
    position: relative;
}
.tabs ul {
    border-bottom: 1px solid #E4EEFB;
    width:100%;
}
.tabs ul li.selected {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: White;
    background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png");
    background-position: left -2350px;
    background-repeat: repeat-x;
    border-color: #E4EEFB;
    border-style: solid;
    border-width: 1px 1px 0;
    bottom: -1px;
    line-height: 24px;
    position: relative;
}
.tabs ul li {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #E2EDFB;
    border-color: white;
    border-style: solid;
    border-width: 1px 1px 0;
    float: left;
    height: 25px;
    line-height: 25px;
    margin-right: 5px;
    padding: 0 10px;
}
.tabs ul li a {
    display: inline-block;
}
.tabs ul li.selected a {
    border-color: white;
    color: black;
}
.tabs .download-words-container {
    background: none repeat scroll 0 0 transparent;
    float: right;
}
.tabs .download-words-container a {
    border: medium none;
    display: inline;
    padding: 0;
}
.tabs ul li a.download-words {
    background-image: url("../images/option-arrow-down.gif");
    background-position: right 6px;
    background-repeat: no-repeat;
    display: inline-block;
    line-height: 16px;
    margin-left: 10px;
    padding: 0 10px 0 0;
}
table.summary {
    background-color: #FDF2EF;
    border-bottom: 1px solid #F1F1F1;
    border-collapse: separate;
    border-top: 1px solid #F1F1F1;
    width: 100%;
}
table.summary tr td {
    border-bottom: 1px solid white;
    border-right: 1px solid #E4E4E4;
    border-top: 1px solid white;
    line-height: 1.2;
    padding: 8px 30px;
    text-align: left;
}
table.summary tr td span.text {
    color: #999999;
    line-height: 24px;
}
a.help {
    background-image: url("../images/option-arrow-down.gif");
    background-position: left -1155px;
    background-repeat: no-repeat;
    display: inline-block;
    text-decoration: none;
    width: 16px;
}
table.summary tr td span.value {
    color: #333333;
    font-size: 20px;
}
table.summary tr td.last {
    border-right: medium none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.filter-tabs ul {
    border-width: 0;
}
.filter-tabs ul li {
    background-color: transparent;
}
.filter-tabs ul li a {
    border-width: 0;
    color: #999999;
}
.tabs .close {
    background-image: url("../images/option-arrow-down.gif");
    background-position: left -2389px;
    background-repeat: no-repeat;
}

　　main.js代码：

View Code

$(document).ready(function(){
    //官方博客 下拉菜单 hover 事件
    $("#MoreNav").hover(
        function(){
            $(this).addClass("more-hover");
        },
        function(){
            $(this).removeClass("more-hover");    
        }
    );
    //移动统计 下拉菜单 hover 事件
    $("#MoreNav2").hover(
        function(){
            $(this).addClass("more-hover");
        },
        function(){
            $(this).removeClass("more-hover");    
        }
    );
    // 头部下拉点击事件 
    $("#xj_arrowclose_01").toggle(
        function(){
            $(this).addClass("selected");
            $("#SiteList").removeClass("xj_haveorno_display");
        },
        function(){
            $(this).removeClass("selected");
            $("#SiteList").addClass("xj_haveorno_display");
        }
    );
    $("#xj_sitrlist_li").hover(
        function(){
            $(this).addClass("hover");
        },function(){
            $(this).removeClass("hover");
        }
    );
    $("#xj_addcybaogao").toggle(
        function(){
            $("#RecommendReportsBox").removeClass("xj_haveorno_display");
        },
        function(){
            $("#RecommendReportsBox").addClass("xj_haveorno_display");    
        }    
    );
    // 左侧主菜单折叠事件
    $(".recordable").toggle(
        function(){
            $(this).removeClass("open");
            $(this).addClass("close");
            $("#" + $(this).attr("id") + " ~ ul").attr("style","display:none");    
        },
        function(){
            $(this).addClass("open");
            $(this).removeClass("close");    
            $("#" + $(this).attr("id") + " ~ ul").attr("style","");            
        }
    );
    // 左侧子菜单点击事件
    $("a[id^='xj_leftcdchild']").bind("click",function(evt){
        $("a[id^='xj_leftcdchild']").parent().removeClass("selected");
        $("#" + evt.target.id).parent().addClass("selected");
    });
});

　　baidudemo01.html代码：

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Baidu Tongji Demo</title>
</head>
<link type="text/css" href="css/main.css" rel="stylesheet"></link>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<style type="text/css">
.xj_haveorno_display{
    display:none;    
}
</style>
<body>
    <!-- 百度统计页面的头部 -->
    <div id="Top" class="header-wrapper">
        <div class="header">
            <!-- 百度统计页面的logo -->
            <div class="logo">
               <a href="#">
                <img alt="百度统计" src="images/logo.png"/>
               </a>
            </div>   
            <div class="top-nav">
                <span class="version">
                    <a memo="{id:'top_30guide'}" class="new-version-guide trackable" href="javascript:void(0);">
                        3.0版介绍
                    </a>
                    <span class="sep">
                        |
                    </span>
                    <a memo="{id:'top_old'}" class="trackable" href="javascript:void(0);">
                        回到2.0版
                    </a>
                </span>  
            <span class="account">
                sharpxiajun
            </span>
            <!-- 官方博客 下拉菜单 -->
            <div class="more-nav" id="MoreNav">
                <a memo="{id:'top_blog'}" class="more-arrow trackable" target="_blank"
                href="javascript:void(0);">
                    官方博客
                </a>
                <ul class="more">
                    <li>
                        <a memo="{id:'top_blog'}" class="more-arrow trackable" target="_blank"
                        href="javascript:void(0);">
                            官方博客
                        </a>
                    </li>
                    <li>
                        <a memo="{id:'top_diz'}" class="trackable" target="_blank" href="javascript:void(0);">
                            讨论区
                        </a>
                    </li>
                    <li>
                        <a memo="{id:'top_cont'}" class="trackable" target="_blank" href="javascript:void(0);">
                            联系我们
                        </a>
                    </li>
                </ul>
            </div>
            |
            <!-- 移动统计 下拉菜单 -->
            <div class="more-nav" id="MoreNav2">
                <a memo="{id:'top_mobapp'}" class="more-arrow trackable" target="_blank"
                href="javascript:void(0);">
                    移动统计
                </a>
                <ul class="more">
                    <li>
                        <a memo="{id:'top_mobapp'}" class="more-arrow trackable" target="_blank"
                        href="javascript:void(0);">
                            移动统计
                        </a>
                    </li>
                    <li>
                        <a memo="{id:'top_union'}" class="trackable" target="_blank" href="javascript:void(0);">
                            百度联盟
                        </a>
                    </li>
                </ul>
            </div>
            |
            <a memo="{id:'top_help'}" class="trackable" target="_blank" href="javascript:void(0);">
                帮助
            </a>
            |
            <a href="javascript:void(0);">
                退出
            </a>          
            </div>    
            <div id="SiteListContainer" class="selector site-selector">
                <div layer=".site-selector .options" class="arrow close" id="xj_arrowclose_01">
                </div>
                <div title="www.cnblogs.com/sharpxiajun" layer=".site-selector .options" class="text">
                    www.cnblogs.com/sharpxiajun
                </div>
                <a class="set-default is-not-default" data="1811106" id="SetCurrentDefaultSite" title="设为默认网站" href="javascript:void(0)">
                </a>
                <ul id="SiteList"  class="options layer xj_haveorno_display">
                    <li id="xj_sitrlist_li">
                        <a title="www.cnblogs.com/sharpxiajun" href="javascript:void(0);">
                            www.cnblogs.com/sharpxiajun
                        </a>
                        <a title="设为默认网站" class="set-default is-not-default" data="1811106" href="javascript:void(0)">
                        </a>
                    </li>
                </ul>
            </div> 
            <div class="view-tab">
                <a memo="{id:'top_rep_tab'}" class="report-selected trackable" href="javascript:void(0);">
                    <span class="icon">
                    </span>
                    报告
                </a>
                <a memo="{id:'top_rep_set'}" class="setting trackable" href="javascript:void(0);">
                    <span class="icon">
                    </span>
                    设置
                </a>
            </div>  
            <div class="top-report-nav">
                <div id="RecommendReports" class="recommend-reports l">
                    <a memo="{id:'top_rep_0'}" class="trackable" href="javascript:void(0);">
                        搜索词
                    </a>
                    |
                    <a memo="{id:'top_rep_1'}" class="trackable" href="javascript:void(0);">
                        页面点击图
                    </a>
                    |
                    <a memo="{id:'top_rep_2'}" class="trackable" href="javascript:void(0);">
                        SEO建议
                    </a>
                    |
                    <a memo="{id:'top_rep_3'}" class="trackable" href="javascript:void(0);">
                        百度索引量查询
                    </a>
                </div>
                <!-- 图标用户可看到推荐报告，不能设置 -->
                <a memo="{id:'top_rep_set'}" id="xj_addcybaogao" layer=".recommend-reports-box" class="setting trackable"
                title="添加常用报告" >
                </a>
                <span class="recommend-reports-blank" style=" display:none;" id="RecommendReportBlank">
                </span>
                <div id="RecommendReportsBox"  class="recommend-reports-box layer bg-iframe xj_haveorno_display">
                    <p class="title">
                        选择常用报告(最多
                        <span class="red">
                            4
                        </span>
                        项)
                    </p>
                    <div id="RecommendReportsContent" class="recommend-reports-content">
                        <ul class="nav">
                            <li>
                                <label for="RecommendReport1">
                                    <input type="checkbox" value="1" title="网站概况" name="recommend-report"
                                    id="RecommendReport1">
                                    网站概况
                                </label>
                            </li>
                            <li>
                                <a class="open" href="javascript:void(0);">
                                    趋势分析
                                </a>
                                <ul>
                                    <li>
                                        <label for="RecommendReport3">
                                            <input type="checkbox" value="3" title="最新访客" name="recommend-report"
                                            id="RecommendReport3">
                                            最新访客
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport4">
                                            <input type="checkbox" value="4" title="今日统计" name="recommend-report"
                                            id="RecommendReport4">
                                            今日统计
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport5">
                                            <input type="checkbox" value="5" title="昨日统计" name="recommend-report"
                                            id="RecommendReport5">
                                            昨日统计
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport6">
                                            <input type="checkbox" value="6" title="最近30天" name="recommend-report"
                                            id="RecommendReport6">
                                            最近30天
                                        </label>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a class="open" href="javascript:void(0);">
                                    来源分析
                                </a>
                                <ul>
                                    <li>
                                        <label for="RecommendReport8">
                                            <input type="checkbox" value="8" title="全部来源" name="recommend-report"
                                            id="RecommendReport8">
                                            全部来源
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport9">
                                            <input type="checkbox" value="9" title="搜索引擎" name="recommend-report"
                                            id="RecommendReport9">
                                            搜索引擎
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport10">
                                            <input type="checkbox" value="10" title="搜索词" checked="true" name="recommend-report"
                                            id="RecommendReport10">
                                            搜索词
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport11">
                                            <input type="checkbox" value="11" title="外部链接" name="recommend-report"
                                            id="RecommendReport11">
                                            外部链接
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport58">
                                            <input type="checkbox" value="58" title="百度移动搜索" name="recommend-report"
                                            id="RecommendReport58">
                                            百度移动搜索
                                        </label>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a class="open" href="javascript:void(0);">
                                    网页分析
                                </a>
                                <ul>
                                    <li>
                                        <label for="RecommendReport13">
                                            <input type="checkbox" value="13" title="受访页面" name="recommend-report"
                                            id="RecommendReport13">
                                            受访页面
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport14">
                                            <input type="checkbox" value="14" title="访问入口" name="recommend-report"
                                            id="RecommendReport14">
                                            访问入口
                                        </label>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a class="open" href="javascript:void(0);">
                                    访客分析
                                </a>
                                <ul>
                                    <li>
                                        <label for="RecommendReport16">
                                            <input type="checkbox" value="16" title="地域分布" name="recommend-report"
                                            id="RecommendReport16">
                                            地域分布
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport17">
                                            <input type="checkbox" value="17" title="系统环境" name="recommend-report"
                                            id="RecommendReport17">
                                            系统环境
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport18">
                                            <input type="checkbox" value="18" title="新老访客" name="recommend-report"
                                            id="RecommendReport18">
                                            新老访客
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport19">
                                            <input type="checkbox" value="19" title="访客属性" name="recommend-report"
                                            id="RecommendReport19">
                                            访客属性
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport20">
                                            <input type="checkbox" value="20" title="忠诚度" name="recommend-report"
                                            id="RecommendReport20">
                                            忠诚度
                                        </label>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a class="open" href="javascript:void(0);">
                                    定制分析
                                </a>
                                <ul>
                                    <li>
                                        <label for="RecommendReport22">
                                            <input type="checkbox" value="22" title="页面点击图" checked="true" name="recommend-report"
                                            id="RecommendReport22">
                                            页面点击图
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport23">
                                            <input type="checkbox" value="23" title="子目录" name="recommend-report"
                                            id="RecommendReport23">
                                            子目录
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport24">
                                            <input type="checkbox" value="24" title="转化路径" name="recommend-report"
                                            id="RecommendReport24">
                                            转化路径
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport25">
                                            <input type="checkbox" value="25" title="页面上下游" name="recommend-report"
                                            id="RecommendReport25">
                                            页面上下游
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport26">
                                            <input type="checkbox" value="26" title="指定广告跟踪" name="recommend-report"
                                            id="RecommendReport26">
                                            指定广告跟踪
                                        </label>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a class="open" href="javascript:void(0);">
                                    优化分析
                                </a>
                                <ul>
                                    <li>
                                        <label for="RecommendReport28">
                                            <input type="checkbox" value="28" title="SEO建议" checked="true" name="recommend-report"
                                            id="RecommendReport28">
                                            SEO建议
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport29">
                                            <input type="checkbox" value="29" title="搜索词排名" name="recommend-report"
                                            id="RecommendReport29">
                                            搜索词排名
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport30">
                                            <input type="checkbox" value="30" title="百度索引量查询" checked="true" name="recommend-report"
                                            id="RecommendReport30">
                                            百度索引量查询
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport31">
                                            <input type="checkbox" value="31" title="网站速度诊断" name="recommend-report"
                                            id="RecommendReport31">
                                            网站速度诊断
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport32">
                                            <input type="checkbox" value="32" title="升降榜" name="recommend-report"
                                            id="RecommendReport32">
                                            升降榜
                                        </label>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="recommend-reports-operations">
                        <p>
                            <a href="javascript:void(0)" id="RecommendReportsDefault" class="selected">
                                系统默认推荐
                            </a>
                        </p>
                        <div class="r">
                            <a class="button confirm" href="javascript:void(0);">
                                <span>
                                    确定
                                </span>
                            </a>
                            <a href="javascript:void(0);" class="cancel">
                                取消
                            </a>
                        </div>
                    </div>
                </div>
            </div>         
        </div>
    </div>
    <!-- 页面主体 -->
    <div class="body clearfix">
        <!-- 左侧菜单 -->
        <div class="aside">
            <ul class="nav">
                <li class="selected">
                    <a id="xj_leftcdchild_01" memo="{id:'1',type:'menu',global:1,status:''}" href="javascript:void(0);">
                        网站概况
                    </a>
                </li>
                <li class="">
                    <a id="xj_leftcaidan_01" memo="{id:'2',type:'menu',global:1,status:'1'}" href="javascript:void(0);"
                    class="recordable open">
                        趋势分析
                    </a>
                    <ul  style="">
                        <li class="">
                            <a id="xj_leftcdchild_02" href="javascript:void(0);">
                                最新访客
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_03" href="javascript:void(0);">
                                今日统计
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_04" href="javascript:void(0);">
                                昨日统计
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_05" href="javascript:void(0);">
                                最近30天
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                    </ul>
                </li>
                <li class="">
                    <a id="xj_leftcaidan_02" memo="{id:'7',type:'menu',global:1,status:''}" href="javascript:void(0);"
                    class="recordable open">
                        来源分析
                    </a>
                    <ul>
                        <li class="">
                            <a id="xj_leftcdchild_06" href="javascript:void(0);">
                                全部来源
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_07" href="javascript:void(0);">
                                搜索引擎
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_08" href="javascript:void(0);">
                                搜索词
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_09" href="javascript:void(0);">
                                外部链接
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_10" href="javascript:void(0);">
                                百度移动搜索
                            </a>
                            <span class="new">
                                &nbsp;
                            </span>
                        </li>
                    </ul>
                </li>
                <li class="">
                    <a id="xj_leftcaidan_03" memo="{id:'12',type:'menu',global:1,status:''}" href="javascript:void(0);"
                    class="recordable open">
                        网页分析
                    </a>
                    <ul>
                        <li class="">
                            <a id="xj_leftcdchild_11" href="javascript:void(0);">
                                受访页面
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_12" href="javascript:void(0);">
                                访问入口
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                    </ul>
                </li>
                <li class="">
                    <a id="xj_leftcaidan_04" memo="{id:'15',type:'menu',global:1,status:''}" href="javascript:void(0);"
                    class="recordable open">
                        访客分析
                    </a>
                    <ul>
                        <li class="">
                            <a id="xj_leftcdchild_13" href="javascript:void(0);">
                                地域分布
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_14" href="javascript:void(0);">
                                系统环境
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_15" href="javascript:void(0);">
                                新老访客
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_16" href="javascript:void(0);">
                                访客属性
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_17" href="javascript:void(0);">
                                忠诚度
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                    </ul>
                </li>
                <li class="">
                    <a id="xj_leftcaidan_05" memo="{id:'21',type:'menu',global:1,status:''}" href="javascript:void(0);"
                    class="recordable open">
                        定制分析
                    </a>
                    <ul>
                        <li class="">
                            <a id="xj_leftcdchild_18" href="javascript:void(0);">
                                页面点击图
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_19" href="javascript:void(0);">
                                子目录
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_20" href="javascript:void(0);">
                                转化路径
                            </a>
                            <span class="new">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_21" href="javascript:void(0);">
                                页面上下游
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_22" href="javascript:void(0);">
                                指定广告跟踪
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                    </ul>
                </li>
                <li class="">
                    <a id="xj_leftcaidan_06" memo="{id:'27',type:'menu',global:1,status:''}" href="javascript:void(0);"
                    class="recordable open">
                        优化分析
                    </a>
                    <ul>
                        <li class="">
                            <a id="xj_leftcdchild_23" href="javascript:void(0);">
                                SEO建议
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_24" href="javascript:void(0);">
                                搜索词排名
                            </a>
                            <span class="new">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_25" href="javascript:void(0);">
                                百度索引量查询
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_26" href="javascript:void(0);">
                                网站速度诊断
                            </a>
                            <span class="new">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_27" href="javascript:void(0);">
                                升降榜
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                    </ul>
                </li>
            </ul>
            <div class="helper-center">
                <div class="title">
                    <a memo="{id:'nav_help_link'}" class="trackable" target="_blank" href="javascript:void(0);">
                        帮助中心
                    </a>
                </div>
                <form class="text-wrapper" action="javascript:void(0);"
                target="_blank" method="post">
                    <input type="text" id="Help" value="输入您的问题" name="keyword" autocomplete="off"
                    class="text gray">
                    <a href="javascript:void(0)" class="button">
                        <input type="submit" value="查询" memo="{id:'nav_help_sea'}" class="trackable">
                    </a>
                </form>
            </div>        
        </div>
        <div class="misc">
            <div class="feedback" id="Feedback">
                <a href="javascript:void(0);" target="_blank"
                class="trackable" memo="{id:'feedba'}">
                </a>
            </div>
            <div class="back-to-top" id="BackToTop" style="display:none">
                <a href="#Top" class="trackable" memo="{id:'back2top'}">
                </a>
            </div>        
        </div>
        <div class="main">
            <div class="content clearfix">
                <div class="title-bar clearfix">
                    <div class="tool-bar r" id="ToolBar">
                        <a memo="{id:'masend'}" class="send-report trackable" id="SendReport"
                        href="javascript:void(0);">
                            发送
                        </a>
                        <a memo="{id:'doload'}" class="download-report trackable" id="DownloadReport"
                        href="javascript:void(0);">
                            下载
                        </a>
                    </div>
                    <h1 class="l">
                        搜索词
                    </h1>
                    <div class="date l" id="Date">
                        (2012/08/05~2012/08/06)
                    </div>
                    <a href="javascript:void(0);" class="report-help close l" id="ReportTipIco"
                    title="点击可查看报告详细帮助">
                        &nbsp;
                    </a>
                </div> 
                <div style="display:none;" id="ReportTip" class="report-tip">
                    <div class="tip-arrow" style="left: 214px;">
                    </div>
                    <div class="report-tip-content">
                        <table class="report-tip-table">
                            <tbody>
                                <tr>
                                    <td width="70%" valign="top">
                                        <div class="left-content l">
                                            <p class="text">
                                                本报告助您分析：
                                            </p>
                                            <p class="label">
                                                网民在各类搜索引擎上通过哪些搜索词找到并访问了您网站。助您及时了解网民的关注点，以及哪些搜索词给您网站带来了更多有效访客，从而优化搜索推广提词方案。
                                            </p>
                                        </div>
                                    </td>
                                    <td width="30%" valign="middle">
                                        <div class="l right-content">
                                            <div class="quesstions">
                                                <p class="text">
                                                    常见问题：
                                                </p>
                                                <p class="label">
                                                    <a target="_blank" href="javascript:void(0);">
                                                        搜索词（分搜索引擎）报告能告诉我哪些信息？
                                                    </a>
                                                </p>
                                            </div>
                                            <div class="search">
                                                <form class="text-wrapper" action="http://yingxiao.baidu.com/support/tongji/?module=default&amp;controller=index&amp;action=search"
                                                target="_blank" method="post">
                                                    <input type="text" id="ReportHelp" value="更多问题请在这里查询..." name="keyword"
                                                    autocomplete="off" class="text gray">
                                                    <a href="javascript:void(0)" class="button">
                                                        <input type="submit" value="查询">
                                                    </a>
                                                </form>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div> 
                <div id="ControlBarWrapper" class="control-bar-wrapper">
                    <div id="ControlBar" class="control-bar bg-iframe">
                        <div id="DateSelectBar" class="l date-select-bar">
                            <a memo="{id:'time_tody'}" class="trackable" href="#00">
                                今天
                            </a>
                            <span class="seprator">
                                |
                            </span>
                            <a memo="{id:'time_yest'}" class="trackable  cur" href="#-1">
                                昨天
                            </a>
                            <span class="seprator">
                                |
                            </span>
                            <a memo="{id:'time_week'}" class="trackable" href="#-6">
                                最近7天
                            </a>
                            <span class="seprator">
                                |
                            </span>
                            <a memo="{id:'time_month'}" class="trackable" href="#-29">
                                最近30天
                            </a>
                            <span class="seprator">
                                |
                            </span>
                        </div>
                        <div class="l time-select-bar">
                            <input value="自定义时间段" id="DateSelect" memo="{id:'time_selt'}" class="text trackable"
                            readonly="readonly" onfocus="javascript:this.blur();">
                            <input type="checkbox" class="compare-date" id="CompareDate">
                            <input value="与其他时间段对比" id="CompareDateSelect" memo="{id:'time_consel'}"
                            class="text trackable" readonly="readonly" onfocus="javascript:this.blur();">
                        </div>
                        <div class="r scroll-bar">
                            <span memo="{id:'Scroll',type:'scroll',global:1}" class="scroll  open  recordable"
                            title="设置随屏滚动" id="Scroll">
                                &nbsp;
                            </span>
                        </div>
                    </div>
                </div>  
                <div class="section" id="SourceTabs">
                    <div class="tabs">
                        <ul class="clearfix">
                            <li class="selected">
                                <a href="javascript:void(0);">
                                    按搜索引擎
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">
                                    按指标分类
                                </a>
                            </li>
                            <li class="download-words-container">
                                <a class="subscribe-words" id="SubscribeWords" href="javascript:void(0)">
                                    预订全部搜索词
                                </a>
                                <a class="download-words" layer="#FileList" href="javascript:void(0)"
                                id="DownloadWords" style="display:none;">
                                    下载全部搜索词数据包（至
                                    <span id="EndSubscribe">
                                    </span>
                                    ）
                                </a>
                            </li>
                        </ul>
                    </div>
                </div> 
                <div class="section" id="Summary">
                    <table class="summary">
                        <tbody>
                            <tr>
                                <td>
                                    <span class="text">
                                        总搜索次数
                                        <a class="help" data="total_search_count" href="javascript:void(0)">
                                            &nbsp;
                                        </a>
                                    </span>
                                    <br>
                                    <span class="value">
                                        86
                                    </span>
                                </td>
                                <td>
                                    <span class="text">
                                        百度
                                        <a class="help" data="search_engine_baidu" href="javascript:void(0)">
                                            &nbsp;
                                        </a>
                                    </span>
                                    <br>
                                    <span class="value">
                                        76.74%
                                    </span>
                                </td>
                                <td>
                                    <span class="text">
                                        Google
                                        <a class="help" data="search_engine_g" href="javascript:void(0)">
                                            &nbsp;
                                        </a>
                                    </span>
                                    <br>
                                    <span class="value">
                                        20.93%
                                    </span>
                                </td>
                                <td>
                                    <span class="text">
                                        tb搜狗
                                        <a class="help" data="search_engine_sogou" href="javascript:void(0)">
                                            &nbsp;
                                        </a>
                                    </span>
                                    <br>
                                    <span class="value">
                                        2.33%
                                    </span>
                                </td>
                                <td>
                                    <span class="text">
                                        其他
                                        <a class="help" data="search_engine_other" href="javascript:void(0)">
                                            &nbsp;
                                        </a>
                                    </span>
                                    <br>
                                    <span class="value">
                                        0%
                                    </span>
                                </td>
                                <td class="last">
                                    <span class="text">
                                        占比
                                        <a class="help" data="search_ratio" href="javascript:void(0)">
                                            &nbsp;
                                        </a>
                                    </span>
                                    <br>
                                    <span class="value">
                                        100%
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>       
            </div>
        </div>
    </div>
</body>
</html>

　　效果图：

　　下载链接：

　　http://files.cnblogs.com/sharpxiajun/BAIDUTONGJI.zip

　　百度的页面做的不错，希望有天我能在自己的项目中使用到这些代码。

posted on 2012-08-06 13:47 chen11-1 阅读(881) 评论(0) 编辑收藏

tbwshc

推荐使用“百度统计”并且拷贝百度统计的前端框架

My Links

Blog Stats

常用链接

留言簿(4)

随笔分类

随笔档案

文章分类

文章档案

新闻档案

tbw淘宝商城-首页

搜索

最新评论

阅读排行榜

评论排行榜