Construiți un site de portofoliu elegant de la zero

Nu este nimic de genul construirii unui întreg site pentru a vă arăta o imagine de ansamblu asupra modului în care ar trebui să funcționeze un aspect CSS. Peste la PSDTUTS avem un tutorial unde proiectați un design web elegant, de înaltă calitate. În acest tutorial vom lua acel fișier PSD și îl vom construi cu niște HTML și CSS curat.

Demo și cod sursă

Pasul 1

Deci, aici este designul pe care îl vom construi. După cum sa menționat, puteți urma tutorialul de la PSDTUTS pentru a construi acest design de la zero. În acest tutorial vom construi doar această pagină de pornire, cu toate acestea folosind ca bază veți putea să construiți pagini interioare urmând același aspect.

Pasul 2

Primul lucru pe care trebuie să faceți este să decideți cum vom structura construirea noastră. Acest proces devine mai ușor în timp, în timp ce aflați cum pot să funcționeze layout-urile CSS. Pentru acest design cred că putem să scăpăm cu o construcție foarte simplă, care utilizează un pic de poziționare absolută și o imagine de fundal mare.

Ce este poziționarea absolută?
Când plasați un element HTML pe o pagină (de ex

și așa mai departe) are o poziție naturală determinată de ceea ce a apărut înainte. Deci, de exemplu, dacă ați pus un jos cu un text în ea, și apoi locul pe altul va apărea în mod natural chiar sub prima

. Va curge doar în raport cu ultimul element.

Poziția absolută este diferită prin faptul că precizați o plasare exactă pentru un obiect și scoateți-o din fluxul regulat de elemente. Deci, dacă ați avut prima dvs. la fel ca înainte, dar pentru următoarea dvs. ați dat o poziție absolută de stânga: 500px; top: 500px; Apoi ar părea exact în acea locație, indiferent de precedent

Ați stabilit poziția absolută a unui astfel de lucru:

 .className poziție: absolută; top: 0px; stânga: 0px;

Dezavantaje la poziționarea absolută
Principala problemă cu utilizarea poziționării absolute este că elementele dvs. nu se raportează într-adevăr unul la celălalt. De exemplu, dacă aveți un bloc de text în partea de sus a paginii dvs. și un alt bloc de text puțin mai jos, ar putea părea grozav atunci când fiecare bloc de text este scurt. Dar dacă blocul de top ar avea un eseu mare în el, atunci în loc să împingă următorul bloc de text în jos, acesta va trece peste partea de sus. Acest lucru se datorează faptului că eliminați elementele din fluxul natural al paginii.

Poziția absolută este utilă doar pentru obiectele despre care știți că va fi întotdeauna o anumită dimensiune și care nu au nevoie să interacționeze cu alte elemente.

De ce este util pentru noi azi
Lucrul bun despre poziționarea absolută este că este într-adevăr foarte ușor! Spuneți browser-ului unde să pună ceva și acolo se vede! În plus, există mult mai puține probleme de compatibilitate cu browserul, atunci când poziționați lucrurile absolut. După toate cele 100 de pixeli este de 100 pixeli dacă sunteți în Firefox, Internet Explorer sau Safari.

SOOO aspectul nostru
Deci, modul în care vom face site-ul nostru este:

Aveți o imagine de fundal mare
Poziționați cu desăvârșire logo-ul, meniurile și panoul de direcție exact unde sunt destinate să apară
Deschideți conținutul nostru în mod obișnuit
eticheta, dar dați-i atât de multă atenție că conținutul este împins până la locul în care este destinat
Pune subsolul nostru jos

În cazul în care acest lucru nu face încă o mulțime de sens, nu vă faceți griji că va așa cum veți vedea site-ul ia forma!

Pasul 3

Acum, în ceea ce privește imaginile de fundal, avem nevoie de două. Unul va fi gigantic, și de fapt, după ce l-am salvat ca un JPG este de aproximativ 56kb în dimensiune. A fost un moment în care ar fi fost un pic prea mare, dar în zilele noastre nu e mare lucru.

Deci asta este zona principală, atunci avem nevoie de oa doua imagine de fundal care va fi o felie subțire. Această secțiune se va repeta din nou și din nou în dreapta, astfel încât atunci când fereastra browserului este târâtă, deschideți dalele.

