Kaip pervadinti vaizdą į kairę teksto tinklalapyje

CSS naudojimas, kad vaizdas būtų nukreiptas į tinklalapio išdėstymo kairę pusę

Šiandien žiūrėkite beveik bet kurį tinklalapį ir pamatysite teksto ir vaizdų, sudarančių daugumą tų puslapių, derinį. Puslapyje yra labai lengva pridėti tekstą ir vaizdus . Tekstas yra koduojamas naudojant standartines HTML žymes, pvz., Pastraipas, sąrašus ir antraštes, o vaizdai yra įtraukiami naudojant elementą .

Gebėjimas padaryti šį tekstą ir tuos vaizdus gerai dirbti yra tai, kas išskiria puikius interneto dizainerius! Jūs ne tik norite, kad jūsų tekstas ir vaizdai būtų rodomi vienas po kito, tai yra tai, kaip numatytieji šie bloko lygio elementai išdėstyti. Ne, jūs norite kontroliuoti, kaip tekstas ir vaizdai siejasi su tuo, kas galiausiai bus jūsų svetainės vizualus dizainas.

Turint vaizdą, kuris yra suderintas su puslapio kairiajame krašte, o šio puslapio tekstas plinta, tai yra bendras spausdinimo dizaino ir tinklalapių dizainas. Interneto sąlygomis šis efektas žinomas kaip plūduriuojantis vaizdas . Šis stilius pasiekiamas naudojant " CSS" nuosavybę "plūduriuoti". Ši savybė leidžia tekstui eiti aplink kairę pusę išdėstytą vaizdą dešinėje pusėje. (Arba aplink dešinįjį išlygintą vaizdą į kairę pusę.) Pažiūrėkime, kaip pasiekti šį vizualinį efektą.

Pradėk nuo HTML

Pirmas dalykas, kurį turėsite padaryti, - turėti tam tikrą HTML, su kuriuo dirbti. Pavyzdžiui, parašysime teksto pastraipą ir pridėsime paveikslėlį pastraipos pradžioje (prieš tekstą, bet po atidarymo

žyma). Čia yra toks HTML žymėjimo išvaizda:

Šio punkto tekstas yra čia. Šiame pavyzdyje turime galvosūkio nuotrauką, taigi šis tekstas greičiausiai bus skirtas asmeniui, kurio vardas yra galvosūkis.

Pagal numatytuosius nustatymus mūsų tinklalapis bus rodomas su paveikslėliu virš teksto. Taip yra todėl, kad paveikslėliai yra bloko lygio elementai HTML. Tai reiškia, kad naršyklė rodo linijų plyšius prieš ir po vaizdo elemento pagal nutylėjimą. Mes pakeisime šį numatytąjį išvaizdą sukdami CSS. Visų pirma, mes pridėsime klasės reikšmę mūsų vaizdo elementui . Ši klasė veiks kaip "kablys", kurią vėliau naudosime mūsų CSS.

Šio punkto tekstas yra čia. Šiame pavyzdyje turime galvosūkio nuotrauką, taigi šis tekstas greičiausiai bus skirtas asmeniui, kurio vardas yra galvosūkis.

Atkreipkite dėmesį, kad ši "kairiųjų" klasė nieko nedaro savarankiškai! Norint pasiekti norimą stilių, mes turime naudoti kitą CSS .

CSS stiliai

Naudodamiesi mūsų HTML, įskaitant mūsų klasės atributas "kairė", mes dabar galime kreiptis į CSS. Mes pridetume taisyklę savo lentelėje stilių, kad būtų plūduriuoti šį vaizdą ir taip pat pridėti šiek tiek pamušalas šalia jo, kad tekstas, kuris galų gale apvyniotų aplink vaizdą, neuždengia jo per daug. Štai CSS, kurį galite rašyti:

. left (float: left; padding: 0 20px 20px 0; }

Šis stilius plūdina šį vaizdą į kairę ir įterpia šiek tiek užpildą (naudojant tam tikrą CSS stenografiją) į paveikslėlio dešinę ir apačią.

Jei peržiūrėjote puslapį, kuriame yra šis HTML naršyklėje, vaizdas dabar būtų nukreiptas į kairę, o pastraipos tekstas pasirodys dešinėje, nurodant tinkamą atstumą tarp dviejų. Atkreipkite dėmesį, kad klasės vertė "kairėje", kurią mes naudojome, yra savavališka. Galėtume tai pavadinti viską, nes terminas "kairė" nieko nedaro. Tai turi turėti klasės atributą HTML, kuris veikia su faktiniu CSS stiliumi, kuris diktuoja norimus atlikti vizualius pakeitimus.

Alternatyvūs būdai šiems stiliams pasiekti

Šis požiūris, kad vaizdo elementas suteiktų klasės atributą, o po to naudojant bendrąjį CSS stilių, kuris plūdina elementą, yra tik vienas iš būdų, kaip atlikti šį išvaizdą "kairiuoju lygiu". Galite priskirti klasės reikšmę nuo vaizdo ir stiliaus su CSS rašydami konkretesnį pasirinkimą. Pavyzdžiui, pažvelkime į pavyzdį, kai šis vaizdas yra skyriuje, kurio klasės reikšmė yra "pagrindinis turinys".