在下面的效果图中,“无光盘”、“浏览USB”、“IPod音乐”、“浏览电脑”、“HDMI1”、“HMDI2”、“设置”是小图片,“PCHOME”是大图片,所有小图片都要显示在大图片上方。
如何用css实现效果图中的效果呢?
如果把所有的小图片都设置成position:relative,无法控制小图片的left和top的值
请高手告知,分不够可以加分
(注:效果图在第二楼)
做一个大的div 背景图片为大图(PCHOME)
在div里放置子div(小图)固定宽度和高度
接着调小图位置
z-index 设置一下就可以了 请参考
div的position为relative,大图放到div中,小图片position为absolute,这样小图片就相对于div定位了
<div style="position:relative"><img src="无光盘" style="max-width:90%"/ alt="在一个div中有许多图片,所有小图片都要显示在大图片上方,如何用css精确定位小图片的位置呢?效果图如下_html/css_WEB-ITnose" ><img src="浏览USB" style="max-width:90%"/ alt="在一个div中有许多图片,所有小图片都要显示在大图片上方,如何用css精确定位小图片的位置呢?效果图如下_html/css_WEB-ITnose" >.......<img src="PCHOME"/ alt="在一个div中有许多图片,所有小图片都要显示在大图片上方,如何用css精确定位小图片的位置呢?效果图如下_html/css_WEB-ITnose" ></div>
HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号