(Rețineți că sigla nu ar trebui să apară mai jos în imaginea de fundal, care a fost doar o captură de ecran rău, îmi pare rău!)

Puteți vedea cele două imagini pe care le-am creat aici și aici.

Pasul 4

OK, acum să începem HTML-ul nostru. În primul rând, vom stabili câteva elemente de bază:

    PSD vs NET       
 
    Realizat pentru un tutorial PSDTUTS și NETTUTS de către Collis! Consultați Tutorialul Photoshop, consultați Tutorialul Web

Ca întotdeauna este mai bine să lucrați din exterior cu aspectul nostru. Deci, ce am făcut aici este locul trei mari

E. Primele două sunt outside_container / recipient iar celălalt este subsol. Acest lucru necesită puțin explicații:

Am creat outside_container și recipient pentru că am nevoie de o imagine de fundal dublă. Asta e nevoie de o imagine de fundal tigla, iar apoi de asta am nevoie de imaginea de fundal mare. Deci, în outside_container Voi pune fundalul tiglei, apoi pe recipient
care va apărea pe partea superioară a containerului exterior, voi avea fundalul principal.
Subsolul trebuie să fie în afara containerelor, deoarece dacă fereastra browserului ar fi întins longitudinal, subsolul ar trebui să meargă mai departe. Deoarece are propriul fundal, nu poate fi în recipiente - dacă ar fi fost și dacă v-ați întins la un moment dat, ați vedea fundalul containerului și nu subsolul!

De asemenea, veți vedea că am adăugat conținut în interiorul subsolului, care este doar sigla mini și textul. Am înfășurat textul într-un etichetă, astfel încât să o pot manipula. Nu există niciun motiv pentru a da eticheta un id sau o clasă, pentru că putem spune doar #footer img și din moment ce este singura imagine acolo, putem să o numim astfel. Acest lucru păstrează HTML-ul nostru un pic mai simplu.

Pasul 5

Acum CSS pentru codul nostru până acum:

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

Deci trecând unul câte unul:

