地图弹窗(خريطة البوب)具体演示
<!DOCTYPE
html عامة "-//W3C//DTD XHTML 1.0 الانتقالية//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<الرأس>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>تنسيق CSS: إنشاء خريطة البوب (map pop)</title>
<نمط نوع = "نص / CSS" وسائل الإعلام = "الكل">
* { الهامش:0؛ الحشو: 0؛
}
إمج { الحدود: 0؛
}
#show{ محاذاة النص:يسار؛
}
ul { نوع نمط القائمة: لا شيء؛ الخلفية: شفافة
عنوان URL ( ) بدون تكرار -130 بكسل
0بكسل;
}
ul li a#map01:hoverspan.offset، ul li a#map01:focusspan.offset، ul li
a#map01:activespan.offset { Margin-top:-1px; الهامش الأيسر: 230 بكسل؛
}
ul li a#map02 { width:110px; الارتفاع: 75 بكسل؛ الهامش العلوي:-50 بكسل؛
الهامش الأيسر: 235 بكسل؛
}
ul li a#map02:hover، ul li a#map02:focus، ul li a#map02:active {
الخلفية:شفافة
عنوان URL ( ) بدون تكرار -115 بكسل
-88 بكسل؛
}
ul li a#map03:hoverspan.offset، ul li a#map03:focusspan.offset،ul li
a#map03:activespan.offset { Margin-top:-89px; الهامش الأيسر: 245 بكسل؛
}
ul li a#map04 { width:110px; الارتفاع: 120 بكسل؛ الهامش العلوي:-60 بكسل؛
الهامش الأيسر: 5 بكسل؛
}
ul li a#map04:hover، ul li a#map04:focus، ul li a#map04:active {
الخلفية:شفافة
عنوان URL ( ) بدون تكرار -240 بكسل
-153 بكسل؛
}
ul li a#map05:hoverspan.offset، ul li a#map05:focusspan.offset، ul li
a#map05:activespan.offset { Margin-top:-154px; الهامش الأيسر: 120 بكسل؛
}
</نمط>
</الرأس>
<body> <ul> <li><a id="map01"
href="#map01"><span class="offset"><img
src=" /><span>هذه هي مشاركة مجتمع بوبسفيل <strong>
المكتب</strong>، منزلك الذي يتميز برسوم بريدية باهظة الثمن. انقر فوق الخريطة ل
المزيد</span></span></a></li> <li><a
id="map02" href="#map02"><span class="offset"><img
src=" /><span>المنزل هو المكان الذي توجد فيه البيرة. وهذا يعني
<strong>نزل قطرة الندى</strong>. الموسيقى الحية في عطلة نهاية الأسبوع.
انقر على الخريطة للمزيد</span></span></a></li>
<li><a id="map03" href="#map03"><span
class="offset"><img
src=" /><span>اقضي فترات ما بعد الظهيرة في الصيف في الأماكن الجميلة
<strong>شاطئ النهر</strong>. شنق على الشاطئ عارية.
انقر على الخريطة للمزيد</span></span></a></li>
<li><a id="map04" href="#map04"><span
class="offset"><img
src=" /><span>غاباتنا <strong>المحلية
التجار</strong> هم مكة الحقيقية للسلع الاستهلاكية و
الأجهزة. انقر فوق الخريطة ل
المزيد</span></span></a></li> <li><a
id="map05" href="#map05"><span class="offset"><img
src=" /><span>العيش في الريف يعني قتل الطريق، و
يقوم <strong>Wild Game Diner</strong> بإعداده بطبق خاص
صلصة. انقر فوق الخريطة ل
المزيد</span></span></a></li> </ul>
</الجسم>
</html>