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

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

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

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

  如图01:

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

  如图02:

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

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

  全部来源展示页面:

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

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

  搜索关键字页面:

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

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

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

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

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

  首先还是目录结构:

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

  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">

                                        搜狗

                                        <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>

  效果图:

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

  下载链接:

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

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

你可能感兴趣的:(JavaScript)