În primul rând, redefinim corp etichetă. Acesta este aproape întotdeauna primul lucru pe care îl fac. Vom scăpa de orice margine implicită și de umplutură, setați o culoare de fundal și o familie de fonturi pentru pagină. Observați că culoarea de fundal este de fapt subsol culoarea de fundal. După cum am menționat anterior, acest lucru este astfel încât, dacă întindeți fereastra browserului pe verticală, veți continua să vedeți subsolul.
Apoi avem outside_container etichetă. I-am dat fundul de felie, se va repeta doar de-a lungul axei x (adica de la stanga la dreapta) si oriunde nu exista imaginea de fundal vom vedea negru drept (# 000000). Deci, practic, pe măsură ce pagina devine mai lungă, plăcile nu vor continua, deoarece am spus să repetăm doar stânga-dreapta, în schimb vom obține fundalul negru. Acest lucru este perfect deoarece imaginea noastră de tigla se estompează la negru!
Apoi avem recipient. Aici avem imaginea de fundal gigantică setată să nu se repete - așa că apare o singură dată. Observați că nu am specificat o culoare de fundal, dacă am fi avut-o că ar fi acoperit contul nostru exterior_container. Asta pentru că asta
eticheta se află în interiorul celei anterioare și se va întinde automat pentru ao umple complet. Deci imaginea noastră de fundal apare pe partea de sus și apoi în afara acelei zone puteți vedea fundalul exterior_container care se afișează prin.
De asemenea, am dat containerului o înălțime minimă, așa că atunci când ne uităm la pagina HTML în acest moment, puteți vedea aproximativ cum va arăta când va fi conținut. Mai târziu, conținutul nostru va produce în orice caz înălțimea minimă.
Foaterul este în esență doar o singură margine de linie și unele umpluturi. Nu este nevoie să dați o culoare de fundal, pentru că am stabilit că în mai devreme. Amintiți-vă cu definițiile de umplutură: umplutura: partea de sus dreapta sus la stânga (Sensul acelor de ceasornic!)

Iată unde suntem până acum ...

Vezi site-ul de departe

Pasul 6

Apoi vom termina acel subsol adăugând câteva stiluri suplimentare:

 / * Footer * / #footer frontieră-sus: 1px solid # 3f2324; zăpadă: 30px 50px 80px 50px; Culoare: # 674f5d; font-size: 9px; line-height: 14px;  #footer img float: stânga; marja de-dreapta: 10px;  # spoter span afișare: bloc; plutește la stânga; lățime: 250px;  #footer a culoare: # 9e8292; text-decoration: none;  #footer a: hover culoare: #ffffff;

Deci, aici am adaugat cateva biți la clasa #footer si am creat cateva clase. Să trecem printr-o singură bucată:

Mai întâi de toate biții între / * și * / sunt comentarii CSS. Este bine să aveți comentarii în fișierul dvs. CSS, deoarece acesta o sparge într-adevăr și vă ajută să păstrați lucrurile inteligibile. De fapt, în cazul proiectelor mai mari, găsesc că fișierele CSS pot fi destul de necontrolate dacă nu ești atent. Deci, este foarte bine să încercați să intrați devreme în obiceiuri bune: numiți bine selectorii, adăugați comentarii, păstrați lucrurile împreună, spargeți mai multe fișiere CSS pentru proiecte mai mari și așa mai departe.
În #subsol Am adăugat o culoare a fontului, mărimea fontului și înălțimea liniei la definiția noastră anterioară. Înălțimea liniei este un atribut de text foarte util, deoarece vă ajută să spațiați textul. Fără text de înaltă linie de înălțime poate arăta aglomerat și mai greu de citit. Prea multă înălțime a liniei și textul va fi atât de distanțat încât pare ciudat. Deci, poate doriți să experimentați pentru a găsi înălțimile potrivite pentru diferite fonturi și dimensiuni. Aici 14px părea o potrivire bună.
Apoi am setat #footer img și # spoter span la ambele plutiți: stânga. Deoarece ambele sunt setate să plutească la stânga, ele ajung în coloane una lângă cealaltă. Voi vorbi mai multe despre plutitor și coloane mai târziu în acest tutorial.
În sfârșit, îi spunem browserului ce să facă (de ex. link-uri) care apar în subsolul paginii. Și anume că acestea nu trebuie subliniate și ar trebui să schimbe culoarea când treceți cu un mouse.

Deci, cu adăugarea subsolului aici este locul unde:

Vezi site-ul de departe

Pasul 7

Acum, cu subsolul din drum, să adăugăm un conținut mai mult la pagina din interiorul zonelor principale de containere. Mai întâi avem nevoie de două imagini noi pe care le facem din fișierul nostru PSD:

Observați că am folosit o imagine pentru blocul mare de text. În general, este mai bine să utilizați text pentru aceste lucruri, deoarece face pagina mult mai ușor de căutat și este o practică bună. Dar ar fi fost mult mai greu de făcut, deoarece am fi nevoie să folosim un pic de Flash și SIFr pentru a obține acest efect. Deci, deoarece acesta este un tutorial destul de simplu, am optat pentru a folosi doar o imagine mare :-)

Iată un fragment al codului nostru HTML - doar bitul de containere:

     Retușarea
 Efecte digitale
 Web Work
 
  Despre
 a lua legatura

Deci, în interiorul zonei cu containere am adăugat cinci lucruri:

Logo-ul nostru: Este legat, așa că faceți clic pe acesta ar trebui să vă ducă la pagina de pornire, și a făcut-o
Meniu principal: Aceasta este pur și simplu o listă neordonată cu
Meniul din partea dreaptă: Acest lucru este același ca și celălalt meniu, altfel
Imagine din panoul de text mare: Acesta este textul principal din titlu, salvat ca imagine,
Conținut Div: Și aici vom plasa întregul conținut al paginii mai târziu. Am lăsat-o goală chiar acum, cu excepția unui comentariu HTML.

Asa ca inainte de a incepe sa facem stilul, merita sa aruncam o privire sa vedem cum arata pagina cu tot ce a facut obiectul:

După cum vedeți, va trebui să facem o schimbare serioasă în jurul nostru pentru a obține totul în loc. După cum vă amintiți, vom folosi poziția absolută pentru a face acest lucru rapid și ușor.

Pasul 8

