亚洲资源在线观看,亚洲熟妇久久精品,亚洲专区中文字幕

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

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

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

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

　　如圖01：

　　如圖02：

　　（注釋：1.PV（page view）即頁面瀏覽量，或點擊量，通常是衡量一個網絡新聞頻道或網站甚至一條網絡新聞的主要指標。
　　　　　　2.UV(獨立訪客)：即Unique Visitor,訪問您網站的一臺電腦客戶端為一個訪客。00:00-24:00內相同的tb客戶端只被計算一次。）

　　全部來源展示頁面：

　　大家看到，瀏覽我博客的人幾乎都是通過搜索引擎找到我的文章

　　搜索關鍵字頁面：

　　呵呵，這里我們可以看到那些人對什么技術感興趣。

　　使用“百度統計”后，感覺它的頁面做的很不錯，如是有了“摳出”它頁面代碼的想法。

　　火影里有個拷貝忍者旗木卡卡西，這里我要做回頁面拷貝程序員了。

　　很多童鞋都有種錯誤的感覺，覺得做頁面很簡單，因此他們也常常認為獲取頁面源代碼是件很容易的事情,只要點擊查看源代碼的菜單就行，但是查看源代碼所獲取的代碼是不是我們程序員真的想要，真的能拿來用的代碼，這個不盡然，不信這點的朋友可以自己嘗試下。下面是我的“摳出”百度統計的前端源碼：

　　首先還是目錄結構：

　　main.css代碼：

View Code

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

　　main.js代碼：

View Code

$(document).ready(function(){
    //官方博客 下拉菜單 hover 事件
    $("#MoreNav").hover(
        function(){
            $(this).addClass("more-hover");
        },
        function(){
            $(this).removeClass("more-hover");    
        }
    );
    //移動統計 下拉菜單 hover 事件
    $("#MoreNav2").hover(
        function(){
            $(this).addClass("more-hover");
        },
        function(){
            $(this).removeClass("more-hover");    
        }
    );
    // 頭部下拉點擊事件 
    $("#xj_arrowclose_01").toggle(
        function(){
            $(this).addClass("selected");
            $("#SiteList").removeClass("xj_haveorno_display");
        },
        function(){
            $(this).removeClass("selected");
            $("#SiteList").addClass("xj_haveorno_display");
        }
    );
    $("#xj_sitrlist_li").hover(
        function(){
            $(this).addClass("hover");
        },function(){
            $(this).removeClass("hover");
        }
    );
    $("#xj_addcybaogao").toggle(
        function(){
            $("#RecommendReportsBox").removeClass("xj_haveorno_display");
        },
        function(){
            $("#RecommendReportsBox").addClass("xj_haveorno_display");    
        }    
    );
    // 左側主菜單折疊事件
    $(".recordable").toggle(
        function(){
            $(this).removeClass("open");
            $(this).addClass("close");
            $("#" + $(this).attr("id") + " ~ ul").attr("style","display:none");    
        },
        function(){
            $(this).addClass("open");
            $(this).removeClass("close");    
            $("#" + $(this).attr("id") + " ~ ul").attr("style","");            
        }
    );
    // 左側子菜單點擊事件
    $("a[id^='xj_leftcdchild']").bind("click",function(evt){
        $("a[id^='xj_leftcdchild']").parent().removeClass("selected");
        $("#" + evt.target.id).parent().addClass("selected");
    });
});

