中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

<ul>
  <li><a id="map01" href="#map01"><img src="/articleimg/2007/03/4514/map1.jpg" alt="Post Office" />This is the Popsville community <strong>Post Office</strong>, your home of over-priced postage. Click map for more</a></li>
  <li><a id="map02" href="#map02"><img src="/articleimg/2007/03/4514/map2.jpg" alt="Dew Drop Inn" />Home is where the beer is. And that means the <strong>Dew Drop Inn</strong>. Live music on the weekends. Click map for more</a></li>
  <li><a id="map03" href="#map03"><img src="/articleimg/2007/03/4514/map3.jpg" alt="River Beach" />Spend lazy summer afternoons at the beautiful <strong>River Beach</strong>. Hang out on the nude beach. Click map for more</a></li>
  <li><a id="map04" href="#map04"><img src="/articleimg/2007/03/4514/map4.jpg" alt="Woodland Traders" />Our local <strong>Woodland Traders</strong> is a veritable Mecca of consumer goods and hardware. Click map for more</a></li>
  <li><a id="map05" href="#map05"><img src="/articleimg/2007/03/4514/map5.jpg" alt="Wild Game Diner" />Country living means road kill, and the <strong>Wild Game Diner</strong> prepares it with special sauce. Click map for more</a></li>
</ul>

對(duì)于a中的內(nèi)容我們進(jìn)行隱藏，我們考慮增加span元素來(lái)實(shí)現(xiàn)，代碼修改如下：

<ul>
  <li><a id="map01" href="#map01"><span class="offset"><img src="/articleimg/2007/03/4514/map1.jpg" alt="Post Office" />This is the Popsville community <strong>Post Office</strong>, your home of over-priced postage. Click map for more</span></a></li>
  <li><a id="map02" href="#map02"><span class="offset"><img src="/articleimg/2007/03/4514/map2.jpg" alt="Dew Drop Inn" />Home is where the beer is. And that means the <strong>Dew Drop Inn</strong>. Live music on the weekends. Click map for more</span></a></li>
  <li><a id="map03" href="#map03"><span class="offset"><img src="/articleimg/2007/03/4514/map3.jpg" alt="River Beach" />Spend lazy summer afternoons at the beautiful <strong>River Beach</strong>. Hang out on the nude beach. Click map for more</span></a></li>
  <li><a id="map04" href="#map04"><span class="offset"><img src="/articleimg/2007/03/4514/map4.jpg" alt="Woodland Traders" />Our local <strong>Woodland Traders</strong> is a veritable Mecca of consumer goods and hardware. Click map for more</span></a></li>
  <li><a id="map05" href="#map05"><span class="offset"><img src="/articleimg/2007/03/4514/map5.jpg" alt="Wild Game Diner" />Country living means road kill, and the <strong>Wild Game Diner</strong> prepares it with special sauce. Click map for more</span></a></li>
</ul>

在顯示的時(shí)候文字會(huì)跟著圖片排版，為了方便我們對(duì)其中的描述文字進(jìn)行樣式調(diào)整而不影響圖片的布局，我們單獨(dú)給描述文字增加span元素，代碼修改如下：

<ul>
  <li><a id="map01" href="#map01"><span class="offset"><img src="/articleimg/2007/03/4514/map1.jpg" alt="Post Office" /><span>This is the Popsville community <strong>Post Office</strong>, your home of over-priced postage. Click map for more</span></span></a></li>
  <li><a id="map02" href="#map02"><span class="offset"><img src="/articleimg/2007/03/4514/map2.jpg" alt="Dew Drop Inn" /><span>Home is where the beer is. And that means the <strong>Dew Drop Inn</strong>. Live music on the weekends. Click map for more</span></span></a></li>
  <li><a id="map03" href="#map03"><span class="offset"><img src="/articleimg/2007/03/4514/map3.jpg" alt="River Beach" /><span>Spend lazy summer afternoons at the beautiful <strong>River Beach</strong>. Hang out on the nude beach. Click map for more</span></span></a></li>
  <li><a id="map04" href="#map04"><span class="offset"><img src="/articleimg/2007/03/4514/map4.jpg" alt="Woodland Traders" /><span>Our local <strong>Woodland Traders</strong> is a veritable Mecca of consumer goods and hardware. Click map for more</span></span></a></li>
  <li><a id="map05" href="#map05"><span class="offset"><img src="/articleimg/2007/03/4514/map5.jpg" alt="Wild Game Diner" /><span>Country living means road kill, and the <strong>Wild Game Diner</strong> prepares it with special sauce. Click map for more</span></span></a></li>
</ul>

出處：藍(lán)色理想
責(zé)任編輯：moby

上一頁(yè) CSS實(shí)例講解:地圖提示 [1] 下一頁(yè) CSS實(shí)例講解:地圖提示 [3]

◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論