Heim >Web-Frontend >HTML-Tutorial >Eine kleine Einführung in die Verwendung von Positionen bei der Erstellung von html_HTML/Xhtml_Webseiten

Eine kleine Einführung in die Verwendung von Positionen bei der Erstellung von html_HTML/Xhtml_Webseiten

WBOY
WBOYOriginal
2016-05-16 16:38:551410Durchsuche

Ich habe gestern gerade einige HTML-Inhalte kennengelernt und konnte es kaum erwarten, eine Suchleiste auf JD.com zu erstellen. Ich habe es endlich geschafft, aber als ich den Warenkorb auscheckte, wurde eine Nummer darauf angezeigt und ich habe es nicht geschafft. Wenn Sie nicht wissen, wie die Zahlen im Warenkorb verschoben werden sollen, müssen Sie sie auf jeden Fall positionieren. Stellen Sie zunächst die Position der Zahlen auf „Absolut“ ein, wodurch eine Schichtung entsteht Gefühl, denn zu diesem Zeitpunkt ist der übergeordnete Tag der digitalen Position der Körper. Wenn Sie ihn also oben und links festlegen, können Sie ihn auch auf die gewünschte Position des Warenkorbs einstellen Da sich zwei nicht zusammen bewegen können, wird die Position des Warenkorbs relativ, sodass das übergeordnete Tag der Position der Nummer zum Warenkorb wird. Unabhängig davon, wie der Rand des Warenkorbs angepasst wird, werden die Zahlen verschoben damit....

Kopieren Sie den Code
Der Code lautet wie folgt:


day03.html< /title><style type="text/css"> für Position*/ <br>#car{ <br>width:150px;height:30px; <br>color:white;text-align: center; <br>line-height: 30px ;Rand: 232px 300px;<br>Rand:1px durchgehend schwarz;Position: relativ; <br>#num{ <br>Breite:20px;Höhe:20px;Hintergrund:rot;<br>Farbe:weiß ;text-aligh:center; <br>line-height:20px;position: absolute; <br> top:-15px;left:25px; head><body><br><div id="car"> 🎜></div> <br></body> <br></html><br><br><br> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme:</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel:<a class="dBlack" title="So implementieren Sie Zeilenumbrüche im Texteingabebereich_HTML/Xhtml_Webseitenproduktion" href="https://m.php.cn/de/faq/11405.html">So implementieren Sie Zeilenumbrüche im Texteingabebereich_HTML/Xhtml_Webseitenproduktion</a></span><span>Nächster Artikel:<a class="dBlack" title="So implementieren Sie Zeilenumbrüche im Texteingabebereich_HTML/Xhtml_Webseitenproduktion" href="https://m.php.cn/de/faq/11409.html">So implementieren Sie Zeilenumbrüche im Texteingabebereich_HTML/Xhtml_Webseitenproduktion</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</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/de/faq/348757.html" title="Zusammenfassung der HTML-Kenntnisse" class="aBlack">Zusammenfassung der HTML-Kenntnisse</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348804.html" title="So lernen Sie schnell HTML" class="aBlack">So lernen Sie schnell HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348873.html" title="Der Unterschied zwischen HTML xHTML XML" class="aBlack">Der Unterschied zwischen HTML xHTML XML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348884.html" title="Der Unterschied zwischen src- und href-Attributen" class="aBlack">Der Unterschied zwischen src- und href-Attributen</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348902.html" title="Über die Verwendung von HTML5 und CSS-Ersatz" class="aBlack">Über die Verwendung von HTML5 und CSS-Ersatz</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>Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/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>