Hvordan lage et bildegalleri Ved hjelp av HTML og CSS
Et bilde galleri skaper en ensartet måte å vise bilder på websidene dine. Bildegallerier kan lages med CSS (Cascading Style Sheets) og HTML. Cascading stilark definere måten nettsiden vil bli lagt ut. Dette inkluderer avstanden mellom bildene, grensene rundt bildene og måten at enhver tekst vises. Stilen er definert en gang og brukes på hvert bilde. Hvis du bare brukte HTML, vil stilen må settes separat for hvert bilde.
Bruksanvisning
CSS Section
1 Lag \ "image \" klasse med følgende kode: <br /> <br /> div.image <br /> {<br /> margin: 3px <br /> GO <br /> border: 1px solid # 000000 <br /> GO <br /> height: auto <br /> GO <br /> bredde: auto <br /> GO <br /> float: left <br /> GO <br /> text-align: senter <br /> GO <br />} <br /> <br /> Dette vil skape en del for hver av bildet med en margin på 3 piksler og en svart ramme. Høyden og bredden av bildene vil bli definert i HTML-dokumentet. Bildene vil være sentrert innenfor grensen, og vil dukke opp i en horisontal linje på siden.
2 Definer den interne rammen som vises direkte rundt bildet med følgende kode: <br /> <br /> div.image img <br /> {<br /> display: inline <br /> GO <br /> margin : 4px <br /> GO <br /> border: 1px solid # ffffff <br /> GO <br />} <br /> <br /> det vil være en margin på 4 piksler mellom svart ramme og den interne hvit kant.
3 Endre den interne grensen farge til grått når den besøkende svever over bildet med følgende kode: <br /> <br /> div.image a: hover img <br /> {<br /> border: 1px solid # C0C0C0 < br /> GO <br />} <br /> <br /> Dette viser til den besøkende at bildet er en link til et større bilde.
4 Lag en klasse for bildebeskrivelse med følgende kode: <br /> <br /> div.title <br /> {<br /> text-align: center <br /> GO <br /> font-weight: normal <br /> GO <br /> bredde: 120px <br /> GO <br /> margin: 2px <br /> GO <br />} <br /> <br /> beskrivelsen vil være sentrert rett under selve bildet.
5 Lagre dokumentet som \ "gallery.css \".
HTML Seksjon
6 Åpne en ny tomt tekstdokument.
7 Start HTML-dokument med følgende kode: <br /> <br /> <html> <br /> <head>
8 Skriv linjen \ "<link rel = \" stylesheet \ "type = \" text / css \ "href = \" gallery.css \ "/> \" for å koble til \ "gallery.css \" stylesheet.
9 Skriv inn følgende kode for å lukke \ "<head> \" i HTML-dokumentet og start \ "<body> \" -delen: <br /> </ head> <br /> <body>
10 Sett det første bildet med følgende kode: <br /> <br /> <div class = \ "image \"> <br /> <a target=\"_blank\" href=\"Image1_big.htm\"> <br /> <img src = \ "images / bilde1.jpg \" alt = \ "Image1 \" width = \ "220 \" height = \ "180 \" /> <br /> </a> <br /> <div class = \ "title \"> Tekst beskrivelse </ div> <br /> </ div> <br /> <br /> Gjenta denne delen for hvert bilde du vil skal vises i galleriet.
11 Lukk HTML-dokument med følgende kode: <br /> <br /> </ body> <br /> </ html>
12 Lagre dokumentet med \ ". Html \" filtypen.