Iată CSS-ul pe care îl adăugăm pentru a face ca elementele noastre să se potrivească:

 #container fundal: url (images / background_main.jpg) no-repeat; min-height: 800px; lățime: 1000px; Poziția: relativă;  / * Logo / Meniu / Poziție panou * / #logo position: absolute; top: 58px; stânga: 51px;  #panel poziție: absolută; top: 165 pixeli; stânga: 51px;  ul # meniu margine: 0px; padding: 0px; Poziția: absolută; top: 145px; stânga: 75px;  ul # dreapta_menu margine: 0px; padding: 0px; Poziția: absolută; top: 145px; dreapta: 75px;

Deci, din nou, să trecem prin fiecare piesă bucată cu bucăți:

Mai întâi, veți vedea un fragment vechi al codului nostru - recipient. Am arătat acest lucru după cum am adăugat acum încă două linii. Acum are a Lățime: 1000px și Poziția: relativă. Acest lucru este important deoarece, atunci când setați poziția pentru a fi relativ, ceva absolut poziționat în interior, se face astfel rudă la eticheta containerului respectiv. Deci, asta înseamnă că pot să poziționez lucrurile în interiorul acestei casete, folosind faptul că știu că este de 1000px lățime. Adică voi folosi asta pentru dreptul_menu.
În continuare, deoarece acesta este un set nou de CSS, l-am împărțit cu un comentariu
Cu siglă și panou Am dat ambele poziții absolute pe pagină. Cum știu ce numere să utilizez? Simplu reveniți la documentul original Photoshop și măsurați unde trebuie să fie! Puteți vedea că este o definiție de clasă foarte simplă, motiv pentru care poziționarea absolută este atât de ușoară.
Înainte de cele două meniuri, acestea sunt, de asemenea, absolut poziționate, dar aici i le-am dat și ele margin: 0px; padding: 0px; pentru a ne asigura că eliminăm orice margini implicite și umpluturi care au liste neordonate.
Înainte de a observa că pe right_menu când am specificat poziția absolută a fi dreapta: 75px. Aceasta înseamnă că va apărea la 75px distanță de partea dreaptă a containerului. În mod obișnuit ar fi fereastra browserului, dar pentru că îmi amintesc mai devreme am setat recipient a avea Poziția: relativă ceea ce înseamnă că va fi de 75px distanță de partea dreaptă a
.
Acum s-ar putea să vă gândiți, bine, care este punctul, nu pot să poziționez lucrurile folosind stânga numai? Ei bine, puteți, dar cu meniul nostru, dacă doriți să adăugați elemente de meniu suplimentare, va trebui să îl repoziționați din nou și din nou, astfel încât acesta să fie încă la 75px distanță de partea dreaptă. Întrucât prin utilizarea dreapta elementele de meniu suplimentare se strecoară atunci când le adăugați. Încercați și vedeți!

Deci, aici suntem la:

Pasul 9

După cum puteți vedea în imaginea anterioară, logo-ul și elementul de titlu acum arată că sunt în poziția corectă. Dar meniurile arată cam ciudat. Înainte de a le stiliza, un cuvânt rapid pe panoul de logo / imagine. S-ar putea să vă întrebați dacă sunt ambele imagini, de ce să nu le faceți parte din imaginea de fundal?

Răspunsul este că logo-ul pe care dorim să-l facem legat, astfel încât clicul să vă ducă înapoi la pagina de pornire (face ca site-ul să fie mai ușor de utilizat) și panoul principal de text, ceea ce ar putea fi probabil schimbat de la pagină la pagină. Deci, având o singură imagine, putem avea o mulțime de pagini HTML utilizând aceeași foaie de stil CSS, dar pur și simplu poziționând o altă imagine acolo cu text diferit.

Acum hai să stilizăm cele două meniuri și să facem ca pagina noastră să înceapă să se formeze. Pentru a face acest lucru avem nevoie de următorul CSS:

 ul # meniu margine: 0px; padding: 0px; Poziția: absolută; top: 138px; stânga: 75px;  ul # dreapta_menu margine: 0px; padding: 0px; Poziția: absolută; top: 138px; dreapta: 110px;  ul # meniul li, ul # dreapta_menu li margine: 0px; padding: 0px; list-style: none; marja de-dreapta: 10px; font-size: 9px; text-transform: majuscule; display: inline;  ul # meniul li a, ul # dreapta_menu li a text-decoration: nimic; Culoare: # bd92b2;  ul # meniu li: hover, ul # dreapta_menu li: hover text-decorare: none; Culoare: #FFFFFF;

Primele două biți ale acestui cod sunt aceleași ca și înainte (deși am ajustat pozițiile puțin pentru a le face să arate imediat după ce au făcut stilul). Observați că aceste două definiții sunt separate deoarece au poziții diferite, dar după aceea le-am combinat pe cele două în aceleași definiții de clasă ca elementele de meniu în sine ar trebui să pară la fel. Formatul pentru definirea a două clase împreună este:

.myClass, .myClass2 ...

Acest lucru este foarte diferit de această definiție:

.myClass .myClass2 ...

Deoarece a doua definiție spune, toate elementele cu interior un element cu.

Oricum, întoarcerea la stilurile noastre, să trecem prin câteva puncte importante:

Am setat
- elementele din interiorul acestora
  - Următoarea definiție spune că pentru taguri de conectare care apar în interiorul unui
  - etichetă care se află înăuntru

Și cu asta, pagina noastră arată acum destul de bine!

Vezi site-ul de departe

Pasul 10

Apoi este timpul să adăugați conținut! Mai întâi să adăugăm niște text fals, configurat pentru a putea face coloane. Iată HTML:

Retușarea
Efecte digitale
Web Work

Despre
a lua legatura

un design elegant
Dummy Text: Acest design a fost produs pentru un tutorial photoshop și dezvoltare web. Puteți vedea prima parte la PSDTUTS.com unde învățați cum să creați un design frumos, dar simplu, folosind un fundal și un tip abstract.
A doua parte a tutorialului este disponibilă prin intermediul NETTUTS.com unde facem o construire rapidă a PSD într-un site viabil HTML / CSS care funcționează.
Acest design a fost realizat pentru un tutorial de dezvoltare Photoshop și dezvoltare web. Puteți vedea prima parte la PSDTUTS.com unde învățați cum să creați un design frumos, dar simplu, folosind un fundal și un tip abstract.
A doua parte a tutorialului este disponibilă prin intermediul NETTUTS.com unde facem o construire rapidă a PSD într-un site viabil HTML / CSS care funcționează.

Tutoriale
Dummy Text: Acest design a fost produs pentru un tutorial photoshop și dezvoltare web. Puteți vedea prima parte la PSDTUTS.com unde învățați cum să creați un design frumos, dar simplu, folosind un fundal și un tip abstract.
A doua parte a tutorialului este disponibilă prin intermediul NETTUTS.com unde facem o construire rapidă a PSD într-un site viabil HTML / CSS care funcționează.
Acest design a fost realizat pentru un tutorial de dezvoltare Photoshop și dezvoltare web. Puteți vedea prima parte la PSDTUTS.com unde învățați cum să creați un design frumos, dar simplu, folosind un fundal și un tip abstract.
A doua parte a tutorialului este disponibilă prin intermediul NETTUTS.com unde facem o construire rapidă a PSD într-un site viabil HTML / CSS care funcționează.

munca recenta
Dummy Text: Acest design a fost produs pentru un tutorial photoshop și dezvoltare web. Puteți vedea prima parte la PSDTUTS.com unde învățați cum să creați un design frumos, dar simplu, folosind un fundal și un tip abstract.
A doua parte a tutorialului este disponibilă prin intermediul NETTUTS.com unde facem o construire rapidă a PSD într-un site viabil HTML / CSS care funcționează.
Acest design a fost realizat pentru un tutorial de dezvoltare Photoshop și dezvoltare web. Puteți vedea prima parte la PSDTUTS.com unde învățați cum să creați un design frumos, dar simplu, folosind un fundal și un tip abstract.
A doua parte a tutorialului este disponibilă prin intermediul NETTUTS.com unde facem o construire rapidă a PSD într-un site viabil HTML / CSS care funcționează.

OK, în acest fragment, puteți vedea că am adăugat 3 noi

în interiorul zonei de conținut. Fiecare are a

elementul de titlu și niște text. Acestea au numele de clasă coloana 1, coloana 2 și coloana 3. Motivul pentru care am adăugat tot textul suplimentar este să vă arăt ceva despre realizarea coloanelor.

