我们的项目开始的时候都要搭建一个框架，虽不是专业的美工，但是爱美之心人皆有之……用easyui搭建的框架呢，比较柔和，容易使人接受，用户体验会比较好。这里跟大家分享一下我刚学的东西，不好的地方请大家提出来我会改进……
这里主要运用的是easyui里面的Layout跟tabs,tabs主要作用是显示打开过的网页,当然在写之前要导入Jquary和easyui.
View Code
1 /*设计页面*/ 2 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LayOut.aspx.cs" Inherits="EasyUI.布局" %> 3 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 5 6 <html xmlns="http://www.w3.org/1999/xhtml"> 7 <head runat="server"> 8 <title></title> 9 <link href="EasyUI/easyui.css" rel="stylesheet" type="text/css" /> 10 <link href="EasyUI/icon.css" rel="stylesheet" type="text/css" /> 11 <script src="EasyUI/jquery-1.4.2.min.js" type="text/javascript"></script> 12 <script src="EasyUI/jquery.easyui.min.js" type="text/javascript"></script> 13 <style type="text/css"> 14 html,body 15 { 16 margin:0px; 17 padding:0px; 18 width:100%; 19 height:100% 20 21 } 22 </style> 23 <script type="text/javascript"> 24 function AddOne(stitle) { 25 if ($("#tt").tabs("exists", stitle)) { 26 $("#tt").tabs("select", stitle); 27 } else { 28 $("#tt").tabs('add', { 29 title: stitle, 30 content: "^……^", 31 selected: true, 32 closable: true 33 }) 34 } 35 } 36 </script> 37 </head> 38 <body> 39 <div id="cc" fit="true" style="width:600px;height:400px;" class="easyui-layout" border="false"> 40 <div region="north" style="height:80px;"></div> 41 <div region="south" style="height:50px;"></div> 42 <div region="east" icon="icon-reload" title="East" split="true" style="width:100px;"></div> 43 <div region="west" title="操作菜单" style="width:200px;"> 44 <!----> 45 <div id="aa" fit="true" class="easyui-accordion" border="false"> 46 <div title="Title1" icon="icon-save" style="overflow:auto;padding:10px;"> 47 <h3 style="color:#0099FF;">Accordion for jQuery</h3> 48 <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p> 49 </div> 50 <div title="Title2" icon="icon-reload" selected="true" style="padding:10px;"> 51 <a href="javascript:AddOne('One')">AddOne</a> 52 <br /> 53 <a href="javascript:AddOne('Two')">AddTwo</a> 54 <br /> 55 <a href="javascript:AddOne('One')">AddOne</a> 56 <br /> 57 <a href="javascript:AddOne('Two')">AddTwo</a> 58 </div> 59 <div title="Title3"> 60 content3 61 </div> 62 </div> 63 <!----> 64 </div> 65 <div region="center" style="background:#eee; padding:5px"> 66 <div id="tt" fit="true" border="false" class="easyui-tabs"> 67 <div title="Tab1" style="padding:20px;display:none;"> 68 tab1 69 </div> 70 <div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;"> 71 tab2 72 </div> 73 <div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;"> 74 tab3 75 </div> 76 </div> 77 </div> 78 </div> 79 </body> 80 </html> 81 82 83 /*-------------icon.css------------------*/ 84 .icon-add{ 85 background:url('icons/edit_add.png') no-repeat; 86 } 87 .icon-edit{ 88 background:url('icons/pencil.png') no-repeat; 89 } 90 .icon-remove{ 91 background:url('icons/edit_remove.png') no-repeat; 92 } 93 .icon-save{ 94 background:url('icons/filesave.png') no-repeat; 95 } 96 .icon-cut{ 97 background:url('icons/cut.png') no-repeat; 98 } 99 .icon-ok{ 100 background:url('icons/ok.png') no-repeat; 101 } 102 .icon-no{ 103 background:url('icons/no.png') no-repeat; 104 } 105 .icon-cancel{ 106 background:url('icons/cancel.png') no-repeat; 107 } 108 .icon-reload{ 109 background:url('icons/reload.png') no-repeat; 110 } 111 .icon-search{ 112 background:url('icons/search.png') no-repeat; 113 } 114 .icon-print{ 115 background:url('icons/print.png') no-repeat; 116 } 117 .icon-help{ 118 background:url('icons/help.png') no-repeat; 119 } 120 .icon-undo{ 121 background:url('icons/undo.png') no-repeat; 122 } 123 .icon-redo{ 124 background:url('icons/redo.png') no-repeat; 125 } 126 .icon-back{ 127 background:url('icons/back.png') no-repeat; 128 } 129 130 131 132 /*-------------------easyui.css--------------------*/ 133 .accordion{ 134 background:#fff; 135 overflow:hidden; 136 } 137 .accordion .accordion-header{ 138 background:#E0ECFF; 139 border-top-width:0; 140 cursor:pointer; 141 } 142 .accordion .accordion-header .panel-title{ 143 font-weight:normal; 144 } 145 .accordion .accordion-header-selected .panel-title{ 146 font-weight:bold; 147 } 148 .accordion-noborder .accordion-header{ 149 border-width:0 0 1px; 150 } 151 .accordion-noborder .accordion-body{ 152 border-width:0px; 153 }.calendar{ 154 background:#fff; 155 border:1px solid #A4BED4; 156 padding:1px; 157 overflow:hidden; 158 } 159 .calendar-noborder{ 160 border:0px; 161 } 162 .calendar-header{ 163 position:relative; 164 background:#E0ECFF; 165 font-size:12px; 166 height:22px; 167 } 168 .calendar-title{ 169 text-align:center; 170 height:22px; 171 } 172 .calendar-title span{ 173 position:relative; 174 top:4px; 175 display:incline-block; 176 padding:3px; 177 cursor:pointer; 178 -moz-border-radius:4px; 179 -webkit-border-radius:4px; 180 } 181 .calendar-prevmonth,.calendar-nextmonth,.calendar-prevyear,.calendar-nextyear{ 182 position:absolute; 183 top:4px; 184 width:14px; 185 height:14px; 186 line-height:12px; 187 cursor:pointer; 188 font-size:1px; 189 -moz-border-radius:4px; 190 -webkit-border-radius:4px; 191 } 192 .calendar-prevmonth{ 193 left:20px; 194 background:url('images/calendar_prevmonth.gif') no-repeat 3px 2px; 195 } 196 .calendar-nextmonth{ 197 right:20px; 198 background:url('images/calendar_nextmonth.gif') no-repeat 3px 2px; 199 } 200 .calendar-prevyear{ 201 left:3px; 202 background:url('images/calendar_prevyear.gif') no-repeat 1px 2px; 203 } 204 .calendar-nextyear{ 205 right:3px; 206 background:url('images/calendar_nextyear.gif') no-repeat 1px 2px; 207 } 208 .calendar-body{ 209 font-size:12px; 210 position:relative; 211 } 212 .calendar-body table{ 213 width:100%; 214 height:100%; 215 border:1px solid #eee; 216 font-size:12px; 217 padding1:5px; 218 } 219 .calendar-body th,.calendar-body td{ 220 text-align:center; 221 } 222 .calendar-body th{ 223 background:#fafafa; 224 color:#888; 225 border-bottom1:1px solid #ccc; 226 } 227 .calendar-day{ 228 color:#222; 229 cursor:pointer; 230 border:1px solid #fff; 231 -moz-border-radius:4px; 232 -webkit-border-radius:4px; 233 } 234 .calendar-sunday{ 235 color:#CC2222; 236 } 237 .calendar-saturday{ 238 color:#00ee00; 239 } 240 .calendar-today{ 241 color:#0000ff; 242 } 243 .calendar-other-month{ 244 opacity:0.3; 245 filter:alpha(opacity=30); 246 } 247 .calendar-hover{ 248 border:1px solid red; 249 } 250 .calendar-selected{ 251 background:#FBEC88; 252 border:1px solid red; 253 } 254 .calendar-nav-hover{ 255 background-color:#FBEC88; 256 } 257 258 259 .calendar-menu{ 260 position:absolute; 261 top:0px; 262 left:0px; 263 width:180px; 264 height:150px; 265 padding:5px; 266 font-size:12px; 267 background:#fafafa; 268 opacity:0.8; 269 filter:alpha(opacity=80); 270 display:none; 271 } 272 .calendar-menu-year-inner{ 273 text-align:center; 274 padding-bottom:5px; 275 } 276 .calendar-menu-year{ 277 width:40px; 278 text-align:center; 279 border:1px solid #ccc; 280 padding:2px; 281 font-weight:bold; 282 } 283 .calendar-menu-prev,.calendar-menu-next{ 284 display:inline-block; 285 width:21px; 286 height:21px; 287 vertical-align:top; 288 cursor:pointer; 289 } 290 .calendar-menu-prev{ 291 margin-right:10px; 292 background:url('images/calendar_prevyear.gif') no-repeat 5px 6px; 293 } 294 .calendar-menu-next{ 295 margin-left:10px; 296 background:url('images/calendar_nextyear.gif') no-repeat 5px 6px; 297 } 298 .calendar-menu-hover{ 299 background-color:#FBEC88; 300 } 301 .calendar-menu-month-inner table{ 302 width:100%; 303 height:100%; 304 } 305 .calendar-menu-month{ 306 text-align:center; 307 cursor:pointer; 308 border:1px solid #fafafa; 309 font-weight:bold; 310 color:#666; 311 -moz-border-radius:4px; 312 -webkit-border-radius:4px; 313 } 314 .combobox{ 315 display:inline-block; 316 white-space:nowrap; 317 font-size:12px; 318 margin:0; 319 padding:0; 320 border:1px solid #A4BED4; 321 } 322 .combobox-text{ 323 font-size:12px; 324 border:0px; 325 line-height:20px; 326 height:20px; 327 padding:0px; 328 } 329 .combobox-arrow{ 330 background:url('images/combo_arrow.gif') no-repeat 0 0; 331 width:18px; 332 height:20px; 333 overflow:hidden; 334 display:inline-block; 335 vertical-align:top; 336 cursor:pointer; 337 opacity:0.6; 338 filter:alpha(opacity=60); 339 } 340 .combobox-arrow-hover{ 341 opacity:1.0; 342 filter:alpha(opacity=100); 343 } 344 .combobox-content{ 345 position:absolute; 346 background:#fff; 347 display:none; 348 border:1px solid #A4BED4; 349 overflow-x:hidden; 350 overflow-y:auto; 351 } 352 .combobox-item{ 353 padding:2px; 354 font-size:12px; 355 padding:3px; 356 padding-right:0px; 357 } 358 .combobox-item-hover{ 359 background:#fafafa; 360 } 361 .combobox-item-selected{ 362 background:#FBEC88; 363 }.combotree{ 364 display:inline-block; 365 white-space:nowrap; 366 font-size:12px; 367 margin:0; 368 padding:0; 369 border:1px solid #A4BED4; 370 } 371 .combotree-text{ 372 font-size:12px; 373 border:0px; 374 line-height:20px; 375 height:20px; 376 padding:0px; 377 } 378 .combotree-arrow{ 379 background:url('images/combo_arrow.gif') no-repeat 0 0; 380 width:18px; 381 height:20px; 382 overflow:hidden; 383 display:inline-block; 384 vertical-align:top; 385 cursor:pointer; 386 opacity:0.6; 387 filter:alpha(opacity=60); 388 } 389 .combotree-arrow-hover{ 390 opacity:1.0; 391 filter:alpha(opacity=100); 392 } 393 .combotree-content{ 394 position:absolute; 395 background:#fff; 396 display:none; 397 border:1px solid #A4BED4; 398 overflow:auto; 399 }.datagrid .panel-body{ 400 overflow:hidden; 401 } 402 .datagrid-wrap{ 403 position:relative; 404 } 405 .datagrid-view{ 406 position:relative; 407 overflow:hidden; 408 } 409 .datagrid-view1{ 410 position:absolute; 411 overflow:hidden; 412 left:0px; 413 top:0px; 414 border-right1:1px solid #ccc; 415 } 416 .datagrid-view2{ 417 position:absolute; 418 overflow:hidden; 419 left:210px; 420 top:0px; 421 } 422 .datagrid-mask{ 423 position:absolute; 424 left:0; 425 top:0; 426 background:#ccc; 427 opacity:0.3; 428 filter:alpha(opacity=30); 429 display:none; 430 } 431 .datagrid-mask-msg{ 432 position:absolute; 433 cursor1:wait; 434 left:100px; 435 top:50px; 436 width:auto; 437 height:16px; 438 padding:12px 5px 10px 30px; 439 background:#fff url('images/pagination_loading.gif') no-repeat scroll 5px 10px; 440 border:2px solid #6593CF; 441 color:#222; 442 display:none; 443 } 444 .datagrid-title{ 445 background:url('images/datagrid_title_bg.png') repeat-x; 446 border-bottom:1px solid #8DB2E3; 447 border-top:1px solid #fff; 448 position:relative; 449 padding:5px 0px; 450 } 451 .datagrid-title-text{ 452 color:#15428b; 453 font-weight:bold; 454 padding-left:5px; 455 } 456 .datagrid-title-with-icon{ 457 padding-left:22px; 458 } 459 .datagrid-title-icon{ 460 position:absolute; 461 width:16px; 462 height:16px; 463 left:3px; 464 top:4px!important; 465 top:6px; 466 } 467 .datagrid-sort-desc .datagrid-sort-icon{ 468 padding:2px 13px 3px 0px; 469 background:url('images/datagrid_sort_desc.gif') no-repeat center center; 470 } 471 .datagrid-sort-asc .datagrid-sort-icon{ 472 padding:2px 13px 3px 0px; 473 background:url('images/datagrid_sort_asc.gif') no-repeat center center; 474 } 475 .datagrid-toolbar{ 476 height:28px; 477 background:#efefef; 478 padding:1px 2px; 479 border-bottom:1px solid #ccc; 480 } 481 .datagrid-btn-separator{ 482 float:left; 483 height:24px; 484 border-left:1px solid #ccc; 485 border-right:1px solid #fff; 486 margin:2px 1px; 487 } 488 .datagrid-pager{ 489 background:#efefef; 490 border-top:1px solid #ccc; 491 position:relative; 492 } 493 494 .datagrid-header{ 495 overflow:hidden; 496 background:#fafafa url('images/datagrid_header_bg.gif') repeat-x left bottom; 497 border-bottom:1px solid #ccc; 498 margin-bottom:1px; 499 } 500 .datagrid-header-inner{ 501 float:left; 502 padding-right:20px; 503 margin-bottom:-1px; 504 } 505 .datagrid-header td{ 506 border-right:1px dotted #ccc; 507 font-size:12px; 508 font-weight:normal; 509 background:#fafafa url('images/datagrid_header_bg.gif') repeat-x left bottom; 510 border-bottom:1px dotted #ccc; 511 border-top:1px dotted #fff; 512 } 513 .datagrid-header td.datagrid-header-over{ 514 background:#EBF3FD; 515 } 516 .datagrid-header .datagrid-cell{ 517 margin:0; 518 padding:3px 4px; 519 white-space:nowrap; 520 word-wrap:normal; 521 overflow:hidden; 522 text-align:center; 523 } 524 .datagrid-header .datagrid-cell-group{ 525 margin:0; 526 padding:4px 2px 4px 4px; 527 white-space:nowrap; 528 word-wrap:normal; 529 overflow:hidden; 530 text-align:center; 531 } 532 .datagrid-header-rownumber{ 533 width:25px; 534 text-align:center; 535 margin:0px; 536 padding:3px 0px; 537 } 538 .datagrid-td-rownumber{ 539 background:#fafafa url('images/datagrid_header_bg.gif') repeat-x left bottom; 540 } 541 .datagrid-cell-rownumber{ 542 width:25px; 543 text-align:center; 544 margin:0px; 545 padding:3px 0px; 546 } 547 .datagrid-body{ 548 margin:0; 549 padding:0; 550 overflow:auto; 551 zoom:1; 552 } 553 .datagrid-view1 .datagrid-body-inner{ 554 padding-bottom:20px; 555 } 556 .datagrid-view1 .datagrid-body{ 557 overflow:hidden; 558 } 559 .datagrid-body td{ 560 font-size:12px; 561 border-right:1px dotted #ccc; 562 border-bottom:1px dotted #ccc; 563 overflow:hidden; 564 padding:0; 565 margin:0; 566 } 567 .datagrid-body .datagrid-cell{ 568 overflow:hidden; 569 margin:0; 570 padding:3px 4px; 571 white-space:nowrap; 572 word-wrap:normal; 573 } 574 .datagrid-header-check{ 575 padding:3px 6px; 576 } 577 .datagrid-cell-check{ 578 padding:3px 6px; 579 } 580 .datagrid-header-check input{ 581 margin:0; 582 padding:0; 583 width:15px; 584 height:15px; 585 } 586 .datagrid-cell-check input{ 587 margin:0; 588 padding:0; 589 width:15px; 590 height:15px; 591 } 592 .datagrid-row-alt{ 593 background:#EEEEFF; 594 } 595 .datagrid-row-over{ 596 background:#D0E5F5; 597 background1:#FBEC88; 598 cursor:default; 599 } 600 .datagrid-row-selected{ 601 background:#FBEC88; 602 } 603 .datagrid-resize-proxy{ 604 position:absolute; 605 width:1px; 606 top:0; 607 height:10000px; 608 background:red; 609 cursor:e-resize; 610 display:none; 611 } 612 .datagrid-body .datagrid-editable{ 613 padding:0; 614 } 615 .datagrid-body .datagrid-editable table{ 616 width:100%; 617 height:100%; 618 } 619 .datagrid-body .datagrid-editable td{ 620 border:0; 621 padding:0; 622 } 623 .datagrid-body .datagrid-editable .datagrid-editable-input{ 624 width:100%; 625 font-size:12px; 626 border:1px solid #A4BED4; 627 padding:3px 2px; 628 } 629 .datebox-calendar{ 630 position:absolute; 631 border:1px solid #A4BED4; 632 width:180px; 633 } 634 .datebox-calendar-inner{ 635 height:180px; 636 } 637 .datebox-button{ 638 height:18px; 639 padding:2px 5px; 640 font-size:12px; 641 background-color:#fafafa; 642 } 643 .datebox-current,.datebox-close{ 644 float:left; 645 color:#888; 646 text-decoration:none; 647 font-weight:bold; 648 } 649 .datebox-close{ 650 float:right; 651 } 652 .datebox-button-hover{ 653 color:#A4BED4; 654 } 655 .dialog-content{ 656 overflow:auto; 657 } 658 .dialog-toolbar{ 659 background:#fafafa; 660 padding:2px 5px; 661 border-bottom:1px solid #eee; 662 } 663 .dialog-tool-separator{ 664 float:left; 665 height:24px; 666 border-left:1px solid #ccc; 667 border-right:1px solid #fff; 668 margin:2px 1px; 669 } 670 .dialog-button{ 671 border-top:1px solid #eee; 672 background:#fafafa; 673 padding:5px 5px; 674 text-align:right; 675 } 676 .dialog-button .l-btn{ 677 margin-left:5px; 678 }.layout{ 679 position:relative; 680 overflow:hidden; 681 margin:0; 682 padding:0; 683 } 684 .layout-panel{ 685 position:absolute; 686 overflow:hidden; 687 } 688 .layout-panel-east,.layout-panel-west{ 689 z-index:2; 690 background1:#fff; 691 } 692 .layout-panel-north,.layout-panel-south{ 693 z-index:3; 694 background1:#fff; 695 } 696 .layout-button-up{ 697 background:url('images/layout_button_up.gif') no-repeat; 698 } 699 .layout-button-down{ 700 background:url('images/layout_button_down.gif') no-repeat; 701 } 702 .layout-button-left{ 703 background:url('images/layout_button_left.gif') no-repeat; 704 } 705 .layout-button-right{ 706 background:url('images/layout_button_right.gif') no-repeat; 707 } 708 .layout-expand{ 709 position:absolute; 710 padding:0px 5px; 711 padding:0px; 712 background:#D2E0F2; 713 font-size:1px; 714 cursor:pointer; 715 z-index:1; 716 } 717 .layout-expand .panel-header{ 718 background:transparent; 719 border-bottom-width:0px; 720 } 721 .layout-expand .panel-header .panel-tool{ 722 top: 5px; 723 } 724 .layout-expand .panel-body{ 725 overflow:hidden; 726 } 727 .layout-expand-over{ 728 background:#E1F0F2; 729 } 730 .layout-body{ 731 overflow:auto; 732 background:#fff; 733 } 734 .layout-split-proxy-h{ 735 position:absolute; 736 width:5px; 737 background:#ccc; 738 font-size:1px; 739 cursor:e-resize; 740 display:none; 741 z-index:5; 742 } 743 .layout-split-proxy-v{ 744 position:absolute; 745 height:5px; 746 background:#ccc; 747 font-size:1px; 748 cursor:n-resize; 749 display:none; 750 z-index:5; 751 } 752 .layout-split-north{ 753 border-bottom:5px solid #D2E0F2; 754 } 755 .layout-split-south{ 756 border-top:5px solid #D2E0F2; 757 } 758 .layout-split-east{ 759 border-left:5px solid #D2E0F2; 760 } 761 .layout-split-west{ 762 border-right:5px solid #D2E0F2; 763 } 764 .layout-mask{ 765 position:absolute; 766 background:#fafafa; 767 filter:alpha(opacity=10); 768 opacity:0.10; 769 z-index:4; 770 } 771 772 a.l-btn{ 773 color:#444; 774 background:url('images/button_a_bg.gif') no-repeat top right; 775 font-size:12px; 776 text-decoration:none; 777 display:inline-block; 778 zoom:1; 779 height:24px; 780 padding-right:18px; 781 cursor:pointer; 782 outline:none; 783 } 784 a.l-btn-plain{ 785 background:transparent; 786 padding-right:5px; 787 border:1px solid transparent; 788 _border:0px solid #efefef; 789 _padding:1px 6px 1px 1px; 790 } 791 792 a.l-btn-disabled{ 793 color:#ccc; 794 opacity:0.5; 795 filter:alpha(opacity=50); 796 cursor:default; 797 } 798 a.l-btn span.l-btn-left{ 799 display:block; 800 background:url('images/button_span_bg.gif') no-repeat top left; 801 padding:4px 0px 4px 18px; 802 line-height:16px; 803 } 804 a.l-btn-plain span.l-btn-left{ 805 background:transparent; 806 padding-left:5px; 807 } 808 809 a.l-btn span span.l-btn-text{ 810 display:inline-block; 811 height:16px; 812 line-height:16px; 813 padding:0px; 814 } 815 a.l-btn span span span.l-btn-empty{ 816 display:inline-block; 817 padding:0px; 818 width:16px; 819 } 820 a:hover.l-btn{ 821 background-position: bottom right; 822 outline:none; 823 } 824 a:hover.l-btn span.l-btn-left{ 825 background-position: bottom left; 826 } 827 828 a:hover.l-btn-plain{ 829 border:1px solid #7eabcd; 830 background:url('images/button_plain_hover.png') repeat-x left bottom; 831 _padding:0px 5px 0px 0px; 832 } 833 a:hover.l-btn-disabled{ 834 background-position:top right; 835 } 836 a:hover.l-btn-disabled span.l-btn-left{ 837 background-position:top left; 838 } 839 .menu{ 840 position:absolute; 841 background:#f0f0f0 url('images/menu.gif') repeat-y; 842 margin:0; 843 padding:2px; 844 border:1px solid #ccc; 845 overflow:hidden; 846 } 847 .menu-item{ 848 position:relative; 849 margin:0; 850 padding:0; 851 height:22px; 852 line-height:20px; 853 overflow:hidden; 854 font-size:12px; 855 cursor:pointer; 856 border:1px solid transparent; 857 _border:1px solid #f0f0f0; 858 } 859 .menu-text{ 860 position:absolute; 861 left:28px; 862 top:0px; 863 } 864 .menu-icon{ 865 position:absolute; 866 width:16px; 867 height:16px; 868 top:3px; 869 left:2px; 870 } 871 .menu-rightarrow{ 872 position: absolute; 873 width:4px; 874 height:7px; 875 top:7px; 876 right:5px; 877 background:url('images/menu_rightarrow.png') no-repeat; 878 } 879 .menu-sep{ 880 margin:3px 0px 3px 24px; 881 line-height:2px; 882 font-size:2px; 883 background:url('images/menu_sep.png') repeat-x; 884 } 885 .menu-active{ 886 border:1px solid #7eabcd; 887 background:#fafafa; 888 -moz-border-radius:3px; 889 -webkit-border-radius: 3px; 890 } 891 .menu-shadow{ 892 position:absolute; 893 background:#ddd; 894 -moz-border-radius:5px; 895 -webkit-border-radius: 5px; 896 -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); 897 -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); 898 filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2,MakeShadow=false,ShadowOpacity=0.2); 899 } 900 901 .m-btn-downarrow{ 902 display:inline-block; 903 width:12px; 904 background:url('images/menu_downarrow.png') no-repeat 4px 5px; 905 } 906 907 a.m-btn-active{ 908 background-position: bottom right; 909 } 910 a.m-btn-active span.l-btn-left{ 911 background-position: bottom left; 912 } 913 a.m-btn-plain-active{ 914 background:transparent; 915 border:1px solid #7eabcd; 916 -moz-border-radius:3px; 917 -webkit-border-radius: 3px; 918 } 919 .messager-body{ 920 padding:5px 10px; 921 } 922 .messager-button{ 923 text-align:center; 924 padding-top:10px; 925 } 926 .messager-icon{ 927 float:left; 928 width:47px; 929 height:35px; 930 } 931 .messager-error{ 932 background:url('images/messager_error.gif') no-repeat scroll left top; 933 } 934 .messager-info{ 935 background:url('images/messager_info.gif') no-repeat scroll left top; 936 } 937 .messager-question{ 938 background:url('images/messager_question.gif') no-repeat scroll left top; 939 } 940 .messager-warning{ 941 background:url('images/messager_warning.gif') no-repeat scroll left top; 942 } 943 .messager-input{ 944 width: 262px; 945 border:1px solid #ccc; 946 }.pagination{ 947 zoom:1; 948 } 949 .pagination table{ 950 float:left; 951 } 952 .pagination-btn-separator{ 953 float:left; 954 height:24px; 955 border-left:1px solid #ccc; 956 border-right:1px solid #fff; 957 margin:3px 1px; 958 } 959 .pagination-num{ 960 border:1px solid #ccc; 961 margin:0 2px; 962 } 963 .pagination-page-list{ 964 margin:0px 6px; 965 } 966 .pagination-info{ 967 float:right; 968 padding-right:6px; 969 padding-top:8px; 970 font-size:12px; 971 } 972 .pagination span{ 973 font-size:12px; 974 } 975 .pagination-first{ 976 background:url('images/pagination_first.gif') no-repeat; 977 } 978 .pagination-prev{ 979 background:url('images/pagination_prev.gif') no-repeat; 980 } 981 .pagination-next{ 982 background:url('images/pagination_next.gif') no-repeat; 983 } 984 .pagination-last{ 985 background:url('images/pagination_last.gif') no-repeat; 986 } 987 .pagination-load{ 988 background:url('images/pagination_load.png') no-repeat; 989 } 990 .pagination-loading{ 991 background:url('images/pagination_loading.gif') no-repeat; 992 } 993 .panel{ 994 overflow:hidden; 995 font-size:12px; 996 } 997 .panel-header{ 998 padding:5px; 999 line-height:15px; 1000 color:#15428b; 1001 font-weight:bold; 1002 font-size:12px; 1003 background:url('images/panel_title.png') repeat-x; 1004 position:relative; 1005 border:1px solid #99BBE8; 1006 } 1007 .panel-header-noborder{ 1008 border-width:0px; 1009 border-bottom:1px solid #99BBE8; 1010 } 1011 .panel-body{ 1012 overflow:auto; 1013 border:1px solid #99BBE8; 1014 border-top-width:0px; 1015 } 1016 .panel-body-noheader{ 1017 border-top-width:1px; 1018 } 1019 .panel-body-noborder{ 1020 border-width:0px; 1021 } 1022 .panel-with-icon{ 1023 padding-left:18px; 1024 } 1025 .panel-icon{ 1026 position:absolute; 1027 left:5px; 1028 top:4px; 1029 width:16px; 1030 height:16px; 1031 } 1032 1033 .panel-tool{ 1034 position:absolute; 1035 right:5px; 1036 top:4px; 1037 } 1038 .panel-tool div{ 1039 display:block; 1040 float:right; 1041 width:16px; 1042 height:16px; 1043 margin-left:2px; 1044 cursor:pointer; 1045 opacity:0.6; 1046 filter:alpha(opacity=60); 1047 } 1048 .panel-tool div.panel-tool-over{ 1049 opacity:1; 1050 filter:alpha(opacity=100); 1051 } 1052 .panel-tool-close{ 1053 background:url('images/panel_tools.gif') no-repeat -16px 0px; 1054 } 1055 .panel-tool-min{ 1056 background:url('images/panel_tools.gif') no-repeat 0px 0px; 1057 } 1058 .panel-tool-max{ 1059 background:url('images/panel_tools.gif') no-repeat 0px -16px; 1060 } 1061 .panel-tool-restore{ 1062 background:url('images/panel_tools.gif') no-repeat -16px -16px; 1063 } 1064 .panel-tool-collapse{ 1065 background:url('images/panel_tool_collapse.gif') no-repeat; 1066 } 1067 .panel-tool-expand{ 1068 background:url('images/panel_tool_expand.gif') no-repeat; 1069 } 1070 .panel-loading{ 1071 padding:11px 0px 10px 30px; 1072 background:url('images/panel_loading.gif') no-repeat 10px 10px; 1073 } 1074 1075 .s-btn-downarrow{ 1076 display:inline-block; 1077 width:16px; 1078 background:url('images/menu_downarrow.png') no-repeat 9px center; 1079 } 1080 1081 a.s-btn-active{ 1082 background-position: bottom right; 1083 } 1084 a.s-btn-active span.l-btn-left{ 1085 background-position: bottom left; 1086 } 1087 a.s-btn-active .s-btn-downarrow{ 1088 background:url('images/menu_split_downarrow.png') no-repeat 4px center; 1089 } 1090 a:hover.l-btn .s-btn-downarrow{ 1091 background:url('images/menu_split_downarrow.png') no-repeat 4px center; 1092 } 1093 1094 a.s-btn-plain-active{ 1095 background:transparent; 1096 border:1px solid #7eabcd; 1097 -moz-border-radius:3px; 1098 -webkit-border-radius: 3px; 1099 } 1100 a.s-btn-plain-active .s-btn-downarrow{ 1101 background:url('images/menu_split_downarrow.png') no-repeat 4px center; 1102 }.tabs-container{ 1103 overflow:hidden; 1104 background:#fff; 1105 } 1106 .tabs-header{ 1107 border:1px solid #8DB2E3; 1108 background:#E0ECFF; 1109 border-bottom:0px; 1110 position:relative; 1111 overflow:hidden; 1112 padding:0px; 1113 padding-top:2px; 1114 overflow:hidden; 1115 } 1116 .tabs-header-noborder{ 1117 border:0px; 1118 } 1119 .tabs-header-plain{ 1120 border:0px; 1121 background:transparent; 1122 } 1123 .tabs-scroller-left{ 1124 position:absolute; 1125 left:0px; 1126 top:-1px; 1127 width:18px; 1128 height:28px!important; 1129 height:30px; 1130 border:1px solid #8DB2E3; 1131 font-size:1px; 1132 display:none; 1133 cursor:pointer; 1134 background:#E0ECFF url('images/tabs_leftarrow.png') no-repeat 1px 5px; 1135 } 1136 .tabs-scroller-right{ 1137 position:absolute; 1138 right:0; 1139 top:-1px; 1140 width:18px; 1141 height:28px!important; 1142 height:30px; 1143 border:1px solid #8DB2E3; 1144 font-size:1px; 1145 display:none; 1146 cursor:pointer; 1147 background:#E0ECFF url('images/tabs_rightarrow.png') no-repeat 2px 5px; 1148 } 1149 .tabs-header-plain .tabs-scroller-left{ 1150 top:2px; 1151 height:25px!important; 1152 height:27px; 1153 } 1154 .tabs-header-plain .tabs-scroller-right{ 1155 top:2px; 1156 height:25px!important; 1157 height:27px; 1158 } 1159 .tabs-scroller-over{ 1160 background-color:#ECF9F9; 1161 } 1162 .tabs-wrap{ 1163 position:relative; 1164 left:0px; 1165 overflow:hidden; 1166 width:100%; 1167 margin:0px; 1168 padding:0px; 1169 } 1170 .tabs-scrolling{ 1171 margin-left:18px; 1172 margin-right:18px; 1173 } 1174 .tabs{ 1175 list-style-type:none; 1176 height:26px; 1177 margin:0px; 1178 padding:0px; 1179 padding-left:4px; 1180 font-size:12px; 1181 width:5000px; 1182 border-bottom:1px solid #8DB2E3; 1183 } 1184 .tabs li{ 1185 float:left; 1186 display:inline-block; 1187 margin1:0px 1px; 1188 margin-right:4px; 1189 margin-bottom:-1px; 1190 padding:0; 1191 position:relative; 1192 border:1px solid #8DB2E3; 1193 -moz-border-radius-topleft:5px; 1194 -moz-border-radius-topright:5px; 1195 -webkit-border-top-left-radius:5px; 1196 -webkit-border-top-right-radius:5px; 1197 } 1198 .tabs li a.tabs-inner{ 1199 display:inline-block; 1200 text-decoration:none; 1201 color:#416AA3; 1202 background:url('images/tabs_enabled.png') repeat-x left top; 1203 margin:0px; 1204 padding:0px 10px; 1205 height:25px; 1206 line-height:25px; 1207 text-align:center; 1208 white-space:nowrap; 1209 -moz-border-radius-topleft:5px; 1210 -moz-border-radius-topright:5px; 1211 -webkit-border-top-left-radius:5px; 1212 -webkit-border-top-right-radius:5px; 1213 } 1214 .tabs li a.tabs-inner:hover{ 1215 background:url('images/tabs_active.png') repeat-x left bottom; 1216 } 1217 .tabs li.tabs-selected{ 1218 border:1px solid #8DB2E3; 1219 border-bottom:1px solid #fff; 1220 border-top1:2px solid #8DB2E3; 1221 } 1222 .tabs li.tabs-selected a{ 1223 color:#416AA3; 1224 font-weight:bold; 1225 background:#fff; 1226 background:#7eabcd url('images/tabs_active.png') repeat-x left bottom; 1227 outline: none; 1228 } 1229 .tabs li.tabs-selected a:hover{ 1230 cursor:default; 1231 pointer:default; 1232 } 1233 .tabs-with-icon{ 1234 padding-left:20px; 1235 } 1236 .tabs-icon{ 1237 position:absolute; 1238 width:16px; 1239 height:16px; 1240 left:10px; 1241 top:5px; 1242 } 1243 .tabs-closable{ 1244 padding-right:8px; 1245 } 1246 .tabs li a.tabs-close{ 1247 position:absolute; 1248 font-size:1px; 1249 display:block; 1250 padding:0px; 1251 width:11px; 1252 height:11px; 1253 top:3px; 1254 right:3px; 1255 opacity:0.6; 1256 filter:alpha(opacity=60); 1257 background:url('images/tabs_close.gif') no-repeat; 1258 } 1259 .tabs li a:hover.tabs-close{ 1260 opacity:1; 1261 filter:alpha(opacity=100); 1262 cursor:hand; 1263 cursor:pointer; 1264 } 1265 1266 1267 .tabs-panels{ 1268 margin:0px; 1269 padding:0px; 1270 border:1px solid #8DB2E3; 1271 border-top:0px; 1272 overflow:auto; 1273 } 1274 .tabs-panels-noborder{ 1275 border:0px; 1276 } 1277 .tree{ 1278 font-size:12px; 1279 margin:0; 1280 padding:0; 1281 list-style-type:none; 1282 } 1283 .tree li{ 1284 white-space:nowrap; 1285 } 1286 .tree li ul{ 1287 list-style-type:none; 1288 margin:0; 1289 padding:0; 1290 } 1291 .tree-node{ 1292 height:18px; 1293 white-space:nowrap; 1294 cursor:pointer; 1295 } 1296 .tree-indent{ 1297 display:inline-block; 1298 width:16px; 1299 height:18px; 1300 vertical-align:middle; 1301 } 1302 .tree-hit{ 1303 cursor:pointer; 1304 } 1305 .tree-expanded{ 1306 display:inline-block; 1307 width:16px; 1308 height:18px; 1309 vertical-align:middle; 1310 background:url('images/tree_arrows.gif') no-repeat -18px 0px; 1311 } 1312 .tree-expanded-hover{ 1313 background:url('images/tree_arrows.gif') no-repeat -50px 0px; 1314 } 1315 .tree-collapsed{ 1316 display:inline-block; 1317 width:16px; 1318 height:18px; 1319 vertical-align:middle; 1320 background:url('images/tree_arrows.gif') no-repeat 0px 0px; 1321 } 1322 .tree-collapsed-hover{ 1323 background:url('images/tree_arrows.gif') no-repeat -32px 0px; 1324 } 1325 .tree-folder{ 1326 display:inline-block; 1327 background:url('images/tree_folder.gif') no-repeat; 1328 width:16px; 1329 height:18px; 1330 vertical-align:middle; 1331 } 1332 .tree-folder-open{ 1333 background:url('images/tree_folder_open.gif') no-repeat; 1334 } 1335 .tree-file{ 1336 display:inline-block; 1337 background:url('images/tree_file.gif') no-repeat; 1338 width:16px; 1339 height:18px; 1340 vertical-align:middle; 1341 } 1342 .tree-loading{ 1343 background:url('images/tree_loading.gif') no-repeat; 1344 } 1345 .tree-title{ 1346 display:inline-block; 1347 line-height1:18px; 1348 text-decoration:none; 1349 vertical-align:middle; 1350 padding:1px 2px 1px 2px; 1351 white-space:nowrap; 1352 } 1353 1354 .tree-node-hover{ 1355 background:#fafafa; 1356 } 1357 .tree-node-selected{ 1358 background:#FBEC88; 1359 } 1360 .tree-checkbox{ 1361 display:inline-block; 1362 width:16px; 1363 height:18px; 1364 vertical-align:middle; 1365 } 1366 .tree-checkbox0{ 1367 background:url('images/tree_checkbox_0.gif') no-repeat; 1368 } 1369 .tree-checkbox1{ 1370 background:url('images/tree_checkbox_1.gif') no-repeat; 1371 } 1372 .tree-checkbox2{ 1373 background:url('images/tree_checkbox_2.gif') no-repeat; 1374 } 1375 .validatebox-invalid{ 1376 background:#FFFFEE url('images/validatebox_warning.png') no-repeat right 1px; 1377 } 1378 .validatebox-tip{ 1379 position:absolute; 1380 width:200px; 1381 height:auto; 1382 display:none; 1383 z-index:9900000; 1384 } 1385 .validatebox-tip-content{ 1386 display:inline-block; 1387 position:absolute; 1388 top:0px; 1389 left:10px; 1390 padding:3px 5px; 1391 border:1px solid #CC9933; 1392 background:#FFFFCC; 1393 z-index:9900001; 1394 font-size:12px; 1395 } 1396 .validatebox-tip-pointer{ 1397 background:url('images/validatebox_pointer.gif') no-repeat left top; 1398 display:inline-block; 1399 width:10px; 1400 height:19px; 1401 position:absolute; 1402 left:1px; 1403 top:0px; 1404 z-index:9900002; 1405 }.window { 1406 font-size:12px; 1407 position:absolute; 1408 overflow:hidden; 1409 background:transparent url('images/panel_title.png'); 1410 background1:#878787; 1411 padding:5px; 1412 border:1px solid #99BBE8; 1413 -moz-border-radius:5px; 1414 -webkit-border-radius: 5px; 1415 } 1416 .window-shadow{ 1417 position:absolute; 1418 background:#ddd; 1419 -moz-border-radius:5px; 1420 -webkit-border-radius: 5px; 1421 -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); 1422 -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); 1423 filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2,MakeShadow=false,ShadowOpacity=0.2); 1424 } 1425 .window .window-header{ 1426 background:transparent; 1427 padding:2px 0px 4px 0px; 1428 } 1429 .window .window-body{ 1430 background:#fff; 1431 border:1px solid #99BBE8; 1432 border-top-width:0px; 1433 } 1434 .window .window-header .panel-icon{ 1435 left:1px; 1436 top:1px; 1437 } 1438 .window .window-header .panel-with-icon{ 1439 padding-left:18px; 1440 } 1441 .window .window-header .panel-tool{ 1442 top:0px; 1443 right:1px; 1444 } 1445 .window-proxy{ 1446 position:absolute; 1447 overflow:hidden; 1448 border:1px dashed #15428b; 1449 } 1450 .window-mask{ 1451 position:absolute; 1452 left:0; 1453 top:0; 1454 width:100%; 1455 height:100%; 1456 filter:alpha(opacity=40); 1457 opacity:0.40; 1458 background:#ccc; 1459 display1:none; 1460 font-size:1px; 1461 *zoom:1; 1462 overflow:hidden; 1463 }
4463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
