Teksto apvyniojimas aplink vaizdą yra gana patrauklus bet kokiai svetainei. Naudojant HTML ir CSS apvynioti vaizdą tekstu galima ir yra daug būdų tai padaryti, nes bet kurio vaizdo forma nėra pastovi. Į HTML :
- Taip pat galite naudoti CSS forma už nuosavybės ribų priklausomai nuo jūsų įvaizdžio formos.
- Sulygiuokite vaizdus dešinėje, kairėje arba centre HTML, kad galėtumėte naudoti įvairius išdėstymus. Toliau pateikti pavyzdžiai iliustruoja aukščiau pateiktą metodą:
1 pavyzdys: Šiame pavyzdyje vaizdas plūduriuoja dešinėje ekrano pusėje, o tekstas apgaubia vaizdą. Čia nereikalaujame išorinės formos, nes formos vaizdas yra įprastas (kvadratas).
HTML
> <>html>>>> head>>>> <>title>>>> Wrapping an Image with the text> > Vaizdo apvyniojimas teksto pavadinimu><style>body { paraštė: 20 taškų; teksto lygiavimas: centre; } h1 { spalva: žalia; } /* Ši div dizaino dalis naudojama kaip vaizdas */ .round { width: 200px; aukštis: 200 pikselių; sienos spindulys: 50%; teksto lygiavimas: centre; šrifto dydis: 30 pikselių; plūdė: kairė; šrifto svoris: paryškintas; /* Pakeiskite formą pagal paveikslėlį */ shape-outside: circle(); fono spalva: žalia; spalva: balta; } straipsnis { padding-top: 75px; ekranas: eilutinis blokas; } p { text-align: justify; šrifto dydis: 22 pikseliai; } style> head> <body> <h1>techcodeview.comh1> <b>Kompiuterių mokslo portalas Geeks b><div> <article>techcodeview.comarticle> div><p>Kiek kartų buvote nusivylęs, kai ieškojote gero programavimo / algoritmo / interviu klausimų rinkinio? Ko tikėjotės ir ką gavote? Šis portalas buvo sukurtas siekiant pateikti gerai parašytus, gerai apgalvotus ir gerai paaiškintus pasirinktų klausimų sprendimus. IIT Roorkee absolventas ir techcodeview.com įkūrėjas. Jam patinka efektyviausiais būdais spręsti programavimo problemas. Be techcodeview.com, jis dirbo su DE Shaw ir Co kaip programinės įrangos kūrėjas ir JIIT Noida kaip docentas. Tai gera platforma mokytis programuoti. Tai edukacinė svetainė. Pasiruoškite įdarbinimo procesui su produktais pagrįstose įmonėse, pvz., „Microsoft“, „Amazon“, „Adobe“ ir kt., dalyvaudami nemokamuose internetinio pasirengimo stažuotėms kurse. p> body> html> Išvestis: 3 pavyzdys: Naudodami lentelės žymą sukursime lentelę, o lentelėse viename stulpelyje įdėsime vaizdą, o į kitą stulpelį bet kokią informaciją, kurią norite įterpti. HTML<html lang='en'> <head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Tekstas aplink imagetitt> head> <body> <h1>text-align: centre;'> techcodeview.com h1><h3 style='color: black; text-align: center;'>Informatikos portalas h3> <br> <table class="table"> <tr> <td> <img src= ' ' alt="Longtail boat in Thailand">td><td> <p>Kiek kartų buvote nusivylęs, kai ieškojote gero programavimo / algoritmo / interviu klausimų rinkinio? Ko tikėjotės ir ką gavote? Šis portalas buvo sukurtas siekiant pateikti gerai parašytus, gerai apgalvotus ir gerai paaiškintus pasirinktų klausimų sprendimus. IIT Roorkee absolventas ir techcodeview.com įkūrėjas. Jam patinka efektyviausiais būdais spręsti programavimo problemas. Be techcodeview.com, jis dirbo su DE Shaw ir Co kaip programinės įrangos kūrėjas ir JIIT Noida kaip docentas. Tai gera platforma mokytis programuoti. Tai edukacinė svetainė. Pasiruoškite įdarbinimo procesui su produktais pagrįstose įmonėse, tokiose kaip „Microsoft“, „Amazon“, „Adobe“ ir kt., dalyvaudami nemokamuose internetinio pasirengimo stažuotėms kurse. p> td> tr> lentelė> kūnas> html> Išvestis :>></tag></td></tr></tbody></table></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/maths-class-6-cat/">Matematika-Klasė-6</a> </li><li> <a href="/priority-queue/">Prioritetas-Eilė</a> </li><li> <a href="/spotlight/">Dėmesio Centre</a> </li><li> <a href="/exponents-maq/">Rodikliai – Maq</a> </li><li> <a href="/algorithms-greedy-algorithms/">Algoritmai-Godūs Algoritmai</a> </li><li> <a href="/animal-physiology/">Gyvūnų Fiziologija</a> </li><li> <a href="/java-generics/">„Java-Generics“.</a> </li><li> <a href="/figma/">Figma</a> </li><li> <a href="/chemistry-class-11-cat/">Chemija-11 Klasė</a> </li><li> <a href="/algorithms-bubblesort/">Algoritmai-Bubblesort</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Kaip kartoti failus kataloge naudojant Python?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Kompiuterių mokslo portalas, skirtas geikams. Jame yra gerai parašyti, gerai apgalvoti ir gerai paaiškinti informatikos ir programavimo straipsniai, viktorinos ir praktikos / konkurencinio programavimo / įmonės interviu klausimai.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-iterate-over-files-directory-using-python"> <i class="fa fa-external-link"></i> Skaityti Daugiau</a> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Įdomios Straipsniai</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/java-coding-software">Java kodavimo programinė įranga</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/should-college-athletes-be-paid-1311222">Ar koledžo sportininkams turėtų būti mokamas atlyginimas? Ekspertų diskusijų analizė</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-url">Skirtumas tarp URL ir IP adreso</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/spanish-numbers-how-count-from-1-100">Ispaniški skaičiai – kaip suskaičiuoti nuo 1 iki 100</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/convert-12-cm-inches">Konvertuoti 12 cm į colius</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Populiarios Temos</h2>
<div class="content">
<ul class="list"> <li><a href="/java-convert-int-string">int į eilutę Java</a>
</li><li><a href="/java-gridlayout">tinklelio išdėstymas</a>
</li><li><a href="/operating-system-examples">operacinės sistemos pavyzdžiai</a>
</li><li><a href="/what-is-special-character">yra ypatingas personažas</a>
</li><li><a href="/prime-number-program-java">Java programavimo pirminiai skaičiai</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Visos Teisės Saugomos | <a href="//sl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atsisakymas</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Apie Mus</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatumo Politika</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>
|
