![Introducing Divs and controlling them with classes and ids](https://i.ytimg.com/vi/kGA9RIFiyIE/hqdefault.jpg)
Sisu
- Juhised
- Määrake div-märgiste absoluutsed positsioonid
- box1 {margin-left: 100 px; }
- box2 {margin-left: 400px; }
- box3 {margin-left: 700px; }
- Ujuta DIV elemendid
- Kuidas
- Teade
- Mida sa vajad
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
-
Avage HTML-lehekülg ja sellega seotud CSS-fail HTML-i või põhilise tekstiredaktori, näiteks Notepadi, kahes erinevas aknas.
-
Leidke kõik jagatud märgendid, mis sobitatakse ja looge unikaalne klass:
Esimene divTeine div Third div
Kui "halign" on juba kasutanud klassi nime mujal HTML-is, kasutage teist ja veenduge, et see on unikaalne.
-
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 divTeine div Third div
Pange tähele juba kasutatud nimed "id".
-
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.
-
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; }
Määrake div-märgiste absoluutsed positsioonid
-
Avage tekstiredaktoris CSS-fail.
-
Määrake ainulaadne "klassi" nimi, näiteks "poolitus", sisestage "float: left"; koodi blokeerida ja salvestada fail.
-
Avage uus tekstiredaktori aknas HTML ja veenduge, et kõik elemendid, mis tuleb joondada, on külgnevad.
-
Ühendage klassi nimi "halign" kõrvalasuvate "div" elementidega, mida tuleb joondada.
-
Pange järgmine kood HTML-i "div" elementide rühma peale:
Ujuta DIV elemendid
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