CSS实例讲解:地图提示(2)
作者:blank 来源:蓝色理想 发布时间:2007-05-11 17:04:00
标签:map,pop,css,hover
首先我们要显示5部分内容,内容结构相似,我们可以选用无序列表来显示介绍的图片和内容:
<ul>
<li><a id="map01" href="#map01"><img src="https://img.aspxhome.com/file/UploadPic/20075/20075111743602.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="https://img.aspxhome.com/file/UploadPic/20075/20075111743990.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="https://img.aspxhome.com/file/UploadPic/20075/20075111744507.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="https://img.aspxhome.com/file/UploadPic/20075/20075111744638.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="https://img.aspxhome.com/file/UploadPic/20075/20075111744924.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>
对于a中的内容我们进行隐藏,我们考虑增加span元素来实现,代码修改如下:
<ul>
<li><a id="map01" href="#map01"><span class="offset"><img src="https://img.aspxhome.com/file/UploadPic/20075/20075111743602.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="https://img.aspxhome.com/file/UploadPic/20075/20075111743990.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="https://img.aspxhome.com/file/UploadPic/20075/20075111744507.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="https://img.aspxhome.com/file/UploadPic/20075/20075111744638.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="https://img.aspxhome.com/file/UploadPic/20075/20075111744924.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>
在显示的时候文字会跟着图片排版,为了方便我们对其中的描述文字进行样式调整而不影响图片的布局,我们单独给描述文字增加span元素,代码修改如下:
<ul>
<li><a id="map01" href="#map01"><span class="offset"><img src="https://img.aspxhome.com/file/UploadPic/20075/20075111743602.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="https://img.aspxhome.com/file/UploadPic/20075/20075111743990.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="https://img.aspxhome.com/file/UploadPic/20075/20075111744507.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="https://img.aspxhome.com/file/UploadPic/20075/20075111744638.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="https://img.aspxhome.com/file/UploadPic/20075/20075111744924.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>
0
投稿
猜你喜欢
- 效果图:作用:将页面中的电话号码生成图片格式。<%Public Sub Com_CreatValidCode(pT
- 网页制作中是免不了与表格打交道的。表格是网页制作的基础,在网页布局中起着举足轻重的作用,熟练掌握表格的操作,是你制作网页的辅路石,也是你成为
- 一般事件事件浏览器支持描述onClickIE3|N2|O3鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClickIE4|N4
- <% a="福建是中国的一个省|我们美丽中国的武夷山!" b="中国,我们,武夷山,福建,美国,苹果&q
- 数据库系统是管理信息系统的核心,基于数据库的联机事务处理(OLTP)以及联机分析处理(OLAP)是银行、企业、政府等部门最为重要的计算机应用
- 经常看见有人问,MSSQL占用了太多的内存,而且还不断的增长;或者说已经设置了使用内存,可是它没有用到那么多,这是怎么一回事儿呢? 首先,我
- 我们知道,一般的关系数据库(如SQL Server、Oracle、Access等)中的查询操作是支持集合操作的,例如可以用“Update A
- Array()CInt()CStr() Date() DateAdd() Day() FormatCurrency() FormatDate
- 学习复杂代码的最好方法是简化:(function(win, undefined) { var jQuery = f
- 在做项目的过程中,我们经常会建立各种各样的规范,以方便团队之间更好的合作更好的完成项目;同样我们也经常会听到各种各样的协议,比如Google
- 文件名:Awa_temp.Class.asp 代码如下:<% 'Crazy蛙!模板操作类 '作者C
- 近段时间由于修改一个ASP程序(有SQL注入漏洞),在网上找了很多相关的一些防范办法,都不近人意,所以我将现在网上的一些方法综合改良了一下,
- 代码如下:declare @cmd nvarchar(4000) set @cmd = N'exec [?].sys.sp_chan
- 在开发过程中,有时遇到由于缓存问题导致页面不能及时更新,有时页面引入了不必需的样式脚本文件,有时由于文件太多,字节过大导致页面的性能缓慢,为
- 如何显示一个文本文件?完整显示文本文件的代码如下: Write(STRING) WriteLine(STRING) WriteBlan
- 以SQL Server中的Northwind示范数据库为例,利用DTS设计器,进行数据的转移。转移任务的步骤:◆1. 新建目的数据库NOrt
- 当“ 页面重构工程师 ”这个职位的面试官也蛮长一段时间了,跟前两年比起来,总的来说来应聘的同学能力在很大程度上有了提高,记得两年前的一场招聘
- rs.open语句详细说明rs.Open [第一个参数],  
- 如何做一个只搜索本网站的引擎? 用下面两个文件即可实现:searchfiles.html &l
- 首先,FSO是FileSystemObject的简称。当然也就是我们的俗称FSO组件了,该组件可以用来处理驱动器、文件夹以及文件。它可以检测