代码如下 ：
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 탭 </title> <style type = "text/css">/ * 마진 패딩 제거 */ Body, H1, H2, H3, H4, H5, H6, HR, P, Blockquote, DL, DT, DD, UL, OL, Li, FOR, FIELDSET, LEGEND, BUTCIL, INPUT, TEXTAREA, TH, TD {마진 : 0; 패딩 : 0; }/ * 기본 글꼴 */바디, 버튼, 입력, 선택, textArea {font : 12px/1.5/5b8b/4f53, Arial, Sans-Serif; } H1, H2, H3, H4, H5, H6 {Font-Size : 100%; } 주소, 인용, dfn, em, var {font-style : normal; } Code, KBD, PRE, SAMP {Font-Family : Courier New, Courier, Monospace; } 작은 {font-size : 12px; } ul, ol {목록 스타일 : 없음; } a {텍스트 설명 : 없음; } a : 호버 {텍스트 결정 : 밑줄; } sup {vertical-align : 텍스트 탑; } sub {vertical-align : text-bottom; } 범례 {색상 :#000; } fieldset, img {테두리 : 0; } 버튼, 입력, 선택, TextArea {font-size : 100%; } 표 {Border-Collapse : 붕괴; 국경 간격 : 0; } .col-main {float : 왼쪽; 너비 : 100%; Min-Height : 1px; } .col-sub, .col-extra {float : 왼쪽; } .layout : 후, .main-wrap : 후, .col-sub : after, .col-extra : {content : '/20'; 디스플레이 : 블록; 높이 : 0; Clear : 둘 다; } .layout, .main-wrap, .col-sub, .col-extra {Zoom : 1; } / * 공통 기능 * / .hidden {디스플레이 : 없음; }. inivisible {가시성 : 숨겨진; } / * float를 제거하십시오 * / .Clear {display : block; 높이 : 0; 오버플로 : 숨겨진; Clear : 둘 다; } .clearFix : {content : '/20'이후; 디스플레이 : 블록; 높이 : 0; Clear : 둘 다; } .ClearFix { *Zoom : 1; } / * 비 IE 브라우저의 경우 스크롤 막대 * / html {Overflow-Y : Scroll; } / * 기본 링크 스타일 * / a : 링크 {색상 : #003399; } a : 방문 {색상 : #123689;} a : hover {color : #ff6600;} </style> </head> <body> <style type = "text/css"> body {height : 1000px; } .dialog-wrap, .dialog {display : none; } .dialog-wrap {위치 : 절대; 상단 : 0px; 왼쪽 : 0px; 너비 : 100%; Z- 인덱스 : 99; 배경 :#000; } .dialog {테두리 : 10px; 배경 : URL (이미지/환영 91981.png) 비 반복; Z- 인덱스 : 199; 위치 : 고정; _position : 절대; 너비 : 451px; 높이 : 313px; 상단 : 50%; 왼쪽 : 50%; 여백 : -156px 0px 0px -225px; Border-Radius : 10px; 텍스트-정렬 : 왼쪽; } .dialog .city-box {위치 : 상대; 너비 : 100%; 높이 : 100%} .dialog .close {위치 : 절대; 너비 : 18px; 높이 : 18px; 상단 : 16px; 오른쪽 : 16px; Z- 인덱스 : 205; } .dialog .close a {display : block; 너비 : 100%; 높이 : 100%; . Z- 인덱스 : 200; . .Togle {색상 : #fff; 위치 : 절대; 왼쪽; 왼쪽 : 50%; 글꼴 크기 : 28px; z-index : 200;} .Togleborder {위치 : 절대; 왼쪽 : 50%; 글꼴 크기 : 28px; 색상 : #ddd; 상단 : 3px; z-index : 200;} .HotCityList {배경 : #fff; Border-Radius : 5px; Box-Shadow : 1px 1px 1px #333; 상단 : 22px; 위치 : 절대; 너비 : 270px; 경계 : 1px solid #ddd; z-index : 202;} .HotCityList P {패딩 : 5px 0} .HotCityList PA {패딩 : 0 8px; 높이 : 22px; 선-높이 : 22px; 컬러 :#333; font-size : 14px; 마진 : 3PX 5PX; 텍스트-알렉션; PA : Hover {배경 :#f55583; 색상 : #fff; 텍스트-결정 : none} .morecity {border-top : 1px solid#c6c6c6; height : 30px; line-height : 30px; 텍스트-알림 : 오른쪽;}. .cityConfirm {위치 : 절대; 커서 : 포인터; 너비 : 168px; 높이 : 48px; 왼쪽 : 137px; 하단 : 22px;} .cityConfirm a {너비 : 168px; 위치 : 절대; 상단 : 0px; 왼쪽 : 0px; 너비 : 100%; 높이 : 100%; Z- 인덱스 : 198; . rel = "외부 nofollow"> </a> </div> <div> <span> </span> </div> <div> <div> </div> <div> ♦ </div> <div> <p> <a href = ""> </a> <a href = ""> 上海 上海 </a> <a </a> </a> <a <a <a <a <a <a <a </a> </a> </a> </a> href = ""> </a> <a href = ""> </a> </a> <a href = ""> </a> <a href = ""> 郑州 </a> <a href = "" "> </a> <a href ="> 青岛 </a> <a href = "> <a href =" ""<a href = "> <a href = ""> </a> <a href = "" "> </a> </a> <a href =" "> </a> <a href =" "> </a> <a href =" ""> </a> <a href = "" ""> <a href = </a> </a> </a> </a> </a> </a> </a> href = ""> 更多城市 更多城市 >> </a> </div> </div> </div> </div> <div> < "" "" "> </a> </div> <div> </div> </div> </div> <script type ="text/javaScript "src ="jquery.js "> $ ( 'body'). height (); $ ( '. Dialog-Wrap'). CSS ({ 'height': h, '불투명도': 0.5, 'display': 'block'}); $ ( '. 대화 상자'). show (); } function close_dialog () {$ ( '. 대화 상자, .dialog-wrap'). hide (); } $ ( '. citybox'). 클릭 (function () {$ ( '. HotCityBox, .evet'). show ();}); $ ( '. evet, .dialog-wrap'). click (function () {$ ( '. hotcitybox, .evet'). hide (); $ ( '. evet'). hide ();}); //대화(); </script> <p onclick = "dialog ()"Style = "Cursor : Pointer"> 点击这里看效果 </p> <br> </body> </html>