代码如下 ：
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> вкладки </title> <style type = "text/css">/ * Удалите поправку *// Body, 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; }/ * Font по умолчанию */корпус, кнопка, вход, выберите, 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; } Legend {Color:#000; } fieldset, img {border: 0; } кнопка, вход, выберите, TextARea {font-size: 100%; } таблица {Border-Collapse: Collapsse; Расхождение границы: 0; } .col-main {float: left; Ширина: 100%; Мин-высот: 1px; } .col-sub, .col-extra {float: left; }. дисплей: блок; высота: 0; ясно: оба; } .layout, .main-wrap, .col-sub, .col-extra {Zoom: 1; } / * Общие функции * / .hidden {display: none; } .Invisible {видимость: hidden; } / * Удалить float * / .clear {display: block; высота: 0; переполнение: скрыто; ясно: оба; } .clearfix: после {content: '/20'; дисплей: блок; высота: 0; ясно: оба; } .clearfix { *Zoom: 1; } / * Для браузеров не-IE также по умолчанию также отображают вертикальную полосу прокрутки, чтобы предотвратить мерцание, вызванное стержней прокрутки * / html {Oupflow-y: Scroll; } / * Стили ссылки по умолчанию * / a: link {color: #003399; } a: посещение {color: #123689;} a: Hover {color: #ff6600;} </style> </head> <body> <style type = "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/Werving91981.png) без повторного перепонки; Z-Index: 199; позиция: исправлена; _position: абсолютно; Ширина: 451px; Высота: 313px; Верх: 50%; Слева: 50%; Маржа: -156px 0px 0px -225px; граница-радий: 10px; текстовый авария: слева; } .dialog .city-box {позиция: относительно; Ширина: 100%; высота: 100%} .dialog .close {position: Absolute; Ширина: 18px; Высота: 18px; Верх: 16px; Справа: 16px; Z-Index: 205; } .dialog .close a {display: block; Ширина: 100%; высота: 100%; } .citybox {position: Absolute; Coursor: Pointer; Top: 143px; слева: 212px; высота: 30px; линейная-высота: 30px; размер шрифта: 16px; цвет:#f4396d; Padding: 0 30px 0 10px; дисплей: встроенный блок; Z-Index: 200; } .citybox span {width: 90px; overflow: hidden; белое пространство: nowrap; text-overflow: ellipsis; display: inline-block} .hotcitybox {положение: абсолют; ширина: 272px; top: 160px; слева: 170px; dise: z-z-index: 200;}. .togle {color: #fff; позиция: абсолютно; слева: 50%; размер Font: 28px; z-index: 200;} .togleborder {позиция: абсолют; слева: 50%; размер шрифта: 28px; color: #ddd; top: 3px; z-index: 200;} .hotcitylist {fool: #ff; 1px 1px #333; Top: 22px; положение: абсолютная; ширина: 270px; граница: 1px solid #ddd; z-index: 202;} .hotcitylist p {padding: 5px 0} .hotcitylist pa {padding: 0 8px; высота: 22px; линия-высота: 22px; цвет:#333; font-size: 14px; margin: 3px 5px; text-align: center: inline-block; letlectcity. PA: Hover {фон:#F55583; Color: #fff; Text-Decoration: None} .morecity {Border-Top: 1px Solid#c6c6c6; высота: 30px; line-hight: 30px; текст-альбом: правой; .cityConfirm {положение: абсолют; курсор: указатель; ширина: 168px; высота: 48px; слева: 137px; внизу: 22px;} .cityConfirm a {width: 168px; высота: 48px; display: block} .evet {display: none; позиция: абсолютно; Верх: 0px; слева: 0px; Ширина: 100%; высота: 100%; Z-Index: 198; } </style> <div> </div> <div> <div> <div> <a href = "javascript: close_dialog ();" rel = "внешний nofollow"> </a> </div> <div> <pan> 北京 </span> </div> <div> <div> ◊ </div> <div> ♦ </div> <div> <p> <a href = ""> 北京 </a> <a href = "> 上海 </a> <href =" href = ""> 杭州 </a> <a href = ""> 西安 </a> <a href = ""> 成都 </a> <a href = ""> 郑州 </a> <a href = ""> 厦门 </a> <a href = ""> 青岛 </a> <href = ""> 深圳 </a> <aref = ""> 青岛 </a> <href = " <a href = ""> 重庆 </a> <a href = ""> 武汉 </a> <a href = ""> 南京 </a> <a href = ""> 广州 </a> <a href = ""> 沈阳 </a> <a href = ""> 济南a> <a href = "> 哈尔滨 哈尔滨 </a> </p> </p> </p> </p> href = ""> 更多城市 >> </a> </div> </div> </div> <div> <a href = ""> </a> </div> <div> </div> </div> </div> <script type = "text/javascript" src = "jquery.js"> </script> <script type = "text/javascript"; $ ('body'). height (); $ ('. Dialog-wrap'). css ({'height': h, 'непрозрачность': 0,5, 'Display': 'block'}); $ ('. 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>