Maison > interface Web > tutoriel HTML > le corps du texte

在一个div中有许多图片,所有小图片都要显示在大图片上方,如何用css精确定位小图片的位置呢?效果图如下_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:56:02
original
1958 Les gens l'ont consulté

在下面的效果图中,“无光盘”、“浏览USB”、“IPod音乐”、“浏览电脑”、“HDMI1”、“HMDI2”、“设置”是小图片,“PCHOME”是大图片,所有小图片都要显示在大图片上方。

如何用css实现效果图中的效果呢?


如果把所有的小图片都设置成position:relative,无法控制小图片的left和top的值

请高手告知,分不够可以加分

(注:效果图在第二楼)


回复讨论(解决方案)



做一个大的div 背景图片为大图(PCHOME)
在div里放置子div(小图)固定宽度和高度
接着调小图位置


z-index  设置一下就可以了    请参考


http://www.ido321.com/666.html LZ开源给图片我  或者 我晚点帮你弄一个

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>
Copier après la connexion


在一个div中有许多图片,所有小图片都要显示在大图片上方,如何用css精确定位小图片的位置呢?效果图如下_html/css_WEB-ITnose
在一个div中有许多图片,所有小图片都要显示在大图片上方,如何用css精确定位小图片的位置呢?效果图如下_html/css_WEB-ITnose
.......
在一个div中有许多图片,所有小图片都要显示在大图片上方,如何用css精确定位小图片的位置呢?效果图如下_html/css_WEB-ITnose

这样就可以了吧!
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal