Hvordan lage en CSS-portefølje

Når designe og bygge en portefølje side, bør arbeidet ditt taler for seg selv. Konsentrer deg om ren stil og en enkel å bla format som ikke distrahere den besøkende. Alt du trenger for å lage en portefølje er noen grunnleggende HTML og CSS, sammen med skjermbilder av arbeidet ditt. Dette prosjektet gir god CSS praksis fordi dens enkle design trenger fortsatt et par layout triks. Du vil lære å sentrere innholdet på siden og opprette et rutenett-stil format for visning av bilder med informasjon.

Bruksanvisning

Lag filer og HTML

1 Åpne Notepad eller en kode editor og starte med en ny, tom fil. Kopier og lim inn følgende kode inn i filen:

<! DOCTYPE html>
<Html>
<Head>

&lt;title>&lt;/title>

</ Head>
<Body>
<Body>
</ Html>

Skriv inn navnet på din portefølje mellom "<title>" tags. Lagre filen med en HTML-forlengelse.

2 Legg til denne linjen med kode under "<title>" koder:

<Link rel = "stylesheet" href = "portfolio.css">

Siden HTML bruker HTML5 DOCTYPE, trenger du ikke å legge til en "type" attributt til denne koden. Opprett en tom fil og lagre den som "portfolio.css".

3 Lag en DIV og gi den en ID navnet "wrap." Inside at DIV, legg til en tittel og litt tekst til din portefølje. Dette innholdet går på innsiden av "<body>" tags:

<Div id = "wrap">
<H1> Min Portefølje </ h1>
<P> Litt informasjon om meg selv og det arbeidet jeg gjør. </ P>
</ Div>

4 Plasser et sett med "<div>" tags under blurb om din portefølje og gi den en ID navnet "portefølje". Denne porteføljen DIV vil inneholde et bildegalleri av arbeidet ditt.

<Div id = "portefølje">
</ Div>

5 Opprett din første portefølje oppføring. Siden dette er en portefølje, trenger du en miniatyr av det arbeidet som blir presentert, samt en tittel og en setning eller to om hva du gjorde. Dette vil alle gå i én, fløt DIV:

<Div class = "element">
<Img src = "sti / til / thumbnail1.png" alt = "My First Project">
<H3> mitt første prosjekt </ h3>
<P> En design prosjekt jeg gjorde for college. Dette var for en lokal veldedighet. </ P>
</ Div>

Kopier og lim eksempelet ovenfor i HTML-koden, inne i porteføljen DIV. Endre filbanen og tekst for å matche ditt første prosjekt. Bruk dette som en mal for å legge til flere oppføringer på siden, plassere hver ny DIV etter den siste.

Style portefølje med CSS

6 Gå tilbake til CSS-fil og style porteføljens bakgrunn og skrifttyper:

kropp {
bakgrunn: #eeeeee url ( 'sti / til / background.png');
color: # 555555;
font-family: Georgia, serif;
font-size: 13 piksler;
}

I "bakgrunnen" eiendom, er den første verdien vist en heksadesimale farge, etterfulgt av URL-banen til et bilde bakgrunn. Ta ut URL-banen hvis du ikke ønsker å bruke et bilde. "Farge" eiendoms farger teksten.

7 Stil tekst for overskrifter:

h1, h2 {
font-family: Arial, sans-serif;
color: # 333333;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 18px;
}

Siden overskriftene i dette eksempelet begge bruke samme mørk grå og Arial font, du kan kjede "h1" og "h2" sammen med et skille komma.

8 Angi en bredde for wrap DIV og gjøre det sentrere på siden:

pakke inn {

bredde: 960 x;
margin-left: auto;
margin-right: auto;
}

Denne koden sammen med wrap DIV, vil sentrere alle sidens innhold. En bredde på 960 piksler er vanlig for nettsteder og brukes i mange CSS bæresystem, særlig 960 Grid System.

9 Gi porteføljen en bredde og sentrer det også; det vil bli sentrert i wrap DIV:

portefølje {

width: 900px;
margin-left: auto;
margin-right: auto;
}

10 Stil og flyte hver portefølje oppføring:

.item {
float: left;
margin-right: 10px;
margin-bottom: 20px;
}

portefølje img {

border: 1px solid #bbbbbb;
padding: 5px;
bakgrunn: #ffffff;
}

Når du flyte divs inni en div, vil de fylle opp så mye horisontal plass og deretter fortsette på neste raden under. Dette skaper en flislegging effekt. Gi hvert element rett og bunnmargen for å gi avstand mellom dem.

Hint

  • Denne porteføljen vil se bedre ut hvis du gjør hver thumbnail samme størrelse.