XHTML部分我们已经写好,下面将是我们对其表现的设计部分,即CSS部分。
首先我们清除一下元素默认的边距(内边距和外边距)和设置img的默认边框为0:
* { margin:0; padding:0; }
img { border:0; }
我们定义下ul的样式,包括ul的预设标记,大小,高度,边框:
ul { list-style-type:none; background: transparent url(/articleimg/2007/03/4514/map_flat.jpg) no-repeat 0 0; width:350px; height:250px; border:1px solid #000; }
对于li的显示方式设置内联(display: inline;)行布局:
ul li { display:inline; }
下面是我们讲解的重点,隐藏/显示效果。
对li中的a元素我们设置其块元素显示(display: block;),让其相对位置(position: relative;),并使链接不显示下划线。
ul li a { position:relative; display:block; text-decoration:none; }
让类选择器为offset的span隐藏,至于怎样隐藏文章开头已经分析了:
ul li a span.offset { position:absolute; margin-top:-9000px; margin-left:-9000px; }
如上已经实现了内容隐藏,现在我们制作考虑触发显示的效果:
ul li a:hover span.offset, ul li a:focus span.offset, ul li a:active span.offset { color: #000; background-image:none; background-color:#ffffde; border:1px solid #000; display:block; width:150px; height:auto; text-decoration:none; cursor:pointer; }
出处:蓝色理想
责任编辑:moby
上一页 CSS实例讲解:地图提示 [2] 下一页 CSS实例讲解:地图提示 [4]
◎进入论坛网页制作、网站综合版块参加讨论
|