Accentsconagua

Crea un sito di portafoglio elegante da zero

Codice
Share

Non c'è niente come costruire un intero sito per mostrarti una buona panoramica di come dovrebbe funzionare un layout CSS. Su PSDTUTS abbiamo un tutorial in cui hai progettato un design web elegante e di fascia alta. In questo tutorial prenderemo il file PSD e lo costruiremo con un bel HTML e CSS puliti.

Demo e codice sorgente


Passo 1

Quindi ecco il design che stiamo per costruire. Come accennato, puoi seguire il tutorial su PSDTUTS per creare questo progetto da zero. In questo tutorial costruiremo solo questa homepage, ma usando quella base potresti costruire pagine interne seguendo lo stesso layout.

Passo 2

La prima cosa da fare è decidere come struttureremo la nostra build. Questo processo diventa più facile col passare del tempo man mano che apprendi come funzionano i layout CSS. Per questo disegno penso che possiamo farcela con una build molto semplice che usa un po 'di posizionamento assoluto e una grande immagine di sfondo.

Cos'è il posizionamento assoluto?
Quando si posiziona un elemento HTML su una pagina (ad esempio a

,

e così via) ha una posizione naturale che è determinata da ciò che è venuto prima. Ad esempio, se metti giù un po 'di testo e poi ne metti un altro, apparirà naturalmente appena sotto il primo

. Passerà solo relativamente all'ultimo elemento.

Il posizionamento assoluto è diverso in quanto stai specificando un posizionamento esatto per un oggetto e portandolo fuori dal flusso regolare di elementi. Quindi se hai avuto il tuo primo come prima, ma per il tuo prossimo hai dato una posizione assoluta a sinistra: 500px; top: 500px; Quindi apparirà precisamente in quella posizione, indipendentemente dal precedente

.

Si imposta la posizione assoluta di qualcosa di simile:

 .className position: absolute; top: 0px; a sinistra: 0px;

Inconvenienti al posizionamento assoluto
Il problema principale con l'utilizzo del posizionamento assoluto è che i tuoi elementi non sono realmente in relazione l'uno con l'altro. Ad esempio, se hai un blocco di testo vicino alla parte superiore della pagina e un altro blocco di testo un po 'più in basso, potrebbe sembrare perfetto quando ogni blocco di testo è breve. Ma se il blocco in alto dovesse avere un grande tema in esso, invece di spingere il prossimo blocco di testo verso il basso, andrà semplicemente in cima. Questo perché stai prendendo gli elementi fuori dal flusso naturale della pagina.

Quindi, l'Absolute Positioning è utile solo per oggetti che sai essere sempre di una certa dimensione e che non hanno realmente bisogno di interagire con altri elementi.

Perché è utile per noi oggi
L'aspetto positivo di Absolute Positioning è che è davvero facile! Dì al browser dove mettere qualcosa ed è lì che appare! Per finire, ci sono molti meno problemi di compatibilità del browser quando posizioni le cose assolutamente. Dopo tutto 100 px è 100 px se sei in Firefox, Internet Explorer o Safari.

SOOO il nostro layout
Quindi il modo in cui andremo a creare il nostro sito Web è:

  • Avere una grande immagine di sfondo
  • Posiziona in modo assoluto il logo, i menu e il pannello della direzione esattamente dove devono apparire
  • Tutti i nostri contenuti appaiono regolarmente
    tag, ma dagli tanta imbottitura che il contenuto è spinto fino in fondo dove dovrebbe essere
  • Tieni il nostro footer seduto sotto

Se questo non ha ancora molto senso, non ti preoccupare, vedrai il sito prendere forma!

Passaggio 3

Ora in termini di immagini di sfondo, ne abbiamo bisogno di due. Uno sarà gigantesco, e infatti dopo averlo salvato come JPG ha una dimensione di circa 56kb. C'era un tempo in cui sarebbe stato un po 'troppo grande, ma di questi tempi non è un grosso problema.

