jqueryµØÍ¼±ê¼ÇÌáÊ¾ - ÎÂÖÝÍøÕ¾½¨ÉèÁªÃËÌÔ±¦µê

North America

Area (km?): 24,490,000
Population: 528,720,588

South America

Area (km?): 17,840,000
Population: 382,000,000

Europe

Area (km?): 10,180,000
Population: 731,000,000

Africa

Area (km?): 30,370,000
Population: 1,022,011,000

Asia

Area (km?): 43,820,000
Population: 3,879,000,000

Australia

Area (km?): 9,008,500
Population: 31,260,000

ÊÊÓÃä¯ÀÀÆ÷£ºFireFox¡¢Chrome¡¢Opera¡¢°ÁÓÎ¡¢ËÑ¹·. ²»Ö§³ÖIE8¡¢360¡¢Safari¡¢ÊÀ½çÖ®´°¡£

À´Ô´£ºÎÂÖÝÍøÕ¾½¨ÉèÁªÃËÌÔ±¦µê

background: -moz-linear-gradient(top, #fff1d3, #ffdb90); background: -ms-linear-gradient(top, #fff1d3, #ffdb90); background: -o-linear-gradient(top, #fff1d3, #ffdb90); background: linear-gradient(top, #fff1d3, #ffdb90); } .tooltip::after { content: ''; position: absolute; top: -10px; left: 50%; margin-left: -10px; border-bottom: 10px solid #fff1d3; border-left: 10px solid transparent; border-right :10px solid transparent; } .tooltip-down .tooltip { bottom: 12px; top: auto; } .tooltip-down .tooltip::after { bottom: -10px; top: auto; border-bottom: 0; border-top: 10px solid #ffdb90; } .tooltip h2 { font: bold 1.3em 'Trebuchet MS', Tahoma, Arial; margin: 0 0 10px; } .tooltip ul { margin: 0; padding: 0; list-style: none; } </style> </head> <body> <div id="wrapper"> <img width="920" height="450" src="images/world-map.jpg" alt="World continents"> <div class="pin pin-down" data-xpos="170" data-ypos="100"> <h2>North America</h2> <ul> <li><b>Area (km?):</b> 24,490,000</li> <li><b>Population:</b> 528,720,588</li> </ul> </div> <div class="pin" data-xpos="270" data-ypos="320"> <h2>South America</h2> <ul> <li><b>Area (km?):</b> 17,840,000</li> <li><b>Population:</b> 382,000,000</li> </ul> </div> <div class="pin pin-down" data-xpos="450" data-ypos="110"> <h2>Europe</h2> <ul> <li><b>Area (km?):</b> 10,180,000</li> <li><b>Population:</b> 731,000,000 </li> </ul> </div> <div class="pin" data-xpos="450" data-ypos="250"> <h2>Africa</h2> <ul> <li><b>Area (km?):</b> 30,370,000</li> <li><b>Population:</b> 1,022,011,000</li> </ul> </div> <div class="pin pin-down" data-xpos="650" data-ypos="130"> <h2>Asia</h2> <ul> <li><b>Area (km?):</b> 43,820,000</li> <li><b>Population:</b> 3,879,000,000</li> </ul> </div> <div class="pin pin-down" data-xpos="750" data-ypos="310"> <h2>Australia</h2> <ul> <li><b>Area (km?):</b> 9,008,500</li> <li><b>Population:</b> 31,260,000</li> </ul> </div> </div> <div style="text-align:center;clear:both"> <p>?uOmÈ‰hVÿFireFox0Chrome0Opera0²P8n0d×r. N/ecIE803600Safari0NLuKN—z0</p> <p>egnÿ<a href="http://sc.chinaz.com/" target="_blank">Ùz?}Pg</a></p> </div> </body> </html> ml>