React-Grid-Layout 是一个网格布局系统，具有响应性并支持断点（breakpoints）。断点布局可以由用户提供或自动生成。

RGL 仅支持 React，不支持 jQuery。

    使用npm安装 React-Grid-Layout：

    样式表：

    下面的示例将生成一个包含三个项目的网格，其中：

    1.    用户将无法拖动或调整项目大小 a

    2.    b 将被限制为最小宽度为 2 个网格块和最大宽度为 4 个网格块

    3.    用户将能够自由拖动和调整项目大小 c

可以选择直接在子项上设置布局属性：

    <ResponsiveReactGridLayout>和<ReactGridLayout>采取width来计算拖动事件位置。在简单的情况下，WidthProvider可以使用HOC在初始化和窗口调整大小事件时自动确定宽度。

    // 除使用 <WidthProvider>情况外必填

     width: number,

    // 如果为 true，容器高度自适应内容

     autoSize: ?boolean = true ,

    //布局中的列数。

     cols: ?number = 12 ,

    // 取消拖拽时的css选择器

     draggableCancel: ?string = '' ,

    // 拖拽时的css选择器

     draggableHandle: ?string = '' ,

    // 紧凑排列类型

     compactType: ?( 'vertical' | 'horizontal' ) = 'vertical'

    // 布局，格式为数组对象，例如：

    // {x: number, y: number, w: number, h: number}

    // 布局中的索引必须与每个项目组件上使用的键匹配。

    // 如果您选择使用自定义键，则可以在布局中指定该键

    // 数组对象，如下所示：

    // {i: string, x: number, y: number, w: number, h: number}

    //如果父组件没有设置layout，则需要在子组件设置 data-grid

     layout: ?array = null ,

    //  [x, y] 的margin值

     margin: ?[number, number] = [ 10 , 10 ],

    //  [x, y] 的padding值

     containerPadding: ?[number, number] = margin,

    // 行高，可根据 breakpoints 改变

     rowHeight: ?number = 150 ,

    // 放置元素的配置。放置元素是一个从外部拖动某个元素时会出现的虚拟元素。

    //  i - 元素的id

    //  w - 元素的宽

    //  h - 元素的高

     droppingItem?: { i : string, w : number, h : number }

    // 是否可拖拽

     isDraggable: ?boolean = true ,

    //是否可重置大小

     isResizable: ?boolean = true ,

    //是否可设置边界

     isBounded: ?boolean = false ,

    // 使用 CSS3 translate() 替换position 的top/left ，可提升大约6倍性能

     useCSSTransforms: ?boolean = true ,

    //如果 ResponsiveReactGridLayout 或 ReactGridLayout 的父节点具有 "transform: scale(n)" 属性，应该设置缩放系数以避免拖动时出现渲染伪影。

     transformScale: ?number = 1 ,

    //是否允许重叠

     allowOverlap: ?boolean = false ,

    //如果为 true，则网格项在被拖动时不会改变位置

     preventCollision: ?boolean = false ,

    // 如果为true, 带有`draggable={true}`属性的放置元素可被放置在网格上

    //注意：如果使用 Firefox，应该添加

    // `onDragStart={e =>e.dataTransfer.setData('text/plain', ' ')}` 属性

    // 连同 `draggable={true}` 否则此功能将无法正常工作。

    // Firefox 需要 onDragStart 属性来进行拖动初始化

    // https://bugzilla.mozilla.org/show_bug.cgi?id=568313

     isDroppable: ?boolean = false ,

    // 重置大小时的操作位置，默认右下

    // 可选值：

    // 's' - South handle (bottom-center)

    // 'w' - West handle (left-center)

    // 'e' - East handle (right-center)

    // 'n' - North handle (top-center)

    // 'sw' - Southwest handle (bottom-left)

    // 'nw' - Northwest handle (top-left)

    // 'se' - Southeast handle (bottom-right)

    // 'ne' - Northeast handle (top-right)

     resizeHandles: ? Array < 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne' >= [ 'se' ],

    // 自定义重置大小图标

      resizeHandle?: ReactElement < any >| ((resizeHandleAxis: ResizeHandleAxis , ref: ReactRef < HTMLElement > ) =>ReactElement < any > ),

    // 布局变化回调

     onLayoutChange: (layout: Layout ) =>void ,

    // 下面的所有回调都有签名（layout、oldItem、newItem、placeholder、e、element）。

    // 'start' 和 'stop' 回调为 'placeholder' 传递 `undefined`。

      type ItemCallback = (layout: Layout , oldItem: LayoutItem , newItem: LayoutItem , placeholder: LayoutItem , e: MouseEvent , element: HTMLElement ) =>void ,

    // 拖拽开始回调

     onDragStart: ItemCallback ,

    // 拖拽中回调

     onDrag: ItemCallback ,

    // 拖拽停止回调

     onDragStop: ItemCallback ,

    // 开始重置大小回调

     onResizeStart: ItemCallback ,

    // 重置大小中的回调

     onResize: ItemCallback ,

    // 重置大小结束回调

     onResizeStop: ItemCallback ,

    // 当元素从外部放入网格时的回调。

     onDrop : (layout: Layout , item: ? LayoutItem , e: Event ) =>void ,

    // 当一个元素从外面拖过网格时调用， 此回调应返回一个对象以动态更改 dropItem大小

     onDropDragOver : (e: DragOverEvent ) => ?({ | w?: number, h?: number | } | false ),

    // 可以使用它来代替常规 ref 和已弃用的 `ReactDOM.findDOMNode()` 函数

     innerRef: ? React . Ref< "div" > ,

    // Breakpoint名称是任意的，但是必须在cols 和 layouts 对象中匹配。

     breakpoints: ? Object = { lg : 1200 , md : 996 , sm : 768 , xs : 480 , xxs : 0 },

    // 列数

     cols: ? Object = { lg : 12 , md : 10 , sm : 6 , xs : 4 , xxs : 2 },

    //[x,y]的margin

     margin: [number, number] | {[breakpoint: $Keys < breakpoints > ]: [number, number]},

    // [x,y]的padding

     containerPadding: [number, number] | {[breakpoint: $Keys < breakpoints > ]: [number, number]},

    // 布局配置

     layouts: {[key: $Keys < breakpoints > ]: Layout },

    // breakpoint发生变更时的回调

     onBreakpointChange: (newBreakpoint: string, newCols: number) =>void ,

    // 布局发生变更时的回调

     onLayoutChange: (currentLayout: Layout , allLayouts: {[key: $Keys < breakpoints > ]: Layout }) =>void ,

    // 宽度改变时的回调，可以根据需要修改布局。

     onWidthChange: (containerWidth: number, margin: [number, number], cols: number, containerPadding: [number, number]) =>void

    { 

        // 组件id

         i : string, 

        // 以下单位为网格，不是px

         x : number, 

         y : number, 

         w : number, 

         h : number, 

         minW : ?number = 0 , 

         maxW : ?number = Infinity , 

         minH : ?number = 0 , 

         maxH : ?number = Infinity ,  

        // 如果为 true，则等于 `isDraggable: false, isResizable: false`。

         static : ?boolean = false , 

        // 如果为 false，则不可拖动。覆盖 `static`. 

         isDraggable : ?boolean = true , 

        // 如果为 false，则不可重置大小。覆盖 `static`. 

         isResizable : ?boolean = true ,  

        // 默认情况下，调整大小图标仅显示在右下（东南）角。 

        // 请注意，从顶部或左侧调整大小通常不直观。

         resizeHandles ?: ? Array < 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne' >= [ 'se' ] 

        //如果为 true 且可拖动，则项目将仅在网格内移动。

         isBounded: ?boolean = false

    }