Quindi questa è l'area principale, quindi abbiamo bisogno di una seconda immagine di sfondo che sarà una fetta sottile. Questa sezione si ripeterà più e più volte a destra in modo che quando si trascina la finestra del browser, si aprirà.

(Nota: il logo non dovrebbe essere mostrato sotto nell'immagine di sfondo, era solo un pessimo screenshot, scusa!)

Puoi vedere le due immagini che ho creato qui e qui.

Passaggio 4

OK, ora iniziamo il nostro HTML. Per prima cosa presentiamo alcune nozioni di base:

    PSD vs NET    
 
  
 
 
   Realizzato per un tutorial PSDTUTS e NETTUTS di Collis! Vedere il tutorial di Photoshop, vedere il tutorial Web

Come sempre è meglio lavorare dall'esterno con il nostro layout. Quindi quello che ho fatto qui è il terzo posto

'S. I primi due sono i outside_container / contenitore e l'altro è il footer. Ciò richiede una piccola spiegazione:

  1. Ho creato il outside_container e contenitore perché ho bisogno di una doppia immagine di sfondo. Ho bisogno di un'immagine di sfondo affiancata, e poi ho bisogno di quella grande immagine di sfondo. Quindi nel outside_container Metterò lo sfondo di piastrellatura, poi sul contenitore
    che apparirà in cima al contenitore esterno, avrò quel grande sfondo principale.
  2. Il piè di pagina deve essere all'esterno dei contenitori perché se la finestra del browser fosse allungata per il lungo, il piè di pagina dovrebbe andare avanti e avanti. Dal momento che ha il suo background, non può essere nei contenitori - se lo fosse e ti sei allungato a un certo punto vedresti lo sfondo del contenitore e non il piè di pagina!

Inoltre vedrai che ho aggiunto del contenuto all'interno del piè di pagina, che è solo il mini logo e il testo. Ho avvolto il testo in a tag in modo che io possa manipolarlo. Non c'è motivo di dare il tagga un ID o una classe, perché possiamo solo dire #footer img e dato che è l'unica immagine in là, possiamo chiamarla in questo modo. Ciò mantiene il nostro HTML un po 'più semplice.

Passaggio 5

Ora il codice CSS per il nostro codice finora:

 body margin: 0px; padding: 0px; background-color: # 11090a; font-family: Arial, Helvetica, sans-serif;  #outside_container background: url (images / background_slice.jpg) repeat-x # 000000;  #container background: url (images / background_main.jpg) no-repeat; min-height: 800px;  #footer border-top: 1px solid # 3f2324; imbottitura: 30px 50px 80px 50px;

Quindi, esaminando uno alla volta:

  1. Per prima cosa stiamo ridefinendo il corpo etichetta. Questa è quasi sempre la prima cosa che faccio. Ci liberiamo di eventuali margini e padding predefiniti, impostiamo un colore di sfondo e una famiglia di font per la pagina. Si noti che il colore di sfondo è in realtà il footer colore di sfondo Come ho detto prima, è così che se si allunga la finestra del browser in verticale continuerai a vedere il piè di pagina.
  2. Quindi abbiamo il outside_container etichetta. Gli ho dato quello sfondo fetta, lo ripeterò solo lungo l'asse x (cioè da sinistra a destra) e ovunque non ci sia immagine di sfondo vedremo nero dritto (# 000000). Quindi, in pratica, man mano che la pagina si allunga, le tessere non andranno avanti perché abbiamo detto di ripetere solo sinistra-destra, invece otterremo lo sfondo nero. Questo è perfetto perché la nostra immagine di affiancamento sfuma in nero!
  3. Quindi abbiamo il contenitore. Qui abbiamo l'immagine di sfondo gigantesca impostata per non ripetere - quindi appare solo una volta. Si noti che non è stato specificato un colore di sfondo, se lo avessimo avrebbe coperto il nostro contenitore outside_container. Questo perché questo
    il tag è all'interno del precedente e verrà automaticamente allungato per riempirlo completamente. Quindi la nostra immagine di sfondo appare in alto e quindi all'esterno di quella area puoi vedere lo sfondo di outside_container che mostra attraverso.
  4. Ho anche dato al contenitore un'altezza minima, questo è solo così che quando guardiamo la pagina HTML a questo punto puoi vedere approssimativamente come andrà a vedere quando c'è del contenuto. In seguito il nostro contenuto produrrà comunque l'altezza minima.
  5. Il footer è fondamentalmente solo un bordo di una singola riga e un po 'di padding. Non è necessario dargli un colore di sfondo, perché lo abbiamo impostato nel file in precedenza. Ricorda con le definizioni di padding che va così: imbottitura: superiore destra in basso a sinistra (senso orario!)

Ecco dove siamo fino ad ora ...

Visualizza il sito fino ad ora

Passaggio 6

Quindi finiremo il footer aggiungendo alcuni stili extra come questo:

 / * Footer * / #footer border-top: 1px solid # 3f2324; imbottitura: 30px 50px 80px 50px; color: # 674f5d; font-size: 9px; line-height: 14px;  #footer img float: left; margin-right: 10px;  #footer span display: block; float: sinistra; larghezza: 250px;  #footer a color: # 9e8292; text-decoration: none;  #footer a: hover color: #ffffff;

Quindi qui ho aggiunto alcuni bit alla nostra classe #footer e ho creato alcune altre classi. Passiamo attraverso un pezzo alla volta:

  1. Prima di tutto i bit tra / * e * / sono commenti CSS. È bello avere dei commenti nel tuo file CSS perché lo spezza davvero e aiuta a mantenere le cose intelligibili. In realtà su progetti più grandi trovo che i file CSS possono diventare piuttosto fuori controllo se non stai attento. Quindi è davvero bello cercare di entrare presto in buone abitudini: dai un nome ai tuoi selezionatori, aggiungi commenti, mantieni le cose simili, interrompi in più file CSS per progetti più grandi e così via.
  2. Nel #footer Ho aggiunto un colore del carattere, la dimensione del carattere e l'altezza della linea alla nostra precedente definizione. Line-height è un attributo di testo davvero utile in quanto ti aiuta a distanziare il tuo testo. Senza un buon testo di altezza della linea può sembrare ammucchiato e difficile da leggere. Troppa altezza della riga e il testo sarà così distanziato da sembrare strano. Quindi potresti voler sperimentare per trovare le altezze corrette per diversi tipi di carattere e dimensioni. Qui 14px sembrava una buona misura.
  3. Successivamente ho impostato il #footer img e estensione #footer ad entrambi galleggiano: a sinistra. Poiché entrambi sono impostati per spostarsi a sinistra, finiscono in colonne uno accanto all'altro. Parlerò di più su floating e colonne più avanti in questo tutorial.
  4. Infine diciamo al browser cosa fare tag (cioè collegamenti) che compaiono nel piè di pagina. Vale a dire che non dovrebbero essere sottolineati e dovrebbero cambiare colore quando si passa con il mouse su un mouse.

Quindi con l'aggiunta del piè di pagina è qui dove fino a:

Visualizza il sito fino ad ora

Passaggio 7

Ora con il footer di mezzo, aggiungiamo un po 'più di contenuto alla pagina all'interno delle aree del contenitore principale. Per prima cosa abbiamo bisogno di due nuove immagini che creiamo dal nostro file PSD:


Notare che ho usato un'immagine per il grande blocco di testo. In generale, è meglio usare il testo per queste cose in quanto rende la pagina più ricercabile ed è una buona pratica. Ma sarebbe stato molto più difficile da fare in quanto avremmo avuto bisogno di usare un po 'di Flash e SIFr per ottenere quell'effetto. Quindi, dato che questo è un tutorial abbastanza semplice, ho deciso di utilizzare solo una grande immagine :-)

Ecco uno snippet del nostro codice HTML: solo il bit dei contenitori:

 
 
  
     
  • ritocco
    •  
  • Effetti digitali
    •  
  • Lavoro Web
    •  
 
     
  • Di
    •  
  • Contatto
    •

Quindi all'interno dell'area del contenitore abbiamo aggiunto cinque cose:

  1. Il nostro logo: È collegato, quindi cliccarlo dovrebbe portarti alla pagina iniziale e lo ha
  2. Menu principale: Questo è semplicemente un elenco non ordinato con
  3. Il menu laterale destro: Questo è uguale all'altro menu, solo diverso
  4. Immagine grande del pannello di testo: Questo è il nostro testo di intestazione principale salvato come immagine,
  5. Contenuto Div: Ed è qui che inseriremo tutti i contenuti della nostra pagina in seguito. L'ho lasciato vuoto adesso tranne per un commento HTML.

Quindi, prima di iniziare lo styling, vale la pena dare un'occhiata per vedere come appare la pagina con tutto ciò che è stato scaricato in questo modo:

Come puoi vedere, dovremo fare dei seri cambi di direzione per mettere tutto a posto. Come ricorderai, utilizzeremo Absolute Positioning per farlo in modo rapido e semplice.

Passaggio 8

Ecco il CSS che aggiungiamo per far sì che i nostri elementi inizino a inserirsi al loro posto:

 #container background: url (images / background_main.jpg) no-repeat; min-height: 800px; Larghezza: 1000px; position: relative;  / * Logo / Menu / Posizionamento pannelli * / #logo posizione: assoluta; top: 58px; a sinistra: 51px;  #panel position: absolute; top: 165px; a sinistra: 51px;  menu ul # margin: 0px; padding: 0px; position: absolute; top: 145px; a sinistra: 75px;  ul # right_menu margin: 0px; padding: 0px; position: absolute; top: 145px; destra: 75px;

Quindi, ripassiamo ogni pezzo pezzo per pezzo:

  1. Prima di tutto, vedrai un vecchio bit del nostro codice: il contenitore. L'ho mostrato perché ora ho aggiunto altre due righe. Ora ha un Larghezza: 1000px e position: relative. Questo è importante perché quando si imposta la posizione per essere relativi, tutto ciò che è assolutamente posizionato all'interno è fatto così parente a quel tag contenitore. Quindi questo significa che posso posizionare le cose all'interno di questa scatola, usando il fatto che so che è largo 1000px. Vale a dire che lo userò per il right_menu.
  2. Successivamente, poiché si tratta di un nuovo set di CSS, l'ho suddiviso con un commento
  3. Con il logo e pannello Ho dato sia una posizione assoluta sulla pagina. Come faccio a sapere quali numeri usare? Semplice tornare al documento originale di Photoshop e misurare dove sono destinati a essere! Potete vedere che è una definizione di classe davvero semplice, ed è per questo che il posizionamento assoluto è così facile.
  4. Successivamente con i due menu, anche questi sono posizionati in modo assoluto, ma qui li ho anche dati margine: 0px; padding: 0px; definizioni per assicurarci di eliminare tutti i margini e il riempimento predefiniti che hanno gli elenchi non ordinati.
  5. Il prossimo avviso che sul right_menu quando ho specificato la posizione assoluta per essere a destra: 75px. Ciò significa che apparirà a 75 px dal lato destro del suo contenitore. Normalmente quella sarebbe la finestra del browser, ma perché ricorda prima ho impostato il contenitore avere position: relative questo significa che sarà a 75px di distanza dal lato destro di
    .

    Ora potresti star pensando, beh, qual è il punto, non posso semplicemente posizionare le cose usando sinistra solo? Beh, puoi, ma con il nostro menu, se dovessi aggiungere elementi di menu aggiuntivi, dovresti riposizionarlo ancora e ancora in modo che fosse ancora a 75px dal lato destro. Considerando che usando destra le voci del menu extra scorrono quando le aggiungi. Provalo e guarda!

Quindi ecco dove siamo a:

Passaggio 9

Come puoi vedere nell'immagine precedente, il logo e l'elemento di direzione ora sembrano essere nella giusta posizione. Ma i menu sembrano piuttosto strani. Prima di dar loro forma, una parola veloce sul logo / pannello immagine. Ci si potrebbe chiedere, se sono entrambe le immagini, perché non renderle parte dell'immagine di sfondo?

La risposta è che il logo che vogliamo rendere collegabile, in modo che facendo clic su di esso si ritorna alla pagina iniziale (rende il sito più utilizzabile), e il pannello di testo principale, che probabilmente cambierebbe da una pagina all'altra. Quindi, avendo una singola immagine, possiamo avere molte pagine HTML usando lo stesso foglio di stile CSS ma semplicemente posizionando un'immagine diversa lì con un testo differente.

Ora diamo uno stile ai due menu e facciamo in modo che la nostra pagina inizi a prendere forma. Per fare ciò abbiamo bisogno del seguente CSS:

 ul # menu margin: 0px; padding: 0px; position: absolute; top: 138px; a sinistra: 75px;  ul # right_menu margin: 0px; padding: 0px; position: absolute; top: 138px; destra: 110px;  menu ul # li, ul # right_menu li margin: 0px; padding: 0px; list-style: none; margin-right: 10px; font-size: 9px; text-transform: uppercase; display: inline;  ul # menu li a, ul # right_menu li a text-decoration: none; color: # bd92b2;  ul # menu li a: hover, ul # right_menu li a: hover text-decoration: none; color: #FFFFFF;

I primi due bit di questo codice sono gli stessi di prima (anche se ho regolato leggermente le posizioni per farle apparire subito dopo lo styling). Si noti che queste due definizioni sono separate in quanto hanno posizioni diverse, ma in seguito abbiamo combinato le due definizioni nella stessa classe in cui le stesse voci del menu dovrebbero apparire uguali. Il formato per la definizione di due classi insieme è:

.myClass, .myClass2 ...

Questo è molto diverso da questa definizione:

.myClass .myClass2 ...

Perché la seconda definizione dice, tutti gli elementi con dentro un elemento con.

Comunque, tornando ai nostri stili, passiamo attraverso alcuni punti importanti:

  1. Abbiamo impostato il

E con questo, la nostra pagina ora sta andando bene!

Visualizza il sito fino ad ora

Passaggio 10

Adesso è il momento di aggiungere del contenuto! Per prima cosa aggiungiamo un testo fittizio, impostiamo in modo che possiamo creare colonne. Ecco l'HTML:

 
 
  
     
  • ritocco
    •  
  • Effetti digitali
    •  
  • Lavoro Web
    •  
 
     
  • Di
    •  
  • Contatto
    •  
  
 
 
un design elegante
 
Testo fittizio: questo disegno è stato realizzato per un tutorial di sviluppo web e di photoshop. Puoi vedere la prima parte su PSDTUTS.com dove impari come creare un design bello ma semplice usando uno sfondo e un tipo astratti.
 
La seconda parte del tutorial è disponibile su NETTUTS.com, dove facciamo una rapida compilazione del PSD in un sito HTML / CSS funzionante e funzionante.
 
Questo disegno è stato realizzato per un tutorial di sviluppo web e di photoshop. Puoi vedere la prima parte su PSDTUTS.com dove impari come creare un design bello ma semplice usando uno sfondo e un tipo astratti.
 
La seconda parte del tutorial è disponibile su NETTUTS.com, dove facciamo una rapida compilazione del PSD in un sito HTML / CSS funzionante e funzionante.
 
 
 
tutorial
 
Testo fittizio: questo disegno è stato realizzato per un tutorial di sviluppo web e di photoshop. Puoi vedere la prima parte su PSDTUTS.com dove impari come creare un design bello ma semplice usando uno sfondo e un tipo astratti.
 
La seconda parte del tutorial è disponibile su NETTUTS.com, dove facciamo una rapida compilazione del PSD in un sito HTML / CSS funzionante e funzionante.
 
Questo disegno è stato realizzato per un tutorial di sviluppo web e di photoshop. Puoi vedere la prima parte su PSDTUTS.com dove impari come creare un design bello ma semplice usando uno sfondo e un tipo astratti.
 
La seconda parte del tutorial è disponibile su NETTUTS.com, dove facciamo una rapida compilazione del PSD in un sito HTML / CSS funzionante e funzionante.
 
 
 
lavoro recente
 
Testo fittizio: questo disegno è stato realizzato per un tutorial di sviluppo web e di photoshop. Puoi vedere la prima parte su PSDTUTS.com dove impari come creare un design bello ma semplice usando uno sfondo e un tipo astratti.
 
La seconda parte del tutorial è disponibile su NETTUTS.com, dove facciamo una rapida compilazione del PSD in un sito HTML / CSS funzionante e funzionante.
 
Questo disegno è stato realizzato per un tutorial di sviluppo web e di photoshop. Puoi vedere la prima parte su PSDTUTS.com dove impari come creare un design bello ma semplice usando uno sfondo e un tipo astratti.
 
La seconda parte del tutorial è disponibile su NETTUTS.com, dove facciamo una rapida compilazione del PSD in un sito HTML / CSS funzionante e funzionante.

OK, in questo frammento puoi vedere che ho aggiunto 3 nuovi

è all'interno dell'area del contenuto. Ognuno ha un

elemento titolo e loro un po 'di testo. Hanno nomi di classi column1, column2 e column3. Il motivo per cui ho aggiunto tutto il testo in più è di mostrarti qualcosa su come creare colonne.

Innanzitutto aggiungiamo alcuni CSS per farli apparire come colonne:

 / * Contenuto * / #content padding-top: 435px; padding-left: 85px; larghezza: 815px; color: # 674f5d; font-size: 13px; line-height: 20px;  .column1 float: left; larghezza: 230px; margin-right: 30px;  .column2 float: left; larghezza: 230px; margin-right: 30px;  .column3 float: left; larghezza: 270px;

Come al solito ho eliminato il nostro nuovo bit di CSS con un commento. Quindi ho impostato alcuni stili per #soddisfare. Notate quanta padding-top c'è ... 435px! Questo per fare spazio a tutti quegli elementi posizionati in modo assoluto prima. A differenza di questi elementi, questa area di contenuto si trova nel normale flusso della pagina.

Deve essere nel flusso regolare perché quando si aggiunge più contenuto, dovrebbe spingere il piè di pagina verso il basso. Se fosse posizionato in modo assoluto, sarebbe sufficiente andare oltre il piè di pagina.

Ora le tre classi di colonne, notano che sono ciascuna impostata con una larghezza e con float: sinistra. Questo dice loro che dovrebbero spostarsi a sinistra della pagina allineata accanto a qualsiasi altro elemento flottante a sinistra. Ho dato ai primi due un margine destro in modo che non siano bloccati l'uno con l'altro.

Il galleggiamento di un elemento lo fa andare alla deriva a sinistra oa destra e dice a tutto il resto di avvolgerlo. Quando anche gli altri elementi sono flottati, si formano in colonne. Generalmente, ogni volta che vedi un layout di colonna, usa i float.

Sfortunatamente c'è uno strano problema con i float. Vale a dire che hanno un problema con i loro contenitori. Invece di spingere gli elementi successivi verso il basso, si spostano semplicemente verso l'alto. Il modo per risolvere questo problema è avere un elemento che viene dopo di loro che ha la proprietà clear: both.

La proprietà Clear dice di smettere di avvolgere roba attorno al floating

'S. È un po 'difficile da spiegare, quindi diamo un'occhiata a cosa succede con e senza la compensazione.

Senza compensazione
Ecco come appare il layout com'è:

Guarda come le colonne si sono spostate sulla parte superiore del piè di pagina e il piè di pagina stesso ha iniziato a avvolgerle attorno. Non è giusto!!

Con Clearing
La soluzione è abbastanza semplice, dobbiamo aggiungere un

dopo le tre colonne come questa:

 
 
 
un design elegante
 
Questo disegno è stato realizzato per un tutorial di sviluppo web e di photoshop. Puoi vedere la prima parte su PSDTUTS.com dove impari come creare un design bello ma semplice usando uno sfondo e un tipo astratti.
 
La seconda parte del tutorial è disponibile su NETTUTS.com, dove facciamo una rapida compilazione del PSD in un sito HTML / CSS funzionante e funzionante.
 
Questo disegno è stato realizzato per un tutorial di sviluppo web e di photoshop. Puoi vedere la prima parte su PSDTUTS.com dove impari come creare un design bello ma semplice usando uno sfondo e un tipo astratti.
 
La seconda parte del tutorial è disponibile su NETTUTS.com, dove facciamo una rapida compilazione del PSD in un sito HTML / CSS funzionante e funzionante.
 
 
 
tutorial
 
Questo disegno è stato realizzato per un tutorial di sviluppo web e di photoshop. Puoi vedere la prima parte su PSDTUTS.com dove impari come creare un design bello ma semplice usando uno sfondo e un tipo astratti.
 
La seconda parte del tutorial è disponibile su NETTUTS.com, dove facciamo una rapida compilazione del PSD in un sito HTML / CSS funzionante e funzionante.
 
Questo disegno è stato realizzato per un tutorial di sviluppo web e di photoshop. Puoi vedere la prima parte su PSDTUTS.com dove impari come creare un design bello ma semplice usando uno sfondo e un tipo astratti.
 
La seconda parte del tutorial è disponibile su NETTUTS.com, dove facciamo una rapida compilazione del PSD in un sito HTML / CSS funzionante e funzionante.
 
 
 
lavoro recente
 
Questo disegno è stato realizzato per un tutorial di sviluppo web e di photoshop. Puoi vedere la prima parte su PSDTUTS.com dove impari come creare un design bello ma semplice usando uno sfondo e un tipo astratti.
 
La seconda parte del tutorial è disponibile su NETTUTS.com, dove facciamo una rapida compilazione del PSD in un sito HTML / CSS funzionante e funzionante.
 
Questo disegno è stato realizzato per un tutorial di sviluppo web e di photoshop. Puoi vedere la prima parte su PSDTUTS.com dove impari come creare un design bello ma semplice usando uno sfondo e un tipo astratti.
 
La seconda parte del tutorial è disponibile su NETTUTS.com, dove facciamo una rapida compilazione del PSD in un sito HTML / CSS funzionante e funzionante.

Vedere il

in fondo? È solo un vuoto
che dice di cancellare le tre colonne. E risolve il nostro problema,

Guarda il sito qui.

Alcune ultime parole su Floats & Clearing Them
Ci si potrebbe chiedere perché non ho posto il "chiaro: entrambi" nel

definizione, ma sfortunatamente non funziona a causa dello sfondo che stiamo usando ... ecco uno screenshot:

Apparentemente c'è una soluzione che non comporta l'inserimento di un inutile

tag, e puoi leggere a riguardo su QuirksMode. Personalmente ho usato questo metodo per un po ', e funziona bene e coerentemente, quindi continuo a farlo.

Passaggio 11

OK, quasi lì ora !! Il layout principale è tutto ordinato, tutto ciò che dobbiamo fare è aggiungere e modellare il nostro contenuto. Ecco l'HTML per questo:

 
 
 
un design elegante
 
Questo disegno è stato realizzato per un tutorial di sviluppo web e di photoshop. Puoi vedere la prima parte su PSDTUTS.com dove impari come creare un design bello ma semplice usando uno sfondo e un tipo astratti.
 
La seconda parte del tutorial è disponibile su NETTUTS.com, dove facciamo una rapida compilazione del PSD in un sito HTML / CSS funzionante e funzionante.
 
 
 
tutorial
 
Psdtuts e nettuts forniscono tutorial sui seguenti argomenti (sorta):

È fondamentalmente la stessa struttura di prima tranne che nella terza colonna che ho creato

×