Sisu
- Looge HTML-is tabel
- Samm 1
- 2. samm
- 3. samm
- 4. samm
- 5. samm
- Kohandage kalendrit
- Samm 1
- 2. samm
- peakalender {
- 3. samm
- kolmas kalender,
- td kalender {
- 4. samm
- td span kalender {
Ehkki tabelid on veebilehtede kujunduse loomisel poolehoiust välja kukkunud, sobivad need HTML-kalendrite kodeerimiseks siiski hästi. Kalendrid kuvavad tabeliandmeid omamoodi, kui need on korraldatud kuupäevaruudustikus veergudega, näiteks nädalapäevad. Täiendav CSS-kood muudab nimede ja numbritega tüütu võrgu sarnasemaks kalendriga. Kuna kalendri sündmused vajavad ruumi nii kuupäevade arvu kui ka sündmuste jaoks, tuleb kuupäevade vormindamiseks kasutada CSS-i nii, et mõlemad andmed oleksid loetavad.
Looge HTML-is tabel
Samm 1
Kalendri struktureerimiseks looge tabel. Selle tabeli jaoks on vaja päist, milles on seitse lahtrit, üks igale nädalapäevale. Samuti on vaja luua kuus rida tavalisi tabelirakke. Kopeerige ja kleepige väljavõte Notepadi või koodiredaktori abil veebilehele.
| Pühapäev | Esmaspäev | Teisipäev | Kolmapäev | Neljapäev | Reede | Laupäev |
|---|
See kood loob tabeli ja pealkirja. Kui veebisait kasutab tabeleid teistel lehtedel, kasutatakse tabelis identifitseerimisnimetust "kalender".
2. samm
Lisage silti "" alla paar kehamärgendit:
3. samm
Kopeerige järgmine kood ja kleepige see "
"kuus korda:Selle koodiga luuakse iga rida seitsme lahtriga, nii et kuue neist lisades on kalendris kõik andmeruumid, mida vajate aasta kõik kuudeks.
4. samm
Lisage kalendrisse kuupäevad vastavalt kuule, mida soovite näidata. Vaadake päriskalendrit ja olge ettevaatlik, et mitte kuupäeva vahele jätta ega korrata. Lisage iga kuupäev siltidega, et saaksite numbreid hiljem kohandada:
5. samm
Pange tähele lahtrites olevad sündmused, mis sisaldavad asjakohaseid kuupäevi. Sündmused peavad olema väljaspool silte "", kuid "" sees
’:
Halloweeni pidu!
Viimane päev registreerumiseks.
Kohandage kalendrit
Samm 1
Leidke
Kontuur on valikuline, kuid see on kõige sobivam viis piiride lisamiseks praeguste veebilehtede tabelitesse.
2. samm
Kohandage tabeli pealkirja tähtede värviga ja taustaga teisega:
peakalender {
värv: #ffffff; taustavärv: tumesinine; fondi kaal: paks; }
Võimalik on kasutada kuueteistkümnendkoha koodi või värvide nime. Selles pealkirjas kuvatakse valge tekst tumesinisel taustal.
3. samm
Täitmine, äärised, laius ja asukoht tabeli lahtrite suhtes:
kolmas kalender,
td kalender {
polster: 20px; ääris: 1px must; laius: 100px; positsioon: sugulane; }
Suhteline paigutus võimaldab programmeerijatel hiljem tabelirakkude nurkadesse kuupäevad numbrite kujul paigutada. Ärge määrake kõrgust, kuna see piirab teksti lisamist mis tahes kuupäevale.
4. samm
Looge numbrid täitmise, taustavärvi ja absoluutse positsioneerimise abil:
td span kalender {
fondi kaal: paks; positsioon: absoluutne; põhi: 0; paremal: 0; kuva: plokk; polster: 5px; taustavärv: #eeeeee; }
Peate lisama "display: block", et sildid "" toimiksid veebilehel kastidena, vastasel juhul ei saa te neid täita. Selle näidiskoodi abil luuakse iga kuupäevaruumi vasakus alanurgas nõrk hall kast, kus kuvatakse kuupäevanumber.