代码如下 ：
<! docType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <titels> Registerkarten </title> <style type = "text/css">/ * Randpadding entfernen */ Body, H1, H2, H3, H4, H5, H6, Hr, P, Blockquote, DL, DT, DD, UL, OL, Li, Pre, Form, Fieldset, Legende, Taste, Eingabe, TextArea, Th, TD {Rand: 0; Polsterung: 0; }/ * Standard-Schrift */Körper, Schaltfläche, Eingabe, SELECT, textArea {Schrift: 12px/1.5/5b8b/4f53, Arial, sans-serif; } H1, H2, H3, H4, H5, H6 {Schriftgröße: 100%; } Adresse, zitieren, dfn, em, var {font-style: normal; } Code, KBD, PRE, Samp {Schriftfamilie: Courier New, Courier, Monospace; } small {Schriftgröße: 12px; } ul, ol {Listenstil: Keine; } a {textdekoration: keine; } a: Hover {Textdekoration: Unterstreichung; } sup {vertikal-align: text-top; } sub {vertikal-align: text bottom; } Legende {Farbe:#000; } fieldset, img {Border: 0; } Schaltfläche, eingeben, auswählen, textarea {Schriftgröße: 100%; } table {Border-Collapse: Zusammenbruch; Grenzabteilung: 0; } .col-main {float: links; Breite: 100%; min-hohe: 1px; } .col-sub, .col-extra {float: links; } .layout: Nach,. Anzeige: Block; Höhe: 0; klar: beides; } .layout, .main-wrap, .col-sub, .col-extra {zoom: 1; } / * Gemeinsame Funktionen * / .hidden {display: keine; } .invisible {Sichtbarkeit: versteckt; } / * Float * / .clear {display: block; Höhe: 0; Überlauf: versteckt; klar: beides; } .clearFix: After {Inhalt: '/20'; Anzeige: Block; Höhe: 0; klar: beides; } .clearFix { *Zoom: 1; } / * Für Nicht-IE-Browser zeigen auch standardmäßig die vertikale Bildlaufleiste an, um das Flackern zu verhindern, das durch die Scroll-Balken * / html {Überlauf-y: Scroll; } / * Standard -Link -Stile * / A: Link {Farbe: #003399; } a: besucht {color: #123689;} a: hover {color: #ff6600;} </style> </head> <body> <style type = "text/css"> body {Höhe: 1000px; } .dialog-wrap, .dialog {display: keine; } .Dialog-wrap {Position: absolut; Oben: 0px; links: 0px; Breite: 100%; Z-Index: 99; Hintergrund:#000; } .Dialog {Border: 10px; Hintergrund: URL (Bilder/Welcome91981.png) No-Repeat; Z-Index: 199; Position: fest; _position: absolut; Breite: 451px; Höhe: 313px; Top: 50%; Links: 50%; Rand: -156px 0px 0px -225px; Border-Radius: 10px; Text-Align: Links; } .Dialog .City-box {Position: relativ; Breite: 100%; Höhe: 100%} .Dialog .CLOSE {Position: absolut; Breite: 18px; Höhe: 18px; Top: 16px; Rechts: 16px; Z-Index: 205; } .Dialog .CLOSE a {display: block; Breite: 100%; Höhe: 100%; } .Citybox {Position: Absolute; Cursor: Pointer; oben: 143px; links: 212px; Höhe: 30px; Zeilenhöhe: 30px; Schriftgröße: 16px; Farbe:#f4396d; Polster: 0 30px 0 10px; Anzeige: Inline-Block; Z-Index: 200; } .Citybox span {width: 90px; Überlauf: versteckt; weißer Raum: nowrap; text-overflow: ellipsis; Anzeige: Inline-Block} .HotCitybox {Position: Absolute; Width: 272px; Top: 160px; links: 170px; Anzeige: None; Z-Index: 200; Z-200; Z-200; .Togle {color: #fff; Position: absolut; links: 50%; Schriftgröße: 28px; Z-Index: 200;} .Togleborder {Position: absolut; links: 50%; Schriftgröße: 28px; Farbe: #ddd; ober: 3px; Z-Index: 200;} .HotCityList {Hintergrund: #fff; Border-Radius: 5px; Box-Shadow: 1PX 1PX 1PX #333; Oben: 22px; Position: Absolut; Breite: 270px; Grenze: 1PX Solid #ddd; Z-Index: 202;} .HotCityList P {Padding: 5px 0} .hotCityList Pa {Padding: 0 8px; Höhe: 22px; Zeilenhöhe: 22px; Farbe:#333; Schriftgröße: 14px; Margin: 3px 5px; PA: Hover {Hintergrund:#f55583; Farbe: #fff; Textdekoration: Keine} .Morecity {Border-Top: 1px Solid#C6c6c6; Höhe: 30px; Zeilenhöhe: 30px; Text-Align: Right; .CityConfirm {Position: Absolute; Cursor: Zeiger; Breite: 168px; Höhe: 48px; links: 137px; unten: 22px;} .CityConfirm a {width: 168px; Höhe: 48px; Anzeige: Block} .evet {display: none; none; Position: absolut; Oben: 0px; links: 0px; Breite: 100%; Höhe: 100%; Z-Index: 198; } </style> <div> </div> <div> <div> <div> <a href = "javaScript: close_dialog ();" rel = "externe nofollow"> </a> </div> <div> <span> 北京 </span> </div> <div> <div> ◊ </div> <div> ♦ </div> <div> <p> <a <a href = ""> 北京 </a> <a href = "上海 </a> </a> <a href 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 href = "> 济南 </a> <a href =" href = ""> 更多城市 >> </a> </div> </div> </div> <div> <a href = "> </a> </div> </div> </div> </div> <script type =" text/javascript "src =" jquery.js "> </script tection =" text/javascript "> function.js"> </</</</</</<Scripts "> </</</<Scripts"> </</</<Scripts "> </</</<Scripts" tection = " $ ('Körper'). Höhe (); $ ('. Dialogwrap'). $ ('. Dialog'). show (); } function close_dialog () {$ ('. Dialog, .Dialog-wrap'). hide (); } $ ('. Citybox'). Click (function () {$ ('. HotCityBox, .evet'). show ();}); $ ('. Evet, .Dialog-wrap'). click (function () {$ ('. HotCitybox, .evet'). hide (); $ ('. Evet'). hide ();}); //Dialog(); </script> <p onclick = "dialog ()" style = "cursor: pointer"> 点击这里看效果 </p> <br> 我是文字我是文字文字我字我是文字我是文字 </body> </html>