Hvordan lage en CSS Kalender
Kalendere er ofte brukt for å velge datoer for avtaler, flyavganger, hotelltilgjengelighet og når du skal sende e-kort. Vanligvis ser du kalendere i et tabellformat inkludert seks eller syv rader og syv kolonner. I en service-basert nettsted vil du se et alternativ for å slå måned og / eller år av kalenderen du se å velge en ledig dato for en tjeneste. HTML danner strukturen i kalenderen mens CSS bidrar til å skape utseendet av kalenderen.
Bruksanvisning
1 Opprett en HTML-fil i en teksteditor. Åpne en ny fil og lagre som HTML. Skriv inn følgende for å starte en webside:
<Html>
<Head>
<Title> Ny side </ title>
</ Head>
<Body>
</ Body>
</ Html>
2 Opprett en HTML-tabell. Skriv inn følgende i <body> </ body> delen av HTML-kode:
<Table>
<Tr>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
</ Tr>
</ Table>
Dette skaper sju tomme rader for bruk i kalenderen tabellen.
3 Lag en rad med lenker og måned display. Skriv inn følgende kode i <table> </ table> delen av HTML-kode:
<Tr>
<Td colspan = "2" align = "left" class = "forrige"> <a href="#"> Prev </a> </ td>
<Td colspan = "3" align = "center" class = "måned"> november 2009 </ td> </ td>
<Td colspan = "2" align = "right" class = "neste"> <a href="#"> Neste </a> </ td>
</ Tr>
4 Lag en rad for dagene i uken.
<Tr>
<Td class = "dayoftheweek"> Su </ td>
<Td class = "dayoftheweek"> Mo </ td>
<Td class = "dayoftheweek"> Tu </ td>
<Td class = "dayoftheweek"> Vi </ td>
<Td class = "dayoftheweek"> Th </ td>
<Td class = "dayoftheweek"> Fr </ td>
<Td class = "dayoftheweek"> Sa </ td>
</ Tr>
5 Lag rader for kalenderdager. Sett inn kode for å legge til rader med kalenderdager for den måneden. Se følgende eksempel:
<Tr>
<Td class = "dag"> 1 </ td>
<Td class = "dag"> 2 </ td>
<Td class = "dag"> 3 </ td>
<Td class = "dag"> 4 </ td>
<Td class = "dag"> 5 </ td>
<Td class = "dag"> 6 </ td>
<Td class = "dag"> 7 </ td>
</ Tr>
Fem eller seks rader med dette formatet kan være nødvendig, avhengig av når kalenderdager falle.
6 Definer CSS for tabellen. Over <table> linje med kode, setter du inn følgende:
<Style type = "text / css">
table {
border: 1px solid svart
GÅ
display: block
GÅ
width: 100%
GÅ
}
</ Style>
Dette gir bordet en en-pixel svart ramme og fyller bredden på siden. Definer bredde i piksler hvis du har nøyaktige målinger (dvs. bredde: 500px;).
7 Definer CSS for tabellceller. Etter tabellen CSS definisjon, modellere dine tabellceller som ligner på følgende CSS definisjon:
td.day {
font: 12px Arial
GÅ
padding: 3px
GÅ
}
Dette gir alle tabellcellene med klassen av "dag" tre piksler av padding på hver side og en skriftstørrelse på 12 piksler og en skrifttype Arial.
8 Definer CSS for linker. Gi dagen lenker en annen farge enn andre lenker. Definer stiler for velt. For eksempel:
td a {color: red; }
td.day en {color: blue; }
td.day a: hover {color: purple; text-decoration: underline; }
Dette definerer hele dagen koblinger som blå og alle andre tabellcelle koblinger som rødt. En bruker kan klikke en bestemt dag for å velge den dagen han ønsker å sjekke inn på et hotell eller dagen han ønsker å fly ut av en by. Det tredje eksemplet gir hele dagen knytter en lilla farge når svevde over, og det understreker dagen.
9 Definer CSS for måned display. Modellere følgende eksempel:
td.month {font: bold 14 piksler Verdana; }
Dette gir måneden utstilt på toppen av kalenderen bordet en skriftstørrelse på 14 piksler, fet tekst og Verdana skrift.