看过《教我写.net通用权限框架(1)之菜单导航篇》之后发生的事.docx

看过教我写.net通用权限框架(1)之菜单导航篇之后发生的事引言本来是想继续UML学习系列的，今天换换内容，一直弄那个也挺无聊的，在博客园看到这位牛人怎么扣界面的，觉得很新奇，今天也尝试了。确实很牛逼。这里也将学习结果分享一下。十分感谢微软高级php工程师，膜拜啊。原文地址：大湿教我写.net通用权限框架(1)之菜单导航篇他的文章下面有三个链接，这里就做个简单的，怎么扣登录界面？患者：登录界面手术台：火狐浏览器主刀人：LZ操刀过程解剖1）首先根据他给的链接进入登录界面39:803/Frame/Login.htm这界面还第一次见到，不让我右键，不让我F12（IE浏览器F12有效，其他浏览器F12没反应.），那只能2）查看源代码取内脏样式怎么扣下来？单击进去，比如desktop.css这个样式文件。 1 /*桌面版导航菜单*/ 2 *padding:0px; margin:0px; font-size: 9pt; 3 html 4 height:100%; 5 overflow:hidden; 6 7 body 8 9 margin: 0px; 10 padding: 0px; 11 font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif; 12 color: #000000; 13 overflow:hidden; 14 /*background-image:url(./images/wallpaper/003.jpg)*/ 15 background: url(./Images/bg.jpg) repeat left bottom transparent; 16 17 #loading 18 19 font-size: 14pt; 20 position: absolute; 21 z-index: 3000; 22 left: 42%; 23 top: 40%; 24 border: 3px solid #ccc; 25 width: auto; 26 padding: 10px 10px 7px 10px; 27 background: #fff; 28 display: none; 29 cursor: pointer; 30 color:#666; 31 -moz-border-radius: 15px; /* Gecko browsers */ 32 -webkit-border-radius: 15px; /* Webkit browsers */ 33 border-radius:15px; /* W3C syntax */ 34 35 div, ul, li, dl, dt, dd, img, h1, h2 36 37 margin: 0px; 38 padding: 0px; 39 list-style-type: none; 40 border: 0; 41 42 body a 43 44 outline: none; 45 blr: expression(this.onFocus=this.blur(); 46 47 img 48 border:0px; 49 50 a:link 51 52 color: #222; 53 text-decoration: none; 54 55 a:visited 56 57 color: #222; 58 text-decoration: none; 59 60 a:hover 61 62 color: #222; 63 text-decoration: none; 64 65 a:active 66 67 color: #222; 68 text-decoration: none; 69 70 /* 主界面顶部 */ 71 #north 72 height:78px; 73 color:#fff; 74 overflow:hidden; 75 76 77 #north #banner_text 78 color:#FFFFFF; 79 font-weight:bold; 80 font-size: 18pt; 81 82 83 #north #north_left 84 float:left; 85 padding-left:10px; 86 87 #north #north_left table 88 border:0px; 89 height:78px; 90 91 #north #north_left table td 92 93 vertical-align:middle; 94 95 #north #north_right 96 float:right; 97 padding-top:8px; 98 99 100 /* 一级标签 */ 101 #taskbar 102 height:40px; 103 overflow:hidden; 104 105 106 107 /* 一级标签 左侧 */ 108 #taskbar #taskbar_left 109 float:left; 110 padding:0px 10px; 111 112 113 /* 导航菜单 */ 114 #taskbar #taskbar_left #start_menu 115 display:block; 116 width:97px; 117 height:40px; 118 background:url(./Images/start_menu.png) center 0px no-repeat; 119 120 #taskbar #taskbar_left #start_menu:hover, 121 #taskbar #taskbar_left #start_menu.active 122 background-position:center -40px; 123 124 125 /* 一级标签*/ 126 #taskbar #taskbar_center 127 padding-top:10px; 128 float:left; 129 130 #taskbar #taskbar_center #tabs_left_scroll 131 float:left; 132 width:30px; 133 height:30px; 134 display:none; 135 cursor:pointer; 136 background:url(./Images/tabs_arrow.png) no-repeat 0px center; 137 138 #taskbar #taskbar_center #tabs_left_scroll.active 139 background:url(./Images/tabs_arrow.png) no-repeat -60px center; 140 141 #taskbar #taskbar_center #tabs_container 142 height:30px; 143 width:100%; 144 float:left; 145 overflow:hidden; 146 white-space:nowrap; 147 148 #taskbar #taskbar_center #tabs_container div 149 cursor: pointer; 150 display:inline-block; 151 margin-right:3px; 152 padding-right:5px; 153 white-space:nowrap; 154 -moz-border-radius-topleft:5px; 155 -moz-border-radius-topright:5px; 156 -webkit-border-top-left-radius:5px; 157 -webkit-border-top-right-radius:5px; 158 159 #taskbar #taskbar_center #tabs_container div *display:inline !important; 160 #taskbar #taskbar_center #tabs_container div a.tab 161 display:inline-block; 162 padding-left:10px; 163 padding-right:3px; 164 min-width:64px !important; 165 width:auto !important; 166 width:80px; 167 text-decoration:none; 168 color:#fff; 169 height:30px; 170 line-height:30px; 171 text-align:center; 172 -moz-border-radius-topleft:5px; 173 -moz-border-radius-topright:5px; 174 -webkit-border-top-left-radius:5px; 175 -webkit-border-top-right-radius:5px; 176 177 #taskbar #taskbar_center #tabs_container div.selected 178 background:url(./Images/tabs_active.png) no-repeat right -30px; 179 180 #taskbar #taskbar_center #tabs_container div.selected a.tab 181 color:#416AA3; 182 font-size:14px; 183 font-weight:bold; 184 background:url(./Images/tabs_active.png) no-repeat left 0px; 185 186 #taskbar #taskbar_center #tabs_container div a.close 187 display:none; 188 width:16px; 189 height:16px; 190 margin-bottom:-2px !important; 191 margin-bottom:2px; 192 background:url(./Images/tabs_close.png) 0px center no-repeat; 193 z-index:1; 194 195 #taskbar #taskbar_center #tabs_container div a:hover.close 196 cursor:pointer; 197 background-position:-16px center; 198 199 #taskbar #taskbar_center #tabs_container div.selected a.close 200 display:inline-block; 201 202 203 #taskbar #taskbar_center #tabs_right_scroll 204 float:right; 205 width:30px; 206 height:30px; 207 display:none; 208 cursor:pointer; 209 background:url(./Images/tabs_arrow.png) no-repeat -30px center; 210 211 #taskbar #taskbar_center #tabs_right_scroll.active 212 background:url(./Images/tabs_arrow.png) no-repeat -90px center; 213 214 215 /* 一级标签 右侧 */ 216 #taskbar #taskbar_right 217 float:right; 218 padding-left:10px; 219 220 /* 任务中心 */ 221 #taskbar #taskbar_right #task_center 222 display:inline-block; 223 width:30px; 224 height:25px; 225 margin-top:10px; 226 margin-right:5px; 227 background:url(./Images/desktop_icons.png) 0px 0px no-repeat; 228 229 #taskbar #taskbar_right #task_center:hover, 230 #taskbar #taskbar_right #task_center.active 231 background-position:0px -25px; 232 233 /* 事务提醒 */ 234 #taskbar #taskbar_right #portal 235 display:inline-block; 236 width:30px; 237 height:25px; 238 margin-top:10px; 239 margin-right:5px; 240 background:url(./Images/desktop_icons.png) -323px 0px no-repeat; 241 242 #taskbar #taskbar_right #portal:hover, 243 #taskbar #taskbar_right #portal.active 244 background-position:-323px -25px; 245 246 /* 注销登录 */ 247 #taskbar #taskbar_right #logout 248 display:inline-block; 249 width:30px; 250 height:25px; 251 margin-top:10px; 252 margin-right:5px; 253 background:url(./Images/desktop_icons.png) -288px 0px no-repeat; 254 255 #taskbar #taskbar_right #logout:hover, 256 #taskbar #taskbar_right #logout.active 257 background-position:-288px -25px; 258 259 260 /* 更换皮肤 */ 261 #taskbar #taskbar_right #theme 262 display:inline-block; 263 width:30px; 264 height:25px; 265 margin-top:10px; 266 margin-right:5px; 267 background:url(./Images/desktop_icons.png) -364px 0px no-repeat; 268 269 #taskbar #taskbar_right #theme:hover, 270 #taskbar #taskbar_right #theme.active 271 background-position:-364px -25px; 272 273 274 275 276 /* 隐藏顶部区域 */ 277 #taskbar #taskbar_right #hide_topbar 278 display:inline-block; 279 width:30px; 280 height:25px; 281 margin-top:10px; 282 margin-right:5px; 283 background:url(./Images/show_topbar.png) 0px 0px no-repeat; 284 285 #taskbar #taskbar_right #hide_topbar:hover, 286 #taskbar #taskbar_right #hide_topbar.active 287 background-position:-0px -25px; 288 289 290 291 /* 二级标签及搜索栏*/ 292 #funcbar 293 height:4px; 294 background:#e5e5e5; 295 overflow:hidden; 296 297 /* 二级标签左侧*/ 298 #funcbar #funcbar_left 299 position:relative; 300 301 #funcbar #funcbar_left .second-tabs-container 302 position:absolute; 303 left:0px; 304 top:0px; 305 306 307 #funcbar #funcbar_left a 308 float:left; 309 display:block; 310 height:30px; 311 line-height:30px; 312 padding-left:15px; 313 margin-left:3px; 314 color:#383838; 315 text-decoration:none; 316 background:url(./Images/second_tabs_inactive.png) right center no-repeat; 317 318 #funcbar #funcbar_left a span 319 height:30px; 320 line-height:30px; 321 padding-right:15px; 322 cursor:pointer; 323 324 #funcbar #funcbar_left a.last 325 background:none; 326 327 #funcbar #funcbar_left a:hover, 328 #funcbar #funcbar_left a.active 329 color:#fff; 330 background:url(./Images/second_tabs_active.png) left center repeat-x; 331 332 333 /* 二级标签右侧*/ 334 #funcbar #funcbar_right 335 float:right; 336 padding:0px 10px; 337 338 #funcbar #funcbar_right .search 339 float:left; 340 display:inline-block !important; 341 display:inline; 342 padding-left:26px; 343 width:134px !important; 344 width:167px; 345 height:30px; 346 background:url(./Images/search_bg.png) left 0px no-repeat; 347 348 #funcbar #funcbar_right .search .search-body 349 padding-right:26px; 350 background:transparent url(./Images/search_bg.png) right -60px no-repeat; 351 position:relative; 352 353 #funcbar #funcbar_right .search .search-body .search-input 354 height:30px; 355 background:transparent url(./Images/search_bg.png) left -30px repeat-x; 356 357 #funcbar #funcbar_right .search .search-body .search-input input 358 width:100%; 359 height:16px; 360 margin-top:7px; 361 border:0px; 362 background:transparent; 363 padding-left:0px; 364 365 #funcbar #funcbar_right .search .search-clear 366 position:absolute; 367 top:0px; 368 right:10px; 369 width:16px; 370 height:30px; 371 background:transparent url(./Images/search_bg.png) right -90px no-repeat; 372 cursor:pointer; 373 374 375 #funcbar #funcbar_right .rss 376 display:inline-block; 377 height:30px; 378 line-height:30px; 379 color:#0d4485; 380 font-size:14px; 381 font-weight:bold; 382 text-decoration:none; 383 background:url(./Images/rss.png) left center no-repeat; 384 padding-left:20px; 385 margin-left:10px; 386 387 /* 主操作区域 */ 388 #center 389 width:100%; 390 height:100%; 391 overflow:hidden; 392 position:relative; 393 394 #center .tabs-panel 395 width:100%; 396 height:100%; 397 display:none; 398 399 #center .selected 400 display:block; 401 402 #center .tabs-panel iframe 403 width:100%; 404 height:100%; 405 406 407 #center #ie6_tips 408 width:100%; 409 height:40px; 410 line-height:40px; 411 background:#fdf4d9; 412 border-top:1px #fff solid; 413 overflow:hidden; 414 text-align:center; 415 font-size:20px; 416 color:#dc5802; 417 position:absolute; 418 z-index:1000; 419 420 #center #ie6_tips span.close 421 position:absolute; 422 right:20px; 423 424 425 /* 主界面状态栏 */ 426 #south 427 width:100%; 428 height:30px; 429 line-height:28px; 430 color:#000; 431 background:#e5e5e5; 432 overflow:hidden; 433 434 #south-line 435 436 margin: 0px auto; 437 border-top: 1px solid #ccc; 438 border-bottom: 1px solid #fff; 439 440 .south-separator 441 442 border-left: 1px solid #ccc; 443 border-right: 1px solid #fff; 444 margin-left: 3px; 445 margin-right: 3px; 446 447 448 /* 菜单面板 */ 449 #start_menu_panel 450 width:404px; 451 position:absolute; 452 left:3px; 453 top:132px; 454 display:none; 455 z-index:91000; 456 457 458 /* 菜单面板顶部和底部的阴影过度区域 */ 459 #start_menu_panel .panel-head 460 height:16px; 461 background:url(./Images/start_menu_panel_bg.png) 0px top no-repeat; 462 463 #start_menu_panel .panel-foot 464 height:16px; 465 background:url(./Images/start_menu_panel_bg.png) -808px bottom no-repeat; 466 467 468 /* 用户登录信息区域 */ 469 #start_menu_panel .panel-user 470 padding-left:22px; 471 padding-right:22px; 472 height:52px; 473 background:url(./Images/start_menu_panel_bg.png) 0px bottom no-repeat; 474 475 #start_menu_panel .panel-user .avatar 476 float:left; 477 padding-top:4px; 478 padding-left:4px; 479 width:42px !important; 480 height:42px !important; 481 width:46px; 482 height:46px; 483 background:url(./Images/avatar_bg.jpg) center center no-repeat; 484 cursor:pointer; 485 486 #start_menu_panel .panel-user .avatar img 487 width:38px; 488 height:38px; 489 490 #start_menu_panel .panel-user .avatar div.status_icon 491 width:16px; 492 height:16px; 493 position:absolute; 494 top:45px; 495 left:55px; 496 overflow:hidden; 497 498 #start_menu_panel .panel-user .avatar div.status_icon_1 499 background:url(./Images/online_status.png) 0px -7px no-repeat; 500 501 #start_menu_panel .panel-user .avatar div.status_icon_2 502 background:url(./Images/online_status.png) 0px -37px no-repeat; 503 504 #start_menu_panel .panel-user .avatar div.status_icon_3 505 background:url(./Images/online_status.png) 0px -97px no-repeat; 506 507 #start_menu_panel .panel-user .avatar div.status_icon_4 508 background:url(./Images/online_status.png) 0px -67px no-repeat; 509 510 #start_menu_panel .panel-user .avatar #on_status 511 width:100px; 512 display:none; 513 border:1px #b3b3b3 solid; 514 background:#fff url(./Images/on_status_bg.png) left top repeat-y; 515 position:absolute; 516 top:60px; 517 left:25px; 518 z-index:94000; 519 520 #start_menu_panel .panel-user .avatar #on_status a 521 display:block; 522 color:#393939; 523 background:url(./Images/online_status.png) left top no-repeat; 524 height:30px; 525 line-height:30px; 526 padding-left:25px; 527 text-decoration:none; 528 529 #start_menu_panel .panel-user .avatar #on_status a:hover 530 background-color:#e6ebf1; 531 532 #start_menu_panel .panel-user .avatar #on_status a.on_status_1 533 background-position:4px 0px; 534 535 #start_menu_panel .panel-user .avatar #on_status a.on_status_2 536 background-position:4px -30px; 537 538 #start_menu_panel .panel-user .avatar #on_status a.on_status_3 539 background-position:4px -90px; 540 541 #start_menu_panel .panel-user .avatar #on_status a.on_status_4 542 background-position:4px -60px; 543 544 #start_menu_panel .panel-user .name 545 float:left; 546 padding-top:15px; 547 padding-left:10px; 548 color:#0e4387; 549 font-size:14px; 550 font-weight:bold; 551 552 553 /* 菜单部分 */ 554 #start_menu_panel .panel-menu 555 padding-left:12px; 556 padding-right:12px; 557 background:url(./Images/start_menu_panel_bg.png) -404px top repeat-y; 558 559 560 /* 一级菜单 */ 561 #start_menu_panel .panel-menu #first_panel 562 padding:5px 0px; 563 width:200px; 564 565 566 #start_menu_panel .panel-menu #first_panel .scroll-up, 567 #start_menu_panel .panel-menu #first_panel .scroll-down 568 height:10px; 569 overflow:hidden; 570 cursor:pointer; 571 background:url(./Images/scroll_arrow.png) center 0px no-repeat; 572 573 574 #start_menu_panel .panel-menu #first_panel .scroll-up 575 background-position:center 0px; 576 577 #start_menu_panel .panel-menu #first_panel .scroll-down 578 background-position:center -10px; 579 580 #start_menu_panel .panel-menu #first_panel .scroll-up-hover 581 background-position:center -20px; 582 583 #start_menu_panel .panel-menu #first_panel .scroll-down-hover 584 background-position:center -30px; 585 586 587 #start_menu_panel .panel-menu #first_panel ul 588 list-style-type:none; 589 height:360px; 590 overflow:hidden; 591 position:relative; 592 left:0px; 593 top:0px; 594 z-index:93000; 595 596 597 #start_menu_panel .panel-menu #first_panel ul li 598 599 600 #start_menu_panel .panel-menu #first_panel ul li a 601 padding-left:10px; 602 padding-top:5px !important; 603 height:25px !important; 604 padding-top:5px; 605 height:30px; 606 line-height:20px; 607 display:block; 608 overflow:hidden; 609 text-decoration:none; 610 font-size:12px; 611 color:#000; 612 background:url(./Images/menu_bg.png) right top no-repeat; 613 614 615 #start_menu_panel .panel-menu #first_panel ul li a:hover, 616 #start_menu_panel .panel-menu #first_panel ul li a.active 617 color:#fff; 618 background-position:right -30px; 619 620 621 #sta