Kuidas viia DIV-d horisontaalselt CSS-sse

Autor: Marcus Baldwin
Loomise Kuupäev: 18 Juunis 2021
Värskenduse Kuupäev: 1 Juuli 2024
Anonim
Introducing Divs and controlling them with classes and ids
Videot: Introducing Divs and controlling them with classes and ids

Sisu

HTML "div" sildid määratlevad veebilehtede paigutuse. Cascading stiililehti kasutatakse HTML-siltide kujundamiseks lehekülgedel. Teatud stiilide rakendamiseks kasutatakse CSS-is "id" ja "class" omadusi. Neid stiile, mis on ühised mitmetele "div" sildidele, saab määratleda "klassis", kuid unikaalsed stiilid tuleb määratleda konkreetse "div" märgi "id" omadusega, kuna seda omadust saab kasutada ainult üks kord. Külgneva div-elemendi ilmub eelmise "div" elemendi all, kui ei rakendata horisontaalselt joondavat stiili.


Juhised

HTML "div" sildid kõrvaldavad vajaduse kasutada tabeleid lehekülje paigutuse jaoks (Comstock / Comstock / Getty Images)

    Määrake div-märgiste absoluutsed positsioonid

  1. Avage HTML-lehekülg ja sellega seotud CSS-fail HTML-i või põhilise tekstiredaktori, näiteks Notepadi, kahes erinevas aknas.

  2. Leidke kõik jagatud märgendid, mis sobitatakse ja looge unikaalne klass:

    Esimene div

    Teine div Third div

    Kui "halign" on juba kasutanud klassi nime mujal HTML-is, kasutage teist ja veenduge, et see on unikaalne.

  3. Andke "id" nimed kõigile "div" elementidele, mida tuleb joondada. Paigutuse järjekorra kindlakstegemiseks lisage nimedesse numbrid. Näiteks kasutage nimetusi "box1", "box2" ja nii edasi:


    Esimene div

    Teine div Third div

    Pange tähele juba kasutatud nimed "id".

  4. Avage CSS-fail ja sisestage järgmine:

    .halign {asukoht: absoluutne; top: XXX; }

    Asendage "XXX" absoluutse ülemise ja horisontaalse joondusjoone vahele jääva väärtusega. Kasutage piksliväärtusi või protsente, sõltuvalt teistest div-elementidest, mis on paigutatud "halign" klassi kohal.

  5. Redigeerige CSS-i üksikuid "div" stiilis plokke. Leidke koodis nimed "id" ja lisage iga ploki sees "vasak: YYY" koodirida, asendades "YYY" elementide vasakpoolsete marginaalide absoluutväärtustega. "Absoluutne marginaal" on ruum brauseri ekraani serva ja vastava div. Marginaalidel on suuremad väärtused, et panna divid kõrvale:

    box1 {margin-left: 100 px; }

    box2 {margin-left: 400px; }

    box3 {margin-left: 700px; }

    Ujuta DIV elemendid

  1. Avage tekstiredaktoris CSS-fail.


  2. Määrake ainulaadne "klassi" nimi, näiteks "poolitus", sisestage "float: left"; koodi blokeerida ja salvestada fail.

  3. Avage uus tekstiredaktori aknas HTML ja veenduge, et kõik elemendid, mis tuleb joondada, on külgnevad.

  4. Ühendage klassi nimi "halign" kõrvalasuvate "div" elementidega, mida tuleb joondada.

  5. Pange järgmine kood HTML-i "div" elementide rühma peale:

Kuidas

  • Kui ükskõik millises kõnealuses divisjonis on kasutatud mõnda klassi nime, sisestage täiendavad klassi nimed ja eraldage need vahedega. Kui veebileht omab vedeliku laiust, kasutage marginaali väärtuste ja tühikute protsente, nii et ploki ja piiride suurused muutuvad automaatselt vastavalt ekraani suurusele ja eraldusvõimele. Fikseeritud laiusega veebilehtede kujunduselemendid ei ole kohandatavad ekraani suurusele või eraldusvõimele ning piksliväärtused on marginaalide jaoks sobivad.

Teade

  • Mõned CSS-koodid toodavad eri brauserites ainulaadset käitumist. Testige kõigi CSS- ja HTML-koodide ühilduvust. See pole testimine, mis võib vähendada veebilehe kättesaadavust ja kasutatavust.

Mida sa vajad

  • Tekstiredaktor