tbwshc

          推薦使用“百度統計”并且拷貝百度統計的前端框架

          本篇博文講兩件事情,一個是推薦在博客園經常寫博客的童鞋們一個很棒的工具--“百度統計”,另一個是“拷貝百度統計”的頁面框架。

            首先講第一個事情,我的博客里有不少文章都是講“用戶行為分析”的,雖然現在不做這個方向的項目,但是對它的興趣不減,所以我今天在自己博客里部署了百度的用戶行為分析系統“百度統計”的采集腳本,感受的確是很棒,使用了百度統計后我發現我更能和看過我博客的童鞋們進行互動了。

            下面我截取幾張圖片讓大家感受下效果:

            如圖01:

            如圖02:

           ?。ㄗ⑨專?.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 閱讀(886) 評論(0)  編輯  收藏

          主站蜘蛛池模板: 饶平县| 乐都县| 寻乌县| 泾源县| 久治县| 太仆寺旗| 常山县| 分宜县| 陇南市| 抚州市| 靖西县| 同心县| 宜川县| 乌兰察布市| 张家港市| 六枝特区| 巩留县| 宽甸| 金昌市| 施甸县| 隆回县| 威海市| 林甸县| 新民市| 门头沟区| 改则县| 南郑县| 乌拉特前旗| 塔河县| 凤翔县| 西峡县| 依安县| 金川县| 徐汇区| 虞城县| 深圳市| 东丽区| 视频| 淮南市| 来安县| 南平市|