代码如下 ：
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Tabs </title> <style type = "text/css">/ * eliminar el acolchado de margen */ Cuerpo, H1, H2, H3, H4, H5, H6, HR, P, Blockquote, DL, DT, DD, UL, OL, Li, Pre, Forma, Fieldset, Leyenda, Botón, Entrada, Textea, TH, TD {Margen: 0; relleno: 0; }/ * Fuente predeterminada */cuerpo, botón, entrada, seleccionar, TextARea {Font: 12px/1.5/5b8b/4f53, Arial, sans-serif; } H1, H2, H3, H4, H5, H6 {Font-Size: 100%; } dirección, citar, dfn, em, var {font-style: normal; } Código, KBD, pre, SAMP {Font-Family: Courier New, Courier, Monospace; } Small {Font-Size: 12px; } ul, ol {list-style: none; } a {Text-Decoration: None; } A: Hover {Text-Decoration: Underline; } sup {vertical-align: text-top; } sub {vertical-align: text-bottom; } leyenda {color:#000; } Fieldset, img {border: 0; } botón, entrada, seleccionar, TextARea {Font-Size: 100%; } tabla {border-colapso: colapso; espaciado fronterizo: 0; } .col-main {float: izquierda; Ancho: 100%; Min-altura: 1px; } .col-sub, .col-Extra {float: izquierda; } .laYout: After, .main-wrap: después, .col-sub: después, .col-extrra: después {content: '/20'; Pantalla: bloque; Altura: 0; claro: ambos; } .layout, .Main-Wrap, .Col-Sub, .Col-Extra {Zoom: 1; } / * Características comunes * / .hidden {display: none; } .invisible {Visibilidad: Hidden; } / * Eliminar float * / .clear {display: block; Altura: 0; desbordamiento: oculto; claro: ambos; } .clearfix: After {content: '/20'; Pantalla: bloque; Altura: 0; claro: ambos; } .clearfix { *zoom: 1; } / * Para los navegadores que no son IE también muestran la barra de desplazamiento vertical de forma predeterminada, para evitar el parpadeo causado por la barra de desplazamiento * / html {Overflow-y: scroll; } / * Estilos de enlace predeterminado * / a: enlace {color: #003399; } a: Visited {Color: #123689;} a: hover {color: #ff6600;} </yle> </head> <body> <style type = "text/css"> cuerpo {altura: 1000px; } .dialog-wrap, .dialog {display: none; } .dialog-wrap {posición: absoluto; arriba: 0px; Izquierda: 0px; Ancho: 100%; Índice Z: 99; Antecedentes:#000; } .dialog {border: 10px; Antecedentes: URL (Images/Welcome91981.png) No Repeat; Index Z: 199; Posición: fijo; _Position: Absoluto; Ancho: 451px; Altura: 313px; arriba: 50%; Izquierda: 50%; margen: -156px 0px 0px -225px; Border-Radius: 10px; Text-Align: Izquierda; } .dialog .city-box {posición: relativo; Ancho: 100%; altura: 100%} .dialog .close {posición: absoluto; Ancho: 18px; Altura: 18px; arriba: 16px; Derecha: 16px; índice z: 205; } .dialog .close a {pantalla: bloque; Ancho: 100%; Altura: 100%; } .citybox {posición: absoluto; cursor: pointer; arriba: 143px; izquierda: 212px; altura: 30px; línea-octava: 30px; font-size: 16px; color:#f4396d; relleno: 0 30px 0 10px; Display: Inline-Block; Index Z: 200; } .citybox span {ancho: 90px; desbordamiento: oculto; espacio blanco: nowrap; text-overflow: ellipsis; display: inline-block} .hotcitybox {posición: absoluto; width: 272px; top: 160px; izquierda: 170px; display: none; z-index: 200;} .Togle {color: #fff; posición: absoluto; izquierda: 50%; font-size: 28px; z-odex: 200;} .togleborder {posición: absoluto; izquierda: 50%; font-size: 28px; color: #ddd; top: 3px; z-index: 200;} .hotcityList {fondo: #fff; border-radio: 5px; box-shadow: 1px 1px 1px #333; arriba: 22px; posición: absoluto; ancho: 270px; borde: 1px sólido #ddd; z-index: 202;} .hotcityList p {relleno: 5px 0} .hotcityList pa {padding: 0 8px; altura: 22px; line-height: 22px; color:#333; font-size: 14px; margin: 3px 5px; text-align: center; display: inline-bloock; lefting: lobiz:}. PA: Hover {fondo:#F555583; color: #fff; Text-Decoration: Ninguno} .Morecity {Border-top: 1px sólido#c6c6c6; altura: 30px; line-height: 30px; text-align: right;} .morecity a {color:#f555583; font-size: 14px; margin-right; .cityconfirm {posición: absoluto; cursor: pointer; ancho: 168px; altura: 48px; izquierda: 137px; fondo: 22px;} .cityconfirm a {ancho: 168px; altura: 48px; display: block} .Evet {pantalla: Ninguno; Posición: Absoluto; arriba: 0px; Izquierda: 0px; Ancho: 100%; Altura: 100%; Index Z: 198; } </style> <div> </div> <div> <div> <div> <a href = "javascript: cerrador_dialog ();" rel = "nofollow externo"> </a> </div> <viv> <sp> <span> 北京 </span> </div> <div> <div> ◊ </div> <div> ♦ </div> <div> <p> <a href = ""> 北京 </a> <a href = ""> 上海 </a> <a href = "> 天津 </a> <a> href = ""> 杭州 </a> <a href = ""> 西安 </a> <a href = ""> 成都 </a> <a href = ""> 郑州 </a> <a href = ""> 厦门 </a> <a href = "> 青岛 </a> <a href ="> 深圳 </a> <a href = ">"> 太原 <a> <a> <a> <a href = "" "> 重庆 </a> <a href =" "> 武汉 </a> <a href =" "> 南京 </a> <a href =" "> 广州 </a> <a href =" "> 沈阳 </a> <a href ="> 济南 </a> <a href = "> 哈尔滨 </a> </p href = "" "> 更多城市 >> </a> </iv> </div> </div> <viv> <viv> <a href =" "> </a> </div> <viv> </div> </biv> </div> <brive <script type =" text/javaScript "src =" jQuery.js "> </script> <script type =" text/javascript "> function" src = "jQuery.js"> </script> <script type = "text/javascript"> function "n. $ ('cuerpo'). Height (); $ ('. Dialog-Wrap'). CSS ({'altura': h, 'opacidad': 0.5, 'Display': 'Block'}); $ ('. Dialog'). Show (); } function Close_dialog () {$ ('. Dialog, .dialog-wrap'). hide (); } $ ('. CityBox'). Click (function () {$ ('. HotCityBox, .Evet'). Show ();}); $ ('. //diálogo(); </script> <p onClick = "dialog ()" style = "cursor: pointer"> 点击这里看效果 </p> <br> 我是文字我是文字文字我字我是文字我是文字 </body> </html>