代码如下：
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> แท็บ </title> <style type = "text/css">/ * ลบ margin padding *// Body, H1, H2, H3, H4, H5, H6, HR, P, Blockquote, DL, DT, DD, UL, OL, Li, Pre, Form, Fieldset, Legend, ปุ่ม, อินพุต, textarea, th, td {margin: 0; Padding: 0; }/ * ตัวอักษรเริ่มต้น */body, ปุ่ม, อินพุต, เลือก, textarea {font: 12px/1.5/5b8b/4f53, Arial, sans-serif; } H1, H2, H3, H4, H5, H6 {ขนาดตัวอักษร: 100%; } ที่อยู่, อ้างอิง, dfn, em, var {รูปแบบตัวอักษร: ปกติ; } รหัส, kbd, pre, samp {font-family: Courier ใหม่, Courier, Monospace; } เล็ก {ตัวอักษรขนาด: 12px; } ul, ol {list-style: none; } a {การตกแต่งข้อความ: ไม่มี; } A: Hover {Text-Decoration: ขีดเส้นใต้; } SUP {แนวตั้ง-แนว: text-top; } sub {แนวตั้ง-แนว: ข้อความด้านล่าง; } Legend {color:#000; } fieldset, img {border: 0; ปุ่ม}, อินพุต, เลือก, textarea {ขนาดตัวอักษร: 100%; } ตาราง {การล่มสลายของชายแดน: การล่มสลาย; ระยะห่างชายแดน: 0; } .col-main {float: ซ้าย; ความกว้าง: 100%; ต่ำสุด: 1px; } .col-sub, .col-extra {float: ซ้าย; } .layout: หลังจาก,. main-wrap: หลังจาก, .col-sub: หลังจาก, .col-extra: หลังจาก {content: '/20'; แสดง: บล็อก; ความสูง: 0; ชัดเจน: ทั้งสอง; } .layout, .main-wrap, .col-sub, .col-extra {ซูม: 1; } / * คุณสมบัติทั่วไป * / .hidden {display: none; } .invisible {การมองเห็น: ซ่อน; } / * ลบ float * / .clear {display: block; ความสูง: 0; ล้น: ซ่อน; ชัดเจน: ทั้งสอง; } .ClearFix: หลังจาก {เนื้อหา: '/20'; แสดง: บล็อก; ความสูง: 0; ชัดเจน: ทั้งสอง; } .ClearFix { *ซูม: 1; } / * สำหรับเบราว์เซอร์ที่ไม่ใช่ IE ยังแสดงแถบเลื่อนแนวตั้งโดยค่าเริ่มต้นเพื่อป้องกันการสั่นไหวที่เกิดจากแถบเลื่อน * / html {overflow-y: scroll; } / * รูปแบบลิงค์เริ่มต้น * / a: ลิงก์ {color: #003399; } a: เข้าเยี่ยมชม {color: #123689;} a: hover {color: #ff6600;} </style> </head> <body> <style type = "text/css"> body {ความสูง: 1000px; } .dialog-wrap, .dialog {display: none; } .dialog-wrap {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ซ้าย: 0px; ความกว้าง: 100%; z-index: 99; ความเป็นมา:#000; } .dialog {ชายแดน: 10px; ความเป็นมา: URL (รูปภาพ/welcome91981.png) ไม่ทำซ้ำ; Z-Index: 199; ตำแหน่ง: แก้ไข; _position: สัมบูรณ์; ความกว้าง: 451px; ความสูง: 313px; ด้านบน: 50%; ซ้าย: 50%; มาร์จิ้น: -156px 0px 0px -225px; แนวชายแดน: 10px; Text-Align: ซ้าย; } .dialog .city-box {ตำแหน่ง: ญาติ; ความกว้าง: 100%; ความสูง: 100%} .dialog .close {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 18px; ความสูง: 18px; ด้านบน: 16px; ขวา: 16px; z-index: 205; } .dialog .close a {display: block; ความกว้าง: 100%; ความสูง: 100%; } .citybox {ตำแหน่ง: สัมบูรณ์; เคอร์เซอร์: ตัวชี้; ด้านบน: 143px; ซ้าย: 212px; ความสูง: 30px; สายไฟ: 30px; ตัวอักษรขนาด: 16px; สี:#f4396d; Z-Index: 200; } .citybox Span {Width: 90px; Overflow: Hidden; White-Space: NowRap; Text-Overflow: Ellipsis; Display: Inline-Block} .HotCityBox {ตำแหน่ง: Absolute; Width: 272px; Top: 160px; ซ้าย: 170px; .togle {color: #FFF; ตำแหน่ง: Absolute; ซ้าย: 50%; FONT-SIZE: 28PX; Z-INDEX: 200;} .TOGLEBORDER {ตำแหน่ง: Absolute; ซ้าย: 50%; Font-Size: 28PX; สี: #DDD; .HotCityList {พื้นหลัง: #FFF; Border-Radius: 5px; Box-Shadow: 1px 1px 1px #333; Top: 22px; ตำแหน่ง: Absolute; Width: 270px; Border: 1px Solid #DDD; z-index: 202;} .HotCityList P {padding: 5px 0} .HotCityList PA {padding: 0 8px; ความสูง: 22px; line-height: 22px; สี:#333; font-size: 14px; PA: โฮเวอร์ {พื้นหลัง:#f55583; สี: #FFF; การกำหนดข้อความ: ไม่มี}. ความเป็นอยู่ที่ {ชายแดนด้านบน: 1px ของแข็ง#C6C6C6; ความสูง: 30px; เส้น-สูง: 30px; .CityConfirm {ตำแหน่ง: สัมบูรณ์; เคอร์เซอร์: ตัวชี้; ความกว้าง: 168px; ความสูง: 48px; ซ้าย: 137px; ด้านล่าง: 22px;} .CityConfirm a {ความกว้าง: 168px; ความสูง: 48px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 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> <p> <a href = ""> 北京 </a> <a href = ""> 上海 </a> href = ""> 杭州 </a> <a href = ""> 西安 </a> <a href = ""> 成都 </a> <a href = ""> 郑州 </a> <a href = ""> 厦门 </a> <a href = "> <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/javascript $ ('ร่างกาย'). ความสูง (); $ ('. Dialog-Wrap'). CSS ({'ความสูง': H, 'Opacity': 0.5, 'Display': 'Block'}); $ ('. Dialog'). show (); } ฟังก์ชั่น close_dialog () {$ ('. กล่องโต้ตอบ, .dialog-wrap'). ซ่อน (); } $ ('. CityBox') คลิก (function () {$ ('. hotcitybox, .evet'). show ();}); $ ('. evet, .dialog-wrap') คลิก (ฟังก์ชั่น () {$ ('. hotcitybox, .evet'). ซ่อน (); $ ('. evet'). ซ่อน ();}); // dialog (); </script> <p onclick = "dialog ()" style = "เคอร์เซอร์: ตัวชี้"> 点击这里看效果 </p> <br> 我是文字我是文字文字我字我是文字我是文字 </body> </html>