Maison >interface Web >tutoriel HTML >Une petite introduction à l'utilisation de la position dans la production de pages html_HTML/Xhtml_Web

Une petite introduction à l'utilisation de la position dans la production de pages html_HTML/Xhtml_Web

WBOY
WBOYoriginal
2016-05-16 16:38:551416parcourir

Je viens d'apprendre du contenu HTML hier et j'avais hâte de créer une barre de recherche sur JD.com. Je l'ai finalement fait, mais lorsque j'ai effectué le paiement du panier, un numéro était affiché dessus et je l'ai fait. Je ne sais pas comment l'ajouter. Si vous souhaitez que les nombres se déplacent avec le panier, vous devez les positionner ensemble. Tout d'abord, définissez la position du div des nombres sur absolue, ce qui lui donne une couche. ressentez, car à ce moment-là, la balise parent de la position numérique est le corps, donc lors du réglage en haut et à gauche, vous pouvez également la définir sur la position souhaitée du panier. Cependant, si vous modifiez la marge du panier, la. deux ne peuvent pas bouger ensemble, vous définissez donc la position du panier. Devenez relatif, de sorte que l'étiquette parent de la position du numéro devienne le panier. Quelle que soit la façon dont la marge du panier est ajustée, les numéros se déplaceront. avec lui....

Copiez le code
Le code est le suivant :



day03.html< /title> <br><style type="text/css"> pour la position*/ <br>#car{ <br>width:150px;height:30px; <br>background: #999999;color:white;text-align: center; ;marge : 232px 300px; <br>bordure:1px noir uni;position: relative; <br>#num{ <br>largeur:20px;hauteur:20px;arrière-plan: rouge; ;text-aligh:center; <br>hauteur de ligne:20px;position: absolue <br> top:-15px;left:25px; head> <br><body> <br><div id="car"> <br>Aller au panier pour payer<br><div id="num">0</div> 🎜></div> <br></corps> <br></html><br><br><br> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration:</span><div>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</div></div></div><div class="nphpSytBox"><span>Article précédent:<a class="dBlack" title="Comment implémenter des sauts de ligne dans la zone de saisie de texte textarea_HTML/Xhtml_Web production de pages" href="https://m.php.cn/fr/faq/11405.html">Comment implémenter des sauts de ligne dans la zone de saisie de texte textarea_HTML/Xhtml_Web production de pages</a></span><span>Article suivant:<a class="dBlack" title="Comment implémenter des sauts de ligne dans la zone de saisie de texte textarea_HTML/Xhtml_Web production de pages" href="https://m.php.cn/fr/faq/11409.html">Comment implémenter des sauts de ligne dans la zone de saisie de texte textarea_HTML/Xhtml_Web production de pages</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="https://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/fr/faq/348757.html" title="Résumé des connaissances HTML" class="aBlack">Résumé des connaissances HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348804.html" title="Comment apprendre le HTML rapidement" class="aBlack">Comment apprendre le HTML rapidement</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348873.html" title="La différence entre htmlxhtmlxml" class="aBlack">La différence entre htmlxhtmlxml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348884.html" title="La différence entre les attributs src et href" class="aBlack">La différence entre les attributs src et href</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!</p></div><div class="footermid"><a href="https://m.php.cn/fr/about/us.html">À propos de nous</a><a href="https://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="https://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>