Slik formaterer tekst i HTML-lister
Ved første øyekast ser HTML liste kodene ikke virker spennende. Deres opprinnelige formål var å skape punktmerkede eller nummererte lister. Når Cascading Style Sheets (CSS) ble utbredt, dyktige utviklere begynte å publisere artikler om hvordan du slår disse listene inn i kompliserte menyer og programmerere konkurrerte med hverandre for å oppfinne nye teknikker. Nå utviklere bruke lister koder for å strukturere noen liste over innhold, inkludert koblinger i menyer. De bruker deretter CSS til å style listene. Med litt CSS kunnskap og litt eksperimentering, kan du gjenskape noen av sine teknikker.
Bruksanvisning
1 Bruk denne koden i CSS for å redigere hvordan en uordnet liste vises på sidene:
ul {
list-style: disc;
background-color: colorname;
}
Erstatt "ul" med "ol" for å endre en ordnet liste i stedet. Change "colorname" med navnet på en web-safe farger eller den heksadesimale verdien av alle farger. Hver linje mellom klammeparenteser er en eiendom og dens omgivelser. Ta bare med de egenskapene du ønsker å redigere.
2 Bruk følgende CSS-kode for å redigere hvordan teksten vises innenfor <li> tags:
li {
font-family: "Skriftnavn";
farge: colorname;
background-color: colorname;
font-style: italic;
font-weight: bold;
}
Erstatt "Font Name" med navnet på en font du vil bruke, og erstatte "colorname" med navnet på en web-safe farger eller den heksadesimale koden for alle farger.
3 Still "list-style" eiendom til "ingen" for <ul> tag å strippe bort kuler. Fjern padding og margin på venstre side av <ul> tag å kvitte seg med fordypninger, med mindre du ønsker å beholde dem. Koden ser slik ut:
ul {
list-style: none;
padding-left: none;
margin-left: none;
}
4 Legg bilde kuler ved å gi <li> tags hver en bakgrunn og litt polstring. Dette er den vanligste metoden for å erstatte vanlige "plate" stil kuler. Her er koden:
li {
background-image: URL (sti / til / image.png) forlot sentrum no-repeat;
padding-left: 20px;
}
Endre banen mellom parentesene til banen til bildefilen. Bruk "venstre center" for å plassere bakgrunnsbilde til venstre og gi den en sentrert loddrett justering. Du kan også bruke "left top" for å sette den i øverste venstre hjørne. Change "padding-left" til mengden av piksler du trenger å skifte listeelementet teksten slik at den ikke overlapper den kule image.
5 Slå HTML listen til en vertikal meny ved stripping ut standard polstring, marginer og kuler. Sett hver <li> tag til «float: left" så hvert element viser side-by-side. Gi padding til <a> koder for å gjøre dem lettere å klikke. Bruk kode som dette:
ul {padding-left: none; padding-right: none; list-style: none; }
li {float: left; }
li a {padding: 10px; }
Stil <ul> tag å gi menyen en bakgrunn og deretter style <a> tags med sveveeffekter og så videre for å skape en fungerende meny.
Hint
- Place CSS-koden mellom <style> og </ style> tags på siden din hvis den ikke bruker en ekstern CSS-fil. <Style> -kodene gå mellom <head> og </ head> taggene på toppen av en HTML-fil.