　　baidudemo01.html代碼：

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Baidu Tongji Demo</title>
</head>
<link type="text/css" href="css/main.css" rel="stylesheet"></link>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<style type="text/css">
.xj_haveorno_display{
    display:none;    
}
</style>
<body>
    <!-- 百度統計頁面的頭部 -->
    <div id="Top" class="header-wrapper">
        <div class="header">
            <!-- 百度統計頁面的logo -->
            <div class="logo">
               <a href="#">
                <img alt="百度統計" src="images/logo.png"/>
               </a>
            </div>   
            <div class="top-nav">
                <span class="version">
                    <a memo="{id:'top_30guide'}" class="new-version-guide trackable" href="javascript:void(0);">
                        3.0版介紹
                    </a>
                    <span class="sep">
                        |
                    </span>
                    <a memo="{id:'top_old'}" class="trackable" href="javascript:void(0);">
                        回到2.0版
                    </a>
                </span>  
            <span class="account">
                sharpxiajun
            </span>
            <!-- 官方博客 下拉菜單 -->
            <div class="more-nav" id="MoreNav">
                <a memo="{id:'top_blog'}" class="more-arrow trackable" target="_blank"
                href="javascript:void(0);">
                    官方博客
                </a>
                <ul class="more">
                    <li>
                        <a memo="{id:'top_blog'}" class="more-arrow trackable" target="_blank"
                        href="javascript:void(0);">
                            官方博客
                        </a>
                    </li>
                    <li>
                        <a memo="{id:'top_diz'}" class="trackable" target="_blank" href="javascript:void(0);">
                            討論區
                        </a>
                    </li>
                    <li>
                        <a memo="{id:'top_cont'}" class="trackable" target="_blank" href="javascript:void(0);">
                            聯系我們
                        </a>
                    </li>
                </ul>
            </div>
            |
            <!-- 移動統計 下拉菜單 -->
            <div class="more-nav" id="MoreNav2">
                <a memo="{id:'top_mobapp'}" class="more-arrow trackable" target="_blank"
                href="javascript:void(0);">
                    移動統計
                </a>
                <ul class="more">
                    <li>
                        <a memo="{id:'top_mobapp'}" class="more-arrow trackable" target="_blank"
                        href="javascript:void(0);">
                            移動統計
                        </a>
                    </li>
                    <li>
                        <a memo="{id:'top_union'}" class="trackable" target="_blank" href="javascript:void(0);">
                            百度聯盟
                        </a>
                    </li>
                </ul>
            </div>
            |
            <a memo="{id:'top_help'}" class="trackable" target="_blank" href="javascript:void(0);">
                幫助
            </a>
            |
            <a href="javascript:void(0);">
                退出
            </a>          
            </div>    
            <div id="SiteListContainer" class="selector site-selector">
                <div layer=".site-selector .options" class="arrow close" id="xj_arrowclose_01">
                </div>
                <div title="www.cnblogs.com/sharpxiajun" layer=".site-selector .options" class="text">
                    www.cnblogs.com/sharpxiajun
                </div>
                <a class="set-default is-not-default" data="1811106" id="SetCurrentDefaultSite" title="設為默認網站" href="javascript:void(0)">
                </a>
                <ul id="SiteList"  class="options layer xj_haveorno_display">
                    <li id="xj_sitrlist_li">
                        <a title="www.cnblogs.com/sharpxiajun" href="javascript:void(0);">
                            www.cnblogs.com/sharpxiajun
                        </a>
                        <a title="設為默認網站" class="set-default is-not-default" data="1811106" href="javascript:void(0)">
                        </a>
                    </li>
                </ul>
            </div> 
            <div class="view-tab">
                <a memo="{id:'top_rep_tab'}" class="report-selected trackable" href="javascript:void(0);">
                    <span class="icon">
                    </span>
                    報告
                </a>
                <a memo="{id:'top_rep_set'}" class="setting trackable" href="javascript:void(0);">
                    <span class="icon">
                    </span>
                    設置
                </a>
            </div>  
            <div class="top-report-nav">
                <div id="RecommendReports" class="recommend-reports l">
                    <a memo="{id:'top_rep_0'}" class="trackable" href="javascript:void(0);">
                        搜索詞
                    </a>
                    |
                    <a memo="{id:'top_rep_1'}" class="trackable" href="javascript:void(0);">
                        頁面點擊圖
                    </a>
                    |
                    <a memo="{id:'top_rep_2'}" class="trackable" href="javascript:void(0);">
                        SEO建議
                    </a>
                    |
                    <a memo="{id:'top_rep_3'}" class="trackable" href="javascript:void(0);">
                        百度索引量查詢
                    </a>
                </div>
                <!-- 圖標用戶可看到推薦報告，不能設置 -->
                <a memo="{id:'top_rep_set'}" id="xj_addcybaogao" layer=".recommend-reports-box" class="setting trackable"
                title="添加常用報告" >
                </a>
                <span class="recommend-reports-blank" style=" display:none;" id="RecommendReportBlank">
                </span>
                <div id="RecommendReportsBox"  class="recommend-reports-box layer bg-iframe xj_haveorno_display">
                    <p class="title">
                        選擇常用報告(最多
                        <span class="red">
                            4
                        </span>
                        項)
                    </p>
                    <div id="RecommendReportsContent" class="recommend-reports-content">
                        <ul class="nav">
                            <li>
                                <label for="RecommendReport1">
                                    <input type="checkbox" value="1" title="網站概況" name="recommend-report"
                                    id="RecommendReport1">
                                    網站概況
                                </label>
                            </li>
                            <li>
                                <a class="open" href="javascript:void(0);">
                                    趨勢分析
                                </a>
                                <ul>
                                    <li>
                                        <label for="RecommendReport3">
                                            <input type="checkbox" value="3" title="最新訪客" name="recommend-report"
                                            id="RecommendReport3">
                                            最新訪客
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport4">
                                            <input type="checkbox" value="4" title="今日統計" name="recommend-report"
                                            id="RecommendReport4">
                                            今日統計
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport5">
                                            <input type="checkbox" value="5" title="昨日統計" name="recommend-report"
                                            id="RecommendReport5">
                                            昨日統計
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport6">
                                            <input type="checkbox" value="6" title="最近30天" name="recommend-report"
                                            id="RecommendReport6">
                                            最近30天
                                        </label>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a class="open" href="javascript:void(0);">
                                    來源分析
                                </a>
                                <ul>
                                    <li>
                                        <label for="RecommendReport8">
                                            <input type="checkbox" value="8" title="全部來源" name="recommend-report"
                                            id="RecommendReport8">
                                            全部來源
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport9">
                                            <input type="checkbox" value="9" title="搜索引擎" name="recommend-report"
                                            id="RecommendReport9">
                                            搜索引擎
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport10">
                                            <input type="checkbox" value="10" title="搜索詞" checked="true" name="recommend-report"
                                            id="RecommendReport10">
                                            搜索詞
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport11">
                                            <input type="checkbox" value="11" title="外部鏈接" name="recommend-report"
                                            id="RecommendReport11">
                                            外部鏈接
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport58">
                                            <input type="checkbox" value="58" title="百度移動搜索" name="recommend-report"
                                            id="RecommendReport58">
                                            百度移動搜索
                                        </label>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a class="open" href="javascript:void(0);">
                                    網頁分析
                                </a>
                                <ul>
                                    <li>
                                        <label for="RecommendReport13">
                                            <input type="checkbox" value="13" title="受訪頁面" name="recommend-report"
                                            id="RecommendReport13">
                                            受訪頁面
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport14">
                                            <input type="checkbox" value="14" title="訪問入口" name="recommend-report"
                                            id="RecommendReport14">
                                            訪問入口
                                        </label>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a class="open" href="javascript:void(0);">
                                    訪客分析
                                </a>
                                <ul>
                                    <li>
                                        <label for="RecommendReport16">
                                            <input type="checkbox" value="16" title="地域分布" name="recommend-report"
                                            id="RecommendReport16">
                                            地域分布
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport17">
                                            <input type="checkbox" value="17" title="系統環境" name="recommend-report"
                                            id="RecommendReport17">
                                            系統環境
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport18">
                                            <input type="checkbox" value="18" title="新老訪客" name="recommend-report"
                                            id="RecommendReport18">
                                            新老訪客
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport19">
                                            <input type="checkbox" value="19" title="訪客屬性" name="recommend-report"
                                            id="RecommendReport19">
                                            訪客屬性
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport20">
                                            <input type="checkbox" value="20" title="忠誠度" name="recommend-report"
                                            id="RecommendReport20">
                                            忠誠度
                                        </label>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a class="open" href="javascript:void(0);">
                                    定制分析
                                </a>
                                <ul>
                                    <li>
                                        <label for="RecommendReport22">
                                            <input type="checkbox" value="22" title="頁面點擊圖" checked="true" name="recommend-report"
                                            id="RecommendReport22">
                                            頁面點擊圖
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport23">
                                            <input type="checkbox" value="23" title="子目錄" name="recommend-report"
                                            id="RecommendReport23">
                                            子目錄
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport24">
                                            <input type="checkbox" value="24" title="轉化路徑" name="recommend-report"
                                            id="RecommendReport24">
                                            轉化路徑
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport25">
                                            <input type="checkbox" value="25" title="頁面上下游" name="recommend-report"
                                            id="RecommendReport25">
                                            頁面上下游
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport26">
                                            <input type="checkbox" value="26" title="指定廣告跟蹤" name="recommend-report"
                                            id="RecommendReport26">
                                            指定廣告跟蹤
                                        </label>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a class="open" href="javascript:void(0);">
                                    優化分析
                                </a>
                                <ul>
                                    <li>
                                        <label for="RecommendReport28">
                                            <input type="checkbox" value="28" title="SEO建議" checked="true" name="recommend-report"
                                            id="RecommendReport28">
                                            SEO建議
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport29">
                                            <input type="checkbox" value="29" title="搜索詞排名" name="recommend-report"
                                            id="RecommendReport29">
                                            搜索詞排名
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport30">
                                            <input type="checkbox" value="30" title="百度索引量查詢" checked="true" name="recommend-report"
                                            id="RecommendReport30">
                                            百度索引量查詢
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport31">
                                            <input type="checkbox" value="31" title="網站速度診斷" name="recommend-report"
                                            id="RecommendReport31">
                                            網站速度診斷
                                        </label>
                                    </li>
                                    <li>
                                        <label for="RecommendReport32">
                                            <input type="checkbox" value="32" title="升降榜" name="recommend-report"
                                            id="RecommendReport32">
                                            升降榜
                                        </label>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="recommend-reports-operations">
                        <p>
                            <a href="javascript:void(0)" id="RecommendReportsDefault" class="selected">
                                系統默認推薦
                            </a>
                        </p>
                        <div class="r">
                            <a class="button confirm" href="javascript:void(0);">
                                <span>
                                    確定
                                </span>
                            </a>
                            <a href="javascript:void(0);" class="cancel">
                                取消
                            </a>
                        </div>
                    </div>
                </div>
            </div>         
        </div>
    </div>
    <!-- 頁面主體 -->
    <div class="body clearfix">
        <!-- 左側菜單 -->
        <div class="aside">
            <ul class="nav">
                <li class="selected">
                    <a id="xj_leftcdchild_01" memo="{id:'1',type:'menu',global:1,status:''}" href="javascript:void(0);">
                        網站概況
                    </a>
                </li>
                <li class="">
                    <a id="xj_leftcaidan_01" memo="{id:'2',type:'menu',global:1,status:'1'}" href="javascript:void(0);"
                    class="recordable open">
                        趨勢分析
                    </a>
                    <ul  style="">
                        <li class="">
                            <a id="xj_leftcdchild_02" href="javascript:void(0);">
                                最新訪客
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_03" href="javascript:void(0);">
                                今日統計
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_04" href="javascript:void(0);">
                                昨日統計
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_05" href="javascript:void(0);">
                                最近30天
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                    </ul>
                </li>
                <li class="">
                    <a id="xj_leftcaidan_02" memo="{id:'7',type:'menu',global:1,status:''}" href="javascript:void(0);"
                    class="recordable open">
                        來源分析
                    </a>
                    <ul>
                        <li class="">
                            <a id="xj_leftcdchild_06" href="javascript:void(0);">
                                全部來源
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_07" href="javascript:void(0);">
                                搜索引擎
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_08" href="javascript:void(0);">
                                搜索詞
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_09" href="javascript:void(0);">
                                外部鏈接
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_10" href="javascript:void(0);">
                                百度移動搜索
                            </a>
                            <span class="new">
                                &nbsp;
                            </span>
                        </li>
                    </ul>
                </li>
                <li class="">
                    <a id="xj_leftcaidan_03" memo="{id:'12',type:'menu',global:1,status:''}" href="javascript:void(0);"
                    class="recordable open">
                        網頁分析
                    </a>
                    <ul>
                        <li class="">
                            <a id="xj_leftcdchild_11" href="javascript:void(0);">
                                受訪頁面
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_12" href="javascript:void(0);">
                                訪問入口
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                    </ul>
                </li>
                <li class="">
                    <a id="xj_leftcaidan_04" memo="{id:'15',type:'menu',global:1,status:''}" href="javascript:void(0);"
                    class="recordable open">
                        訪客分析
                    </a>
                    <ul>
                        <li class="">
                            <a id="xj_leftcdchild_13" href="javascript:void(0);">
                                地域分布
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_14" href="javascript:void(0);">
                                系統環境
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_15" href="javascript:void(0);">
                                新老訪客
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_16" href="javascript:void(0);">
                                訪客屬性
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_17" href="javascript:void(0);">
                                忠誠度
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                    </ul>
                </li>
                <li class="">
                    <a id="xj_leftcaidan_05" memo="{id:'21',type:'menu',global:1,status:''}" href="javascript:void(0);"
                    class="recordable open">
                        定制分析
                    </a>
                    <ul>
                        <li class="">
                            <a id="xj_leftcdchild_18" href="javascript:void(0);">
                                頁面點擊圖
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_19" href="javascript:void(0);">
                                子目錄
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_20" href="javascript:void(0);">
                                轉化路徑
                            </a>
                            <span class="new">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_21" href="javascript:void(0);">
                                頁面上下游
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_22" href="javascript:void(0);">
                                指定廣告跟蹤
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                    </ul>
                </li>
                <li class="">
                    <a id="xj_leftcaidan_06" memo="{id:'27',type:'menu',global:1,status:''}" href="javascript:void(0);"
                    class="recordable open">
                        優化分析
                    </a>
                    <ul>
                        <li class="">
                            <a id="xj_leftcdchild_23" href="javascript:void(0);">
                                SEO建議
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_24" href="javascript:void(0);">
                                搜索詞排名
                            </a>
                            <span class="new">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_25" href="javascript:void(0);">
                                百度索引量查詢
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_26" href="javascript:void(0);">
                                網站速度診斷
                            </a>
                            <span class="new">
                                &nbsp;
                            </span>
                        </li>
                        <li class="">
                            <a id="xj_leftcdchild_27" href="javascript:void(0);">
                                升降榜
                            </a>
                            <span class="normal">
                                &nbsp;
                            </span>
                        </li>
                    </ul>
                </li>
            </ul>
            <div class="helper-center">
                <div class="title">
                    <a memo="{id:'nav_help_link'}" class="trackable" target="_blank" href="javascript:void(0);">
                        幫助中心
                    </a>
                </div>
                <form class="text-wrapper" action="javascript:void(0);"
                target="_blank" method="post">
                    <input type="text" id="Help" value="輸入您的問題" name="keyword" autocomplete="off"
                    class="text gray">
                    <a href="javascript:void(0)" class="button">
                        <input type="submit" value="查詢" memo="{id:'nav_help_sea'}" class="trackable">
                    </a>
                </form>
            </div>        
        </div>
        <div class="misc">
            <div class="feedback" id="Feedback">
                <a href="javascript:void(0);" target="_blank"
                class="trackable" memo="{id:'feedba'}">
                </a>
            </div>
            <div class="back-to-top" id="BackToTop" style="display:none">
                <a href="#Top" class="trackable" memo="{id:'back2top'}">
                </a>
            </div>        
        </div>
        <div class="main">
            <div class="content clearfix">
                <div class="title-bar clearfix">
                    <div class="tool-bar r" id="ToolBar">
                        <a memo="{id:'masend'}" class="send-report trackable" id="SendReport"
                        href="javascript:void(0);">
                            發送
                        </a>
                        <a memo="{id:'doload'}" class="download-report trackable" id="DownloadReport"
                        href="javascript:void(0);">
                            下載
                        </a>
                    </div>
                    <h1 class="l">
                        搜索詞
                    </h1>
                    <div class="date l" id="Date">
                        (2012/08/05~2012/08/06)
                    </div>
                    <a href="javascript:void(0);" class="report-help close l" id="ReportTipIco"
                    title="點擊可查看報告詳細幫助">
                        &nbsp;
                    </a>
                </div> 
                <div style="display:none;" id="ReportTip" class="report-tip">
                    <div class="tip-arrow" style="left: 214px;">
                    </div>
                    <div class="report-tip-content">
                        <table class="report-tip-table">
                            <tbody>
                                <tr>
                                    <td width="70%" valign="top">
                                        <div class="left-content l">
                                            <p class="text">
                                                本報告助您分析：
                                            </p>
                                            <p class="label">
                                                網民在各類搜索引擎上通過哪些搜索詞找到并訪問了您網站。助您及時了解網民的關注點，以及哪些搜索詞給您網站帶來了更多有效訪客，從而優化搜索推廣提詞方案。
                                            </p>
                                        </div>
                                    </td>
                                    <td width="30%" valign="middle">
                                        <div class="l right-content">
                                            <div class="quesstions">
                                                <p class="text">
                                                    常見問題：
                                                </p>
                                                <p class="label">
                                                    <a target="_blank" href="javascript:void(0);">
                                                        搜索詞（分搜索引擎）報告能告訴我哪些信息？
                                                    </a>
                                                </p>
                                            </div>
                                            <div class="search">
                                                <form class="text-wrapper" action="http://yingxiao.baidu.com/support/tongji/?module=default&amp;controller=index&amp;action=search"
                                                target="_blank" method="post">
                                                    <input type="text" id="ReportHelp" value="更多問題請在這里查詢..." name="keyword"
                                                    autocomplete="off" class="text gray">
                                                    <a href="javascript:void(0)" class="button">
                                                        <input type="submit" value="查詢">
                                                    </a>
                                                </form>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div> 
                <div id="ControlBarWrapper" class="control-bar-wrapper">
                    <div id="ControlBar" class="control-bar bg-iframe">
                        <div id="DateSelectBar" class="l date-select-bar">
                            <a memo="{id:'time_tody'}" class="trackable" href="#00">
                                今天
                            </a>
                            <span class="seprator">
                                |
                            </span>
                            <a memo="{id:'time_yest'}" class="trackable  cur" href="#-1">
                                昨天
                            </a>
                            <span class="seprator">
                                |
                            </span>
                            <a memo="{id:'time_week'}" class="trackable" href="#-6">
                                最近7天
                            </a>
                            <span class="seprator">
                                |
                            </span>
                            <a memo="{id:'time_month'}" class="trackable" href="#-29">
                                最近30天
                            </a>
                            <span class="seprator">
                                |
                            </span>
                        </div>
                        <div class="l time-select-bar">
                            <input value="自定義時間段" id="DateSelect" memo="{id:'time_selt'}" class="text trackable"
                            readonly="readonly" onfocus="javascript:this.blur();">
                            <input type="checkbox" class="compare-date" id="CompareDate">
                            <input value="與其他時間段對比" id="CompareDateSelect" memo="{id:'time_consel'}"
                            class="text trackable" readonly="readonly" onfocus="javascript:this.blur();">
                        </div>
                        <div class="r scroll-bar">
                            <span memo="{id:'Scroll',type:'scroll',global:1}" class="scroll  open  recordable"
                            title="設置隨屏滾動" id="Scroll">
                                &nbsp;
                            </span>
                        </div>
                    </div>
                </div>  
                <div class="section" id="SourceTabs">
                    <div class="tabs">
                        <ul class="clearfix">
                            <li class="selected">
                                <a href="javascript:void(0);">
                                    按搜索引擎
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">
                                    按指標分類
                                </a>
                            </li>
                            <li class="download-words-container">
                                <a class="subscribe-words" id="SubscribeWords" href="javascript:void(0)">
                                    預訂全部搜索詞
                                </a>
                                <a class="download-words" layer="#FileList" href="javascript:void(0)"
                                id="DownloadWords" style="display:none;">
                                    下載全部搜索詞數據包（至
                                    <span id="EndSubscribe">
                                    </span>
                                    ）
                                </a>
                            </li>
                        </ul>
                    </div>
                </div> 
                <div class="section" id="Summary">
                    <table class="summary">
                        <tbody>
                            <tr>
                                <td>
                                    <span class="text">
                                        總搜索次數
                                        <a class="help" data="total_search_count" href="javascript:void(0)">
                                            &nbsp;
                                        </a>
                                    </span>
                                    <br>
                                    <span class="value">
                                        86
                                    </span>
                                </td>
                                <td>
                                    <span class="text">
                                        百度
                                        <a class="help" data="search_engine_baidu" href="javascript:void(0)">
                                            &nbsp;
                                        </a>
                                    </span>
                                    <br>
                                    <span class="value">
                                        76.74%
                                    </span>
                                </td>
                                <td>
                                    <span class="text">
                                        Google
                                        <a class="help" data="search_engine_g" href="javascript:void(0)">
                                            &nbsp;
                                        </a>
                                    </span>
                                    <br>
                                    <span class="value">
                                        20.93%
                                    </span>
                                </td>
                                <td>
                                    <span class="text">
                                        tb搜狗
                                        <a class="help" data="search_engine_sogou" href="javascript:void(0)">
                                            &nbsp;
                                        </a>
                                    </span>
                                    <br>
                                    <span class="value">
                                        2.33%
                                    </span>
                                </td>
                                <td>
                                    <span class="text">
                                        其他
                                        <a class="help" data="search_engine_other" href="javascript:void(0)">
                                            &nbsp;
                                        </a>
                                    </span>
                                    <br>
                                    <span class="value">
                                        0%
                                    </span>
                                </td>
                                <td class="last">
                                    <span class="text">
                                        占比
                                        <a class="help" data="search_ratio" href="javascript:void(0)">
                                            &nbsp;
                                        </a>
                                    </span>
                                    <br>
                                    <span class="value">
                                        100%
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>       
            </div>
        </div>
    </div>
</body>
</html>

　　效果圖：

　　下載鏈接：

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

　　百度的頁面做的不錯，希望有天我能在自己的項目中使用到這些代碼。

posted on 2012-08-06 13:47 chen11-1 閱讀(885) 評論(0) 編輯收藏

tbwshc

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

My Links

Blog Stats

常用鏈接

留言簿(4)

隨筆分類

隨筆檔案

文章分類

文章檔案

新聞檔案

tbw淘寶商城-首頁

搜索

最新評論

閱讀排行榜

評論排行榜