代码如下 ：
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> tab </iteme> <style type = "text/css">/ * hapus padding margin */ Tubuh, H1, H2, H3, H4, H5, H6, HR, P, Blockquote, DL, DT, DD, UL, OL, Li, Pre, Form, Fieldset, Legenda, Tombol, Input, Textarea, TH, TD {Margin: 0; Padding: 0; }/ * Font default */body, tombol, input, pilih, textarea {font: 12px/1.5/5b8b/4f53, arial, sans-serif; } h1, h2, h3, h4, h5, h6 {font-size: 100%; } alamat, kutip, dfn, em, var {font-style: normal; } kode, KBD, pra, sampel {font-family: kurir baru, kurir, monospace; } kecil {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; } tombol, input, pilih, textarea {font-size: 100%; } tabel {border-collapse: collapse; spasi perbatasan: 0; } .col-main {float: left; Lebar: 100%; Min-tinggi: 1px; } .col-sub, .col-extra {float: left; } .layout: setelah, .main-wrap: setelah, .col-sub: setelah, .col-extra: setelah {konten: '/20'; Tampilan: Blok; Tinggi: 0; jelas: keduanya; } .layout, .main-wrap, .col-sub, .col-extra {zoom: 1; } / * Fitur umum * / .hidden {display: none; } .invisible {visibilitas: tersembunyi; } / * Hapus float * / .clear {display: block; Tinggi: 0; meluap: tersembunyi; jelas: keduanya; } .clearfix: After {Content: '/20'; Tampilan: Blok; Tinggi: 0; jelas: keduanya; } .clearfix { *zoom: 1; } / * Untuk browser non IE juga menampilkan bilah gulir vertikal secara default, untuk mencegah flicker yang disebabkan oleh bilah gulir * / html {overflow-y: gulir; } / * Gaya tautan default * / a: tautan {warna: #003399; } A: Visited {Color: #123689;} A: Hover {Color: #ff6600;} </tyle> </head> <body> <style type = "text/css"> body {tinggi: 1000px; } .dialog-wrap, .dialog {display: none; } .dialog-wrap {position: absolute; Atas: 0px; Kiri: 0px; Lebar: 100%; z-index: 99; Latar belakang:#000; } .dialog {border: 10px; Latar Belakang: URL (Gambar/Welcome91981.png) No-Repeat; Z-index: 199; Posisi: diperbaiki; _Posisi: absolut; Lebar: 451px; Tinggi: 313px; Atas: 50%; Kiri: 50%; margin: -156px 0px 0px -225px; Border-Radius: 10px; Teks-Align: Kiri; } .dialog .city-box {position: relatif; Lebar: 100%; Tinggi: 100%} .dialog .close {position: absolute; Lebar: 18px; Tinggi: 18px; Atas: 16px; Kanan: 16px; z-index: 205; } .dialog .close a {display: block; Lebar: 100%; Tinggi: 100%; } .citybox {position: absolute; kursor: pointer; atas: 143px; kiri: 212px; tinggi: 30px; line-height: 30px; font-size: 16px; warna:#f4396d; padding: 0 30px 0 10px; display: inline-block; Z-index: 200; } .citybox span {width: 90px; overflow: tersembunyi; spasi putih: nowrap; text-overflow: ellipsis; display: inline-block} .hotcitybox {position: absolute; width: 272px; atas: 160px; kiri: 170px; Tampilan: tidak ada; Z-index: 200px; kiri: 170px; Tampilan: Tidak Ada; Z-index: 200PX; 170px; Tampilan: Tidak Ada; Z-index: 200PX; 170px; Tidak ada: non-indeks: 200px; 170px; Tidak ada: non-indeks: 200px; 170px; Tidak ada: non-index: 200px; left: 170px; Display: none; z-index: 200; .togle {color: #fff; position: absolute; kiri: 50%; font-size: 28px; z-index: 200;} .togleborder {position: absolute; kiri: 50%; ukuran font: 28px; warna: #ddd; atas: 3px; z-index: 200;} .hotcitylist {latar belakang: #fff; border-radius: 5px; box-shadow: 1px 1px 1px #333; atas: 22px; posisi: absolute; lebar: 270px; perbatasan: 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:3px 5px;text-align:center;display:inline-block;float:left} .hotCityList pa: hover {latar belakang:#f55583; warna: #fff; Text-Decoration: none} .morecity {border-top: 1px solid#c6c6c6; tinggi: 30px; line-height: 30px; text-align: right;} .morecity a {color:#f5583; .cityconfirm {position: absolute; kursor: pointer; lebar: 168px; tinggi: 48px; kiri: 137px; bawah: 22px;} .cityconfirm A {width: 168px; tinggi: 48px; tampilan: blok} .evet {display: none; Posisi: Absolute; Atas: 0px; Kiri: 0px; Lebar: 100%; Tinggi: 100%; z-index: 198; } </tyle> <verv> </div> <viv> <viv> <verv> <a href = "javascript: close_dialog ();" rel="external 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> <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> </div> <script type = "Text/JavaScript" src = "jQuery.js"> </script> script> script = "TEKP/JAUP" TEKP = "JQuery.js"> </script> Script = SCRIP = "TEKP/JAUP" TEKP/JQUERY. $ ('tubuh'). tinggi (); $ ('. Dialog-wrap'). css ({'height': h, 'opacity': 0.5, 'display': 'block'}); $ ('. dialog'). Show (); } function close_dialog () {$ ('. dialog, .dialog-wrap'). hide (); } $ ('. CityBox'). Klik (function () {$ ('. HotCityBox, .evet'). Show ();}); $ ('. Evet, .dialog-wrap'). Klik (function () {$ ('. HotCityBox, .evet'). Sembunyikan (); $ ('. EVET'). Sembunyikan ();}); //dialog(); </script> <p onClick = "dialog ()" style = "kursor: pointer"> 点击这里看效果 </p> <br> 我是文字我是文字文字我字我是文字我是文字 </body> </html>