代码如下：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> tabs </title> <style type = "text/css">/ *マージンパディングを削除 */ */ボディ、H1、H2、H3、H4、H5、H6、HR、P、BlockQuote、DL、DT、DD、UL、OL、LI、Pre、Form、FieldSet、Legend、Button、Input、Textarea、TH、TD {MARGIN：0;パディング：0; }/ * default font */body、button、input、select、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; } 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; } legent {color：＃000; } fieldset、img {border：0; }ボタン、入力、select、textarea {font-size：100％; } table {border-collapse：collapse;境界面：0; } .col-main {float：left;幅：100％; MIN-HEIGHT：1PX; } .col-sub、.col-extra {float：left; } .layout：after、.main-rap：after、.col-sub：after、.col-extra：after {content： '/20';表示：ブロック;高さ：0;クリア：両方; } .layout、.main-rap、.col-sub、.col-extra {zoom：1; } / *共通機能 * / .hidden {display：none; } .invisible {visibility：hidden; } / * float * / .clear {display：block;高さ：0;オーバーフロー：隠し;クリア：両方; } .clearfix：after {content： '/20';表示：ブロック;高さ：0;クリア：両方; } .clearfix { *Zoom：1; } / *非IEブラウザの場合は、デフォルトで垂直スクロールバーも表示され、スクロールバーによって引き起こされるフリッカーを防ぎます * / html {overflow-y：scroll; } / *デフォルトリンクスタイル * / a：link {color：＃003399; } a：Visited {color：＃123689;} a：hover {color：＃ff6600;} </style> </head> <body> <stylet = "text/css"> body {height：1000px; } .dialog-wrap、.dialog {display：none; } .dialog-wrap {position：absolute;上：0px;左：0px;幅：100％; z-index：99;背景：＃000; } .dialog {border：10px;背景：url（images/welcome91981.png）繰り返し。 Z-Index：199;位置：修正; _ポジション：絶対;幅：451px;高さ：313px;トップ：50％;左：50％;マージン：-156px 0px 0px -225px; Border-Radius：10px; Text-align：left; } .dialog .city-box {position：relative;幅：100％;高さ：100％} .dialog .close {position：absolute;幅：18px;高さ：18px;トップ：16px;右：16px; z-index：205; } .dialog .close a {display：block;幅：100％;高さ：100％; } .citybox {position：absolute; cursor：pointer; top：143px; left：212px; height：30px; line-height：30px; font-size：16px; color：＃f4396d;パディング：0 30px 0 10px; display：inline-block; Z-Index：200; } .citybox span {width：90px; hidden; white-space：nowrap; text-overflow：ellipsis; display：inline-block} .hotcitybox {apposite：absolute; width：272px; top：160px; left：170px; disply：none; z-index：200;}} .togle {color：#fff; position：absolute; left：50％; font-size：28px; z-index：200;}。 .hotcityList {background：#fff; border-radius：5px; box-shadow：1px 1px 1px＃333; top：22px; position：absolute; width：270px; border：1px solid＃ddd; z-index：202;} .hotcitylist p {padding：5px 0} .hotcitylist pa {padding：0 8px; height：22px; line-height：22px; color：＃333; font-size：14px; margin：margin：3px 5px; text-align：inline-blocklign; disply; PA：hover {background：＃f55583; color：#fff; text-decoration：none} .morecity {border-top：1px solid＃c6c6c6; height：30px; line-height：30px; text-align：right;} .morecity a {color：＃f5583; f5583; font-size：14px; Maggin .cityconfirm {position：absolute; cursor：pointer; width：168px; height：48px; left：137px; bottom：22px;} .cityconfirm a {width：168px; height：48px; display} .evet {diblss：neny：none;位置：絶対;上：0px;左：0px;幅：100％;高さ：100％; Z-Index：198; } </style> <div> </div> <div> <div> <div> <a href = "javascript：close_dialog（）;" rel = "external nofollow"> </a> </div> <div> <span> </span> </div> <div> </div> <div>♦</div> <div> <p> <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 = "">济南href = "">更多城市>> </a> </div> </div> </div> <div> <a href = ""> </a> </div> </div> </div> </div> <script = "text/javascript" src = "jquery.js"> $（ 'body'）。height（）; $（'。Dialog-rap '） $（ '。ダイアログ'）。show（）; } function close_dialog（）{$（ '。ダイアログ、.dialog-rap'）。hide（）; } $（ '。CityBox'）。click（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>