：
<! doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tight> onglets </ title> <style type = "text / css"> / * supprimer le rembourrage de la marge * / Corps, H1, H2, H3, H4, H5, H6, HR, P, Blockquote, DL, DT, DD, UL, OL, LI, Pre, Form, Fieldset, légende, bouton, entrée, TextArea, Th, TD {margin: 0; rembourrage: 0; } / * Font par défaut * / corps, bouton, entrée, sélection, textarea {font: 12px / 1.5 / 5b8b / 4f53, arial, sans-serif; } H1, H2, H3, H4, H5, H6 {taille de police: 100%; } adresse, cite, dfn, em, var {style de police: normal; } code, kbd, pre, samp {Font-Family: Courier New, Courier, Monospace; } Small {Font-Size: 12px; } ul, ol {list-style: Aucun; } a {text-décoration: aucun; } A: Hover {text-décoration: soulignement; } sup {Vertical-Align: Text-top; } sub {Vertical-Align: Text-Bottom; } légende {couleur: # 000; } fieldset, img {border: 0; } bouton, entrée, sélection, textArea {Font-Size: 100%; } Tableau {Border-Collapse: effondrement; Espacement des bordures: 0; } .col-main {float: Left; Largeur: 100%; Min-Height: 1px; } .col-sub, .col-extra {float: left; } .layout: after, .main-wap: after, .col-sub: after, .col-extra: after {content: '/ 20'; Affichage: bloc; hauteur: 0; Clear: les deux; } .layout, .main-wap, .col-sub, .col-extra {zoom: 1; } / * Fonctionnalités communes * / .Hidden {affichage: aucun; } .InVisible {Visibilité: Hidden; } / * Supprimer float * / .clear {affichage: block; hauteur: 0; débordement: caché; Clear: les deux; } .clearFix: après {contenu: '/ 20'; Affichage: bloc; hauteur: 0; Clear: les deux; } .clearfix {* zoom: 1; } / * Pour les navigateurs non IE, affichez également la barre de défilement verticale par défaut, pour empêcher le scintillement causé par la barre de défilement * / html {Overflow-y: Scroll; } / * Styles de liaison par défaut * / a: lien {couleur: # 003399; } A: Visité {Color: # 123689;} A: Hover {Color: # ff6600;} </ Style> </ Head> <Body> <style type = "Text / CSS"> Body {Height: 1000px; } .dialog-wap, .dialog {affiche: aucun; } .dialog-wrap {position: absolue; En haut: 0px; gauche: 0px; Largeur: 100%; Z-Index: 99; Contexte: # 000; } .dialog {border: 10px; Contexte: URL (images / bienvenue91981.png) sans répétition; Z-Index: 199; Position: fixe; _Position: Absolute; Largeur: 451px; hauteur: 313px; en haut: 50%; Gauche: 50%; marge: -156px 0px 0px -225px; Border-Radius: 10px; Text-Align: à gauche; } .dialog .City-box {position: relative; Largeur: 100%; hauteur: 100%} .dialog .close {position: absolue; Largeur: 18px; hauteur: 18px; en haut: 16px; À droite: 16px; Z-Index: 205; } .dialog .close un {affichage: bloc; Largeur: 100%; hauteur: 100%; } .Citybox {position: absolue; curseur: pointeur; en haut: 143px; gauche: 212px; hauteur: 30px; ligne-height: 30px; poutre-taille: 16px; couleur: # f4396d; rembourrage: 0 30px 0 10px; affichage: bloc en ligne; Z-Index: 200; } .CityBox Span {width: 90px; overflow: Hidden; white-espace: Nowrap; text-overflow: ellipsis; affichage: block en ligne} .hotcitybox {position: absolu; largeur: 272px; top: 160px; gauche: 170px; affichage: non; z-index: 200;}; .Togle {Color: #fff; Position: Absolute; Left: 50%; Font-Size: 28px; Z-index: 200;} .togleBorder {position: Absolute; Left: 50%; Font-Size: 28px; couleur: #ddd; top: 3px; z-index: 200;} .HotCityList {Background: #FFF; Border-Radius: 5px; Box-Shadow: 1px 1px 1px # 333; top: 22px; position: absolu; largeur: 270px; bordure: 1px solide #ddd; Z-index: 202;} .hotcityList p {padding: 5px 0} .hotcityList pa {padding: 0 8px; hauteur: 22px; line-height: 22px; couleur: # 333; Font-size: 14px; margin: 3px 5px; text-aligne: Center; affichage: inline-block; flottant: left}. PA: Hover {Background: # F55583; Couleur: #FFF; Text-Decoration: Aucun} .MoreCity {Border-top: 1Px Solid # C6C6C6; High: 30px; Line-Height: 30px; Text-Align: Right;} .Morecity A {Color: # F55583; FONT-SIze: 14px; margin-right: 10px} .CityConfirm {position: absolue; curseur: pointeur; largeur: 168px; hauteur: 48px; gauche: 137px; en bas: 22px;} .CityConfirm a {width: 168px; hauteur: 48px; affichage: block} .evet {affiche: aucun; Position: absolue; En haut: 0px; gauche: 0px; Largeur: 100%; hauteur: 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 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> <af = ">" <a href = ""> 重庆 </a> <a 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 / javascrip $ ('corps'). hauteur (); $ ('. Dialog-wrap'). CSS ({'hauteur': h, 'opacité': 0.5, 'affiche': 'block'}); $ ('. Dialog'). Show (); } fonction close_dialog () {$ ('. Dialog, .dialog-wap'). hide (); } $ ('. Citybox'). Cliquez sur (fonction () {$ ('. HotCityBox, .EVET'). Show ();}); $ ('. evet, .dialog-wap'). cliquez sur (function () {$ ('. hotcitybox, .evet'). hide (); $ ('. evet'). hide ();}); //dialogue(); </ script> <p onclick = "Dialog ()" style = "curseur: pointer"> 点击这里看效果 </p> <br> 我是文字我是文字文字我字我是文字我是文字 </ body> </html>