ul,li{margin:0padding:0}.bnsrh{padding-top:2pxheight:24px}body{margin:4px 8pxtext-align:center}form{margin:0}td,div{line-height:18pxfont-size:12pxfont-family:Arialtext-align:left}a:link{color:#261CDC}a:visited{color:#800080}.hd{width:100%border:0 none}#usrbar a:visited,.hd a:visited{color:#261CDC}.lg{margin-right:9pxborder:0}.ch{line-height:19pxfont-size:14px}.sh{margin-top:2px}#tab{margin-top:3pxheight:21pxfont-size:14px}.hdi{font-size:16pxfont-family:Arial}#usrbar{font-size:12pxheight:19pxline-height:19pxtext-align:right}#ft{clear:bothmargin-top:10pxline-height:20pxtext-align:center}#ft,#ft *{color:#77Cfont-size:12pxfont-family:Arialwhite-space:nowrap}#main{margin-top:10px}#wapper{padding-top:10pxmin-width:760pxmax-width:984pxmargin-left:automargin-right:auto}#left{float:leftwidth:200px}#right{float:leftwidth:190pxmargin-left:-190px}#content{float:leftwidth:100%}#center_inner{margin:0 190px 0 200pxpadding:0 12px 0 12px!importantpadding:0 9px 0 9px}.bai{width:100%position:relative}.qlist{line-height:20pxfont-size:14pxpadding-left:10px}.qlist ul{list-style:nonewidth:100%}.qlist li{font-size:14px}.lil{float:leftcolor:#7F7F7F}.lir{width:98%}.b3{padding:5px 5px 5px 8pxborder-width:0 1px 1pxborder-style:solid}.bgg{background-color:#DDF1D8}.bgb{background-color:#DEEEF4}.bgy{background-color:#FBF5C6}.bcg{border-color:#58CB64}.bcy{border-color:#F4BF20}.bcb{border-color:#64B7D7}.b4y{padding:5px 5px 5px 8pxborder:1px solid #F4BF20}.b4g{padding:5px 10px 8px 10pxborder:1px solid #58CB64}.b4b{padding:5px 10px 8px 10pxborder:1px solid #64B7D7}.f14{font-size:14pxline-height:22px}.f14B{font-size:14pxline-height:22px}.B{FONT-WEIGHT:bold}.mb10{margin-bottom:10px}.mb12{margin-bottom:12px}.grn,a.grn:link,a.grn:visited{color:#080}a.lbk:link,a.lbk:visited{color:#000padding-top:2pxmargin:2px}a.lgy:link,a.lgy:visited{color:#555}a.lmore:link,a.lmore:visited{font-weight:bold}.lh5{line-height:5px}.lh25{line-height:25pxheight:25px}#lbd td{padding:3px 0padding-left:8pxborder-bottom:1px dashed #E1E1E1}#lbd .m{padding:3px 0padding-left:8pxborder:0}.wr{table-layout:fixedword-wrap:break-word}.bc0{background:#FFFmargin:-2px 3pxpadding:5px 5px 8px 5pxzoom:1}.bc{background:#FFFmargin:0 3px 3px 3pxpadding:5px 5px 8px 10px}.bc1{background:#FFFborder-right:1px solid #CCCborder-bottom:1px solid #CCCborder-left:1px solid #CCC}.bc2{position:relativeborder:1px solid #CCCbackground:#FFFwidth:180px}.bc3{padding:5px 5px 5px 8pxmargin:4px 3px 4px 3pxbackground:#FFF}.t1,.t2,.t4{padding-left:10pxheight:24pxline-height:24pxfont-size:14pxfont-weight:bold}.t2{background:#daf1d4border-top:1px solid #c8e9be}.t3{position:relativepadding-left:10pxheight:26pxline-height:26pxfont-size:14pxbackground-color:#f3f3f3}.t4{padding-left:0}.bg,.by,.bba,.bk,.b2{position:relativemargin-bottom:12px}.bg{border:1px solid #A5DA94background:#DBF1D4zoom:1}.by{border:1px solid #E3D686background:#F2EAB7}.bb{background:#DBEDF5border:1px solid #9BC9DFborder-bottom:0}.bba{border:1px solid #A8BEE7background:#D8DFECzoom:1}.bk{margin-bottom:0border:1px solid #BDBDBDbackground:#D7D7D7}.b2{padding:4pxbackground:#F2EAB7}#objdir .info{padding:3px 0 6px 6pxcolor:#080border-bottom:1px solid #D1EAF6}#objdir .ct,#objdir .cton{padding:6px 0 6px 6pxborder-bottom:1px dashed #EEE}#objdir .ct a{color:#666}#objdir .ct a.t{color:#00Cfont-size:14pxtext-decoration:noneline-height:22px}#objdir .cton a{color:#000}#objdir .cton a.t{color:#00Cfont-size:14pxline-height:22px}.gry{color:#666}.chmenu{margin:2px 0}.chmenu td{padding:4px 0 4px 8px}.chmenu td.line{border-top:1px dashed #EEE}.pad{padding:4px 2px 4px 10px}.sml{font-size:12pxline-height:18pxword-break:break-allwhite-space:normal}.t0{border-bottom-width:1pxborder-bottom-style:solidborder-bottom-color:#bbb}.tshow{border:1px solid #cccborder-bottom:nonecursor:pointerpadding-top:3pxtext-align:centerbackground-color:#FFF}.thide{border:1px solid #cccbackground-color:#F7F7F7cursor:pointerpadding-top:3pxtext-align:center}.thide2{border:1px solid #999background-color:#F7F7F7cursor:pointerpadding-top:3pxtext-align:center}.ico{margin-top:4pxwidth:20pxfloat:left}.h12{height:12pxline-height:12px}.b21{position:relativemargin-bottom:12px}.bba1{position:relativemargin-bottom:12px}.bk1{position:relativemargin-bottom:12px}.by1{position:relativemargin-bottom:12px}.rct1{position:relativebackground-repeat:no-repeat}.rct1{background-position:left top}.rct1{position:absolutewidth:100%top:-1px!importanttop:0left:-1pxline-height:3px}.t21{padding-left:10pxheight:24pxline-height:24pxfont-size:14pxfont-weight:bold}.t41{padding-left:10pxheight:24pxline-height:24pxfont-size:14pxfont-weight:bold}.lad{text-align:centermargin-top:12px}#objdir a{color:#000}#objdir .f14B a{color:#00C}.score-list td{padding:3px 0padding-left:8pxborder-bottom:1px dashed #E1E1E1font-size:12pxline-height:18pxfont-family:Arial}.score-list td a{color:#00Cfont-size:12px}.more-score{padding:5px 0 0 20pxfont-weight:bold}#leftbotton_be_warpper table{margin:auto}#leftbotton_be_warpper{text-align:centerfloat:auto}.rg1,.rg2,.rg3,.rg4,.ry1,.ry2,.ry3,.ry4,.lj1,.rj1,.tjl,.tjr,.rba1,.rba2,.rba3,.rba4{background-image:url(http://img.baidu.com/img/iknow/3x7.gif)background-repeat:no-repeatoverflow:hiddenposition:absolutefont-size:1px}.ry1{background-position:0 -70pxwidth:3pxheight:3pxtop:-1pxleft:-1px}.ry2{background-position:-11px -70pxheight:3pxwidth:3pxtop:-1pxright:-1px}.ry3{background-position:0 -73pxbottom:-1pxleft:-1pxheight:7pxwidth:7px}.ry4{background-position:-7px -73pxheight:7pxwidth:7pxbottom:-1pxright:-1px}.rg1{background-position:0 -30pxwidth:3pxheight:3pxtop:-1pxleft:-1px}.rg2{background-position:-11px -30pxheight:3pxwidth:3pxtop:-1pxright:-1px}.rg3{background-position:0 -33pxbottom:-1pxleft:-1pxheight:7pxwidth:7px}.rg4{background-position:-7px -33pxheight:7pxwidth:7pxbottom:-1pxright:-1px}#left .lj{height:7pxbackground:url(http://img.baidu.com/img/iknow/ljbg1.gif) repeat-xoverflow:hiddenwidth:100%}#left .lj1{background-position:0 -3pxbottom:0!importantbottom:-1pxleft:0height:7pxwidth:7px}#left .rj1{background-position:-7px -3pxbottom:0!importantbottom:-1pxright:0height:7pxwidth:7px}#left .tjl{background-position:0 0top:0left:0height:3pxwidth:3px}#left .tjr{background-position:-11px 0top:0right:0height:3pxwidth:3px}.rba1{background-position:0 -20pxwidth:3pxheight:3pxtop:-1pxleft:-1px}.rba2{background-position:-11px -20pxheight:3pxwidth:3pxtop:-1pxright:-1px}.rba3{background-position:0 -23pxbottom:-1pxleft:-1pxheight:7pxwidth:7px}.rba4{background-position:-7px -23pxheight:7pxwidth:7pxbottom:-1pxright:-1px}.rya1,.rya2,.rya3,.rya4,.rcw1,.rcw2,.rcw3,.rcw4{background:url(http://img.baidu.com/img/iknow/3x3.gif) no-repeatoverflow:hiddenposition:absolutefont-size:1pxwidth:3pxheight:3px}.rcw1{background-position:0 0top:-1left:-1px}.rcw2{background-position:-3px 0top:-1pxright:-1px}.rcw3{background-position:0 -3pxbottom:-1pxleft:-1px}.rcw4{background-position:-3px -3pxbottom:-1pxright:-1px}.rya1{background-position:0 -6pxtop:0left:0!importantleft:-4px}.rya2{background-position:-3px -6pxtop:0right:0}.rya3{background-position:0 -9pxbottom:-4pxleft:-4px}.rya4{background-position:-3px -9pxbottom:-4pxright:-4px}.rk1,.rk2,.rk3,.rk4{background:url(http://img.baidu.com/img/iknow/7x7.gif) no-repeatoverflow:hiddenposition:absolutefont-size:1px}.rk1{background-position:0 -28pxwidth:7pxheight:7pxtop:-1!importanttop:0left:-1px}.rk2{background-position:-7px -28pxwidth:7pxheight:7pxtop:-1px!importanttop:0right:-1px!importantright:0}.rk3{background-position:0 -35pxwidth:7pxheight:7pxbottom:-1pxleft:-1px}.rk4{background-position:-7px -35pxwidth:7pxheight:7pxbottom:-1pxright:-1px}.ic1,.ic2,.ic3,.ic4{background:url(http://img.baidu.com/img/iknow/ic.gif) no-repeatwidth:22pxheight:22pxoverflow:hiddenmargin-right:2pxfloat:left}.ic1{background-position:0 0}.ic2{background-position:0 -22px}.ic3{background-position:0 -44px}.ic4{background-position:0 -66px}.ibbs,.igood,.iok,.ivote,.iwhy,.istar{background:url(http://img.baidu.com/img/iknow/icons.gif) no-repeatwidth:16pxheight:16pxmargin-right:2pxoverflow:hiddenfloat:left}.istar{background-position:0 -112px}.iwhy{background-position:0 -144px}.ivote{background-position:0 -128px}.iok{background-position:0 -96px}.igood{background-position:0 -80px}.ibbs{background-position:0 -16px} .gzly{background-color:#dbf1d4padding-top:4pxmargin-bottom:12px}.gzly2{height:23pxbackground-color:#FFFtext-align:centerborder:1px solid #a9d39cborder-bottom:1px dashed #fff!importantborder-bottom:nonepadding-right:5pxpadding-left:5px}.gzly3{height:23pxbackground-color:#FFFtext-align:centerborder:1px solid #a9d39cpadding-right:5pxpadding-left:5px}.gzly3 a:link,.gzly3 a:visited,.gzly3 a:hover{color:#080display:blockwidth:100%text-decoration:none}.ln{border-bottom:1px solid #a9d39c}.carefield{background:#f3f3f3border-top:1px solid #f3f3f3} .baikeForIknow{font-size:14pxline-height:22px}.baikeForIknow p{word-break:break-allwrod-wrap:break-wordmargin:10px 0}.baikeForIknow .line{display:blockfont-size:14pxline-height:22pxborder-top:1px solid #cccpadding-top:10px}#zhishi_items ul{list-style:none}#zhishi_items ul li{line-height:46pxheight:46pxpadding:3px 10pxoverflow:hiddenlist-style:noneclear:both}#zhishi_items img{margin-right:4pxwidth:36pxheight:36pxfloat:leftborder:2px solid #e7e7e7padding:1px}#zhishi_main{padding:10px 10px 0 10pxmargin-bottom:5px}#zhishi_more{display:none}img.z{width:75pxheight:75pxborder:0float:leftmargin:0 5px 5px 0}.bg_w{border-top:1px solid #fffborder-bottom:1px solid #fff}.bg_g{border-top:1px solid #eaeaeaborder-bottom:1px solid #eaeaeabackground:#f4f4f4}.bg_g img,.bg_w img{border:1px solid #fff}.bc4,.bc4 a,.bc4 a:visited{color:#444}.bc4{margin:0 3px 3px 3pxbackground:#FFFpadding:0 0 2px 0+height:300pxmin-height:316px}a.author:link{color:#261CDC}a.author:visited{color:#800080}.more2{margin:5px 0 0 10pxfont-weight:boldclear:both}.more2 a:link,.more2 a:visited{color:#261cdc}.more2 a:visited{color:#800080}#show_being_questions,#carefield,#show_push_questions,#voting_questions,#push_questions{margin-left:1em}#show_being_questions ul,#show_being_questions li,#carefield ul,#carefield li,#show_push_questions ul,#show_push_questions li,#voting_questions ul,#voting_questions li{list-style-type:nonedisplay:block}#show_being_questions li,#carefield li,#show_push_questions li,#voting_questions li{line-height:16pxpadding-top:8pxfont-size:14px}#show_being_questions,#carefield,#show_push_questions,#voting_questions{font-size:14px}#show_being_questions ul,#carefield ul,#show_push_questions ul{margin-bottom:14px}.grey_point{color:#7F7F7Fmargin-right:4px}#push_questions{padding-top:10pxmargin-bottom:3pxborder-top:1px dashed #ccc}#push_questions a:link,#push_questions a:visited,a.carefield_name:link,a.carefield_name:visited{font-size:14pxcolor:#000}#allNewQuestionLogined{border-top:1px dashed #cccpadding-top:10px}#nocarefield,#carefield,#keyWord{margin:0margin-left:14pxborder-bottom:1px dashed #ccc}#nocarefield{border:nonemargin-bottom:0}*html #nocarefield{border:nonemargin-bottom:-8px}#show_push_questions .arr,#carefield .arr,#keyWord .arr{background:url(http://img.baidu.com/img/iknow/ques_arr.gif) no-repeat 1px 3pxwidth:15margin-right:5pxdisplay:blockfloat:leftheight:15pxcursor:pointer}*html #keyWord .title{margin-bottom:-10px}#keyWord h2 a{color:black}#show_push_questions h1,#carefield h1,#keyWord h1{font-size:14pxcolor:blackwidth:144px}#carefield h1{width:130px}#show_push_questions .pen,#carefield .pen,#keyWord .pen{width:14float:rightdisplay:blockheight:14pxcursor:pointermargin-top:-17pxbackground:#fff url(http://img.baidu.com/img/iknow/ques_arr.gif) no-repeat 100% -98px}#carefield_2{margin-top:-10px}*html #carefield .carefield_notify{margin-bottom:-8px}*html #carefield_2{margin-top:-20px}*html #carefield .title{margin-bottom:-10pxmargin-top:-4px}*html #show_push_questions .title{margin-top:-10pxmargin-bottom:-10px}#show_push_questions .title a:link,#show_push_questions .title a:visited{color:#000}#keyWord h2{font-weight:normalcolor:blackfont-size:14pxmargin:0margin-top:-4px}#keyWord h2 a{margin-left:8px}*html #keyWord h2{margin-top:-14px}#keyWord ul{margin:6px 0 10px 0padding:0list-style:none}#keyWord li{margin:6px 0}#keyWord li a{font-size:14px}#show_push_questions li u,#show_being_questions li u,#carefield li u,#keyWord li u{clear:rightfloat:rightcolor:#666font-size:12pxmargin-right:5pxtext-decoration:none}#show_push_questions .Gscore,#show_being_questions .Gscore,#carefield .Gscore,#keyWord .Gscore{margin-left:-4pxcolor:redfont-size:12px}.carefield_notify{clear:rightfont-size:12pxmargin:14px 0}.newline{font-size:14pxmargin:4px 0 0 56px}#keyWord table{margin:-6px 0}#keyWord td a{color:black}*html #keyWord table{margin:-18px 0 -6px 0}#keyWord td{font-size:14px}#kwlist{width:400px}#kwlist li{list-style:nonefloat:leftmargin-left:8px}#being_questions_title,#voting_questions_title{padding-left:10pxheight:24pxline-height:26pxfont-size:14pxfont-weight:boldmargin-bottom:10pxbackground:#daf1d4border-top:1px solid #c8e9be}#carefield_3{margin-top:-8px}* html #carefield_3{margin-top:-18px}.loading{text-align:centerpadding-top:100pxcolor:#999}.lka{cursor:pointercolor:#00C}img.down-arrow{cursor:pointerborder:1px solid #FFF}img.down-arrow-hover{cursor:pointerborder:1px solid #999background-color:#F7F7F7}#nav_extra{position:absolutez-index:65535font-size:12pxtext-align:leftwidth:104px}#nav_extra a{cursor:pointerposition:staticcolor:#00C!importanttext-decoration:underline!important}#nav_extra .top{border:1px solid #999border-bottom-color:#FFFbackground-color:#FFFpadding-bottom:3pxpadding-left:5pxpadding-right:5pxposition:absoluteheight:17pxz-index:65531border-bottom:0}#nav_extra .body{border:1px solid #999background-color:#FFFposition:absolutetop:20px*top:19pxz-index:65530}#nav_extra .body a{display:blockpadding:3px 11px 3px 5px}#nav_extra .body a:hover{background-color:#e4e4e4}#usrbar #my_home_container{padding-bottom:2pxpadding-left:5pxpadding-right:5px}#tip{width:231pxposition:absolutetop:0z-index:1001background:url(http://img.baidu.com/img/iknow/tip_bg.gif) no-repeat bottom leftdisplay:none}#tip_holder{position:absolutez-index:1000}#tip_top{height:20px}.left_arrow{background:#fff url(http://img.baidu.com/img/iknow/tip_bg.gif) no-repeat top left}.right_arrow{background:#fff url(http://img.baidu.com/img/iknow/tip_bg.gif) no-repeat top right}#tip_icon{float:left}#tip_con{padding:0 10px 12px 10pxline-height:18px}#tip_con dl{margin:0 0 0 45pxpadding:0}#tip_con dt{font-weight:boldmargin:0padding:0}#tip_con dd{margin:0padding:0}#tip_detail{text-align:right}#tip_close{position:absoluteright:10pxtop:22pxcursor:pointer}.modify-care{font-size:12pxfont-weight:normalfloat:rightpadding:4px 4px 0 0}#sug{border:1px solid #817F82display:noneposition:absolutetop:28pxleft:0-moz-user-select:none}#sug td{font:14px verdana}.mo{background-color:#36ccolor:#fff}.ml{background-color:#fffcolor:#000}