代码如下
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> tabs </title> <style type = "text/css">/ * remova o preenchimento da margem */ corpo, H1, H2, H3, H4, H5, H6, HR, P, BlockQuote, DL, DT, DD, Ul, OL, Li, Pre, formulário, Fieldset, Legend, Button, Entrada, Textarea, TH, TD {margem: 0; preenchimento: 0; }/ * Fonte padrão */corpo, botão, entrada, selecione, textarea {font: 12px/1.5/5b8b/4f53, Arial, sans-serif; } H1, H2, H3, H4, H5, H6 {Size da fonte: 100%; } endereço, cite, dfn, em, var {estilo font: normal; } Código, KBD, Pre, Samp {Font-Family: Courier Novo, Courier, Monospace; } pequena {font-size: 12px; } ul, ol {estilo de lista: nenhum; } a {decoração de texto: nenhum; } a: hover {decoração de texto: sublinhado; } sup {vertical-align: text-top; } sub {vertical-align: text-bottom; } legenda {color:#000; } fieldset, img {border: 0; } botão, entrada, selecione, textarea {font-size: 100%; } tabela {colapso de borda: colapso; espaçamento de borda: 0; } .col-main {float: esquerda; largura: 100%; altura min: 1px; } .col-sub, .col-extra {float: esquerda; } .Layout: depois, .Main-Wrap: After, .col-sub: depois, .col-extra: após {content: '/20'; exibição: bloco; altura: 0; claro: ambos; } .Layout, .Main-Wrap, .col-sub, .col-ex-extra {zoom: 1; } / * Recursos comuns * / .Hidden {Display: Nenhum; } .invisible {visibilidade: Hidden; } / * Remova o float * / .clear {display: block; altura: 0; estouro: oculto; claro: ambos; } .clearfix: após {content: '/20'; exibição: bloco; altura: 0; claro: ambos; } .clearfix { *zoom: 1; } / * Para navegadores não do IE, também exibe a barra de rolagem vertical por padrão, para impedir que o lampejo causado pela barra de rolagem * / html {overflow-y: roll; } / * Estilos de link padrão * / a: link {color: #003399; } a: visitado {color: #123689;} a: hover {color: #ff6600;} </style> </head> <body> <style type = "text/css"> body {altura: 1000px; } .dialog-wrap, .dialog {display: nenhum; } .Dialog-wrap {Position: Absolute; Top: 0px; Esquerda: 0px; largura: 100%; Z-Index: 99; Antecedentes:#000; } .dialog {borda: 10px; Antecedentes: URL (imagens/Welcome91981.png) No-repetir; Z-Index: 199; Posição: fixado; _Position: absoluto; Largura: 451px; Altura: 313px; TOP: 50%; Esquerda: 50%; margem: -156px 0px 0px -225px; Radio de fronteira: 10px; Alinhamento de texto: esquerda; } .dialog .city-box {position: relativo; largura: 100%; Altura: 100%} .dialog .close {posição: absoluto; Largura: 18px; Altura: 18px; Top: 16px; Direita: 16px; Z-Index: 205; } .dialog .close a {display: block; largura: 100%; Altura: 100%; } .CityBox {Posição: Absoluto; Cursor: Pointer; Top: 143px; esquerda: 212px; altura: 30px; altura da linha: 30px; font-size: 16px; cor:#f4396d; preenchimento: 0 30px 0 10px; display: inline-block; Z-Index: 200; } .CityBox Span {Width: 90px; Overflow: Hidden; White-Space: Nowrap; Text-overflow: elipsis; Display: Inline-Block} .HotCityBox {Posição: Absoluto; largura: 272px; topo: 160px; esquerda: 170px; Display: Nenhum; Z-Index: 200; .Togle {cor: #fff; posição: absoluto; esquerda: 50%; tamanho da fonte: 28px; z-índice: 200;} .Togleborder {Posição: Absolute; esquerda: 50%; font-size: 28px; cor: #ddd; top: 3px; z-index: 200;} 1px 1px #333; topo: 22px; posição: absoluto; largura: 270px; borda: 1px sólido #ddd; Z-Index: 202;} .HotCityList P {preenchimento: 5px 0} .HotCityList Pa {preenchimento: 0 8px; altura: 22px; altura da linha: 22px; colormat:#333; font-size: 14px; margem: 3px 5px; tapt-align; PA: Mur mais {Background:#f55583; cor: #fff; decoração de texto: nenhum} .Morecity {Border-top: 1px Solid#C6C6C6; Hight: 30px; Linha-HEAT: 30px; Text-align: Direito;}. .CityConfirm {Posição: Absoluto; Cursor: Pointer; Largura: 168px; Altura: 48px; Esquerda: 137px; inferior: 22px;} .cityConfirm a {largura: 168px; altura: 48px; display: block} .evet {display: nenhum; Posição: Absoluto; Top: 0px; Esquerda: 0px; largura: 100%; Altura: 100%; Z-Index: 198; } </style> <div> </div> <div> <div> <div> <a href = "javascript: close_dialog ();" rel = "Nofollow externo"> </a> </div> <div> <pan> 北京 </span> </div> <div> <div> ◊ </div> <div> ♦ </div> <div> <p> <a href = ""> 北京 </a> <a href = ""> 上海 <aa> href = ""> 杭州 </a> <a href = ""> 西安 </a> <a href = ""> 成都 </a> <a href = ""> 重庆 </a> <a href = ""> 武汉 </a> <a href = ""> 南京 </a> href = ""> 更多城市 >> </a> </div> </div> </div> <div> <a href = ""> </a> </div> <div> </div> </div> </div> <script type = "text/javascript" src = "jquery.js"> </script> $ ('corpo'). Hight (); $ ('. Dialog-wrap'). CSS ({'Height': H, 'Opacity': 0.5, 'Display': 'Block'}); $ ('. diálogo'). show (); } function close_dialog () {$ ('. diálogo, .dialog-wrap'). hide (); } $ ('. $ ('. Evet, .Dialog-wrap'). Clique (function () {$ ('. //diálogo(); </script> <p onclick = "dialog ()" style = "cursor: ponteiro"> 点击这里看效果 </p> <br> 我是文字我是文字文字我字我是文字我是文字 </body> </html>