Mai întâi, să adăugăm câteva CSS pentru a le face să apară ca coloane:

 / * Conținut * / #content padding-top: 435px; padding-left: 85px; lățime: 815px; Culoare: # 674f5d; font-size: 13px; line-height: 20px;  col. 1 float: left; lățime: 230px; marja de-dreapta: 30px;  col. 2 float: left; lățime: 230px; marja de-dreapta: 30px;  .column3 float: left; lățime: 270px;

Ca de obicei am separat noul nostru CSS cu un comentariu. Apoi am stabilit câteva stiluri pentru #conţinut. Observați cât de mult este padding-top ... 435px! Acest lucru este de a face spatiu pentru toate aceste elemente absolut pozitionate mai devreme. Spre deosebire de aceste elemente, această zonă de conținut este în fluxul normal al paginii.

Trebuie să se afle în fluxul regulat deoarece, pe măsură ce adăugați mai mult conținut, trebuie să împingeți subsolul în jos. Dacă aceasta ar fi fost absolut poziționată, ea ar trece peste partea de sus a subsolului.

Acum cele trei clase de coloane, observați că ele sunt fiecare set cu o lățime și cu plutește la stânga. Acest lucru le spune că trebuie să se alăture în partea stângă a paginii aliniate lângă orice alte elemente plutitoare stânga. Mi-am dat primele două margini drepte, astfel încât să nu fie blocate una de cealaltă.

Un element plutitor îl face să se deplaseze spre stânga sau spre dreapta și spune totul să se înfășoare în jurul lui. Când celelalte elemente sunt, de asemenea, plutesc, se formează în coloane. În general, ori de câte ori vedeți un aspect al coloanei, se utilizează flotoare.

Din păcate, există o problemă ciudată cu plutitoare. Și anume că au o problemă cu recipientele lor. În loc să împingă următorii elemente în jos, ei doar se deplasează peste partea de sus. Calea de a rezolva această problemă este să ai un element care vine după ei care are proprietatea clar: ambele.

Proprietatea Clear spune să oprească înfășurarea lucrurilor în jurul plutitorului

E. Este un pic cam greu de explicat, așa că să ne uităm la ce se întâmplă cu și fără compensare.

Fără ștergere
Iată cum arată aspectul așa cum este:

Consultați modul în care coloanele s-au deplasat peste partea de sus a subsolului și subsolul a început să se înfășoare în jurul acestora. Nu este in regula!!

Cu Clearing
Soluția este destul de simplă, trebuie să adăugăm o

după cele trei coloane ca acestea:

un design elegant
Acest design a fost realizat pentru un tutorial de dezvoltare Photoshop și dezvoltare web. Puteți vedea prima parte la PSDTUTS.com unde învățați cum să creați un design frumos, dar simplu, folosind un fundal și un tip abstract.
A doua parte a tutorialului este disponibilă prin intermediul NETTUTS.com unde facem o construire rapidă a PSD într-un site viabil HTML / CSS care funcționează.
Acest design a fost realizat pentru un tutorial de dezvoltare Photoshop și dezvoltare web. Puteți vedea prima parte la PSDTUTS.com unde învățați cum să creați un design frumos, dar simplu, folosind un fundal și un tip abstract.
A doua parte a tutorialului este disponibilă prin intermediul NETTUTS.com unde facem o construire rapidă a PSD într-un site viabil HTML / CSS care funcționează.

Tutoriale
Acest design a fost realizat pentru un tutorial de dezvoltare Photoshop și dezvoltare web. Puteți vedea prima parte la PSDTUTS.com unde învățați cum să creați un design frumos, dar simplu, folosind un fundal și un tip abstract.
A doua parte a tutorialului este disponibilă prin intermediul NETTUTS.com unde facem o construire rapidă a PSD într-un site viabil HTML / CSS care funcționează.
Acest design a fost realizat pentru un tutorial de dezvoltare Photoshop și dezvoltare web. Puteți vedea prima parte la PSDTUTS.com unde învățați cum să creați un design frumos, dar simplu, folosind un fundal și un tip abstract.
A doua parte a tutorialului este disponibilă prin intermediul NETTUTS.com unde facem o construire rapidă a PSD într-un site viabil HTML / CSS care funcționează.

munca recenta
Acest design a fost realizat pentru un tutorial de dezvoltare Photoshop și dezvoltare web. Puteți vedea prima parte la PSDTUTS.com unde învățați cum să creați un design frumos, dar simplu, folosind un fundal și un tip abstract.
A doua parte a tutorialului este disponibilă prin intermediul NETTUTS.com unde facem o construire rapidă a PSD într-un site viabil HTML / CSS care funcționează.
Acest design a fost realizat pentru un tutorial de dezvoltare Photoshop și dezvoltare web. Puteți vedea prima parte la PSDTUTS.com unde învățați cum să creați un design frumos, dar simplu, folosind un fundal și un tip abstract.
A doua parte a tutorialului este disponibilă prin intermediul NETTUTS.com unde facem o construire rapidă a PSD într-un site viabil HTML / CSS care funcționează.

Consultați

în partea de jos? E doar un gol

care spune pentru a șterge cele trei coloane. Și rezolvă problema noastră,

Vezi site-ul aici.

Câteva cuvinte de ultimă oră pe plutitoare și curățarea lor
S-ar putea să te întrebi de ce nu am plasat "clar: amândouă" în

dar, din păcate, nu funcționează din cauza fundalului pe care îl folosim ... aici este o captură de ecran:

Se pare că există o soluție care nu implică inserarea unui inutil

etichetă și puteți citi despre aceasta la QuirksMode. Personal, am folosit această metodă pentru o perioadă de timp și funcționează bine și în mod consecvent, așa că am continuat să o fac.

Pasul 11

OK, aproape acolo acum! Aspectul principal este sortat, tot ce trebuie să facem este să adăugăm și să stilizăm conținutul nostru. Iată codul HTML pentru acesta:

   un design elegant
 Acest design a fost realizat pentru un tutorial de dezvoltare Photoshop și dezvoltare web. Puteți vedea prima parte la PSDTUTS.com unde învățați cum să creați un design frumos, dar simplu, folosind un fundal și un tip abstract.
 A doua parte a tutorialului este disponibilă prin intermediul NETTUTS.com unde facem o construire rapidă a PSD într-un site viabil HTML / CSS care funcționează.
 
  Tutoriale
 Psdtuts și nettuts oferă tutoriale pe următoarele subiecte (sorta):
  
  munca recenta
     Lucrând în limite pentru a obține modele minunate
 Sean Hodge  
    Creați o zonă de conținut Slick cu ajutorul jQuery
 Collis Ta'eed  
    Crearea unui formular de plată PayPal
 Collis Ta'eed

Este în principiu aceeași structură ca înainte, cu excepția celei din a treia coloană pe care am creat-o

element pentru a conține lucrările recente. Observați că în acest sens

elementul pe care l-am stabilit pentru a exista o legătură

eticheta înfășurând imaginea, titlul și textul. Deci, totul va deveni un link bloc. Aceasta înseamnă că, dacă rotiți imaginea, textul asociat cu aceasta va schimba în continuare culoarea.

Deci, aici este CSS pentru conținutul nostru:

 #content h2 font-familie: Georgia, "Times New Roman", Times, serif; Culoare: # dbaa70; margine: 0px 0px 20px 0px; font-weight: normal;  ul.work margine: 0px; padding: 0px;  ul.work li stil: none; margin: 0px; padding: 0px; clar: ambele;  ul.work li a culoare: # e0b882; display: block; umplutura: 5px 10px 5px 10px; text-decoration: none; font-size: 10px;  ul.work li un img float: left; marja de-dreapta: 20px; margin-bottom: 20px;  ul.work li a h4 culoare: # 674f5d; margin: 0px; font-weight: normal; font-size: 13px;  ul.work li a: hover, ul.work li a: hover h4 culoare: #ffffff;

Să trecem prin clase unul câte unul:

Mai întâi redefinesc ceea ce facem

care apar înăuntru
arată ca. Am fi putut redefini doar toate
dar nu știi niciodată când vom avea
care apare în altă parte, deci este o practică bună să fii destul de specific. Tot ce am făcut aici este schimbarea culorii, a fontului, a greutății și a marjelor pentru a face să pară așa cum am nevoie.

Apoi avem

Construiți un microsite Slider cu Timeline Lite pentru GreenSock

Construiți un șablon simplu de site utilizând SWFAdress