Inizierò a contrassegnare il nuovo documento HTML5. La sezione dell'intestazione ha uno stile del lato inferiore. libreria jQuery, plugin Quicksand e il nostro file script.js verrà incluso prima del tag body che chiude:

indice.html

L'elemento header HTML5 sostituisce la nostra intestazione h1 (che è la stessa del logo). L'elemento sezione contiene un elenco non ordinato di elementi del portfolio, altri elenchi vengono aggiunti con il codice jQuery) / L'elemento nav, progettato come verde scuro, funge da filtro.

Elenco disordinato #stage con articoli dal nostro portfolio. Ogni articolo ha un attributo dati, ovvero una serie di segni separati. Successivamente, nel codice jQuery, si scorre l'elenco, registrando le etichette e creando categorie selezionabili dal menu verde adiacente.

Puoi posizionare altri robot e selezionare altri tag nell'elenco degli elementi.

jQuery

Il plugin Quicksand confronta due elenchi non ordinati, trova nuovi elementi al loro interno e anima il processo di posizionamento. script jQuery Per apprendere questa parte della lezione, scorri gli elementi del portfolio nell'elenco #stage e crea nuovi elenchi non ordinati (aggiunti) di ciascun tag identificato. Questi elenchi verranno utilizzati per il plug-in Quicksand.

Una volta cliccato sulla pagina, iniziamo un ciclo per rivelare le icone.

script.js - Parte 1

$(document).ready(function())( var items = $("#stage li"), itemsByTags = (); // Passa in rassegna tutti gli elementi li: items.each(function(i)( var elem = $ ( this), tags = elem.data("tags").split(","); // Aggiunto l'attributo data-id Richiesto dal plugin Quicksand: elem.attr("data-id",i); key,value)( // Possiamo vedere i campi di immissione: value = $.trim(value); if(!(value in itemsByTags))( // Possiamo creare un array vuoto per gli elementi: itemsByTags = ; ) // Ogni elemento viene aggiunto a un array da m_tsi: itemsByTags.push(elem ));

Il tag skin viene aggiunto agli oggetti dell'elemento ByTags come array. Ciò significa che itemsByTags["Web Design"] contiene un array di tutti gli elementi che indicano il tag "Web Design". Usiamo questo oggetto per creare un elenco non ordinato nella pagina Sabbie mobili.

È possibile creare funzioni aggiuntive

script.js - Parte 2

Function createList(text,items)( // Una funzione aggiuntiva che rimuove il testo di un pulsante di menu e // un array di elementi li // Crea un elenco vuoto e non ordinato var ul = $("

",("class":"hidden"));$.each(items,function())( // Crea una copia dell'elemento skin li // E aggiungilo alla lista: $(this).clone( ).appendTo(ul ));ul.appendTo("#container"); // Crea una voce di menu // come parametro dati (accessibile tramite .data("list"): var a = $(" ",(html:text, href:"#", data: (list:ul) )).appendTo("#filter");

Questa funzione recupera il nome del gruppo e l'array con elementi li come parametri. Quindi clona questi elementi nel nuovo elenco ul e aggiunge la casella verde inviata.

Ora passiamo in rassegna tutti i gruppi e facciamo clic su una funzione aggiuntiva e aggiungiamo anche l'elaborazione dei clic per le voci di menu.

script.js - Parte 3

// Crea l'opzione "Tutto" per il menu: createList("All", items); // Passa in rassegna gli array in itemsByTags: $.each(itemsByTags,function(k,v)( createList(k,v); )); $("#filter a").live("click",function(e)( var link = $(this); link.addClass("active").siblings().removeClass("active"); // Plug-in Quicksand di Vikorist per animare punti li.// Data("list") di Vikorist, definito dalla nostra funzione createList: $("#stage").quicksand(link.data("list").find("li")) ;e.preventDefault()); $("#filtro a:first").click();

CSS

La parte più importante degli stili CSS è il #filtro verde. Per questo vengono utilizzati gli pseudo-elementi: before / : after, per creare più pieghe ai lati della piega. Poiché le puzze sono posizionate in modo assoluto, quando si cambia la taglia della donna, le puzze appariranno dove richiesto.

stili.css

#filter ( background: url("../img/bar.png") ripeti-x 0 -94px; display: blocco; altezza: 39px; margine: 55px automatico; posizione: relativa; larghezza: 600px; allineamento testo: centro; -moz-box-shadow:0 4px 4px #000; -webkit-box-shadow:0 4px 4px #000; : url("../img/bar.png") nessuna ripetizione; : 0; larghezza: 78px; (0,0,0,0.4);-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4); : -78px; ) #filter:after ( posizione dello sfondo: 0 0; destra: -78px; ) #filter a( colore: #FFFFFF; display: blocco in linea; altezza: 39px; altezza della linea: 37px; riempimento: 0 15px; ("../img/bar.png") ripeti-x 0 -138px 0,2), 1px 0 1px rgba(0,0,0, 0,2) inserito, -1px 0 1px rgba(0,0, 0,0.2) riquadro )



Pronto!

Puoi creare un modello per i tuoi progetti. Cambiare il tuo portafoglio è semplice. Se hai JavaScript abilitato, puoi comunque far apparire i robot sul sito SEO.

Questa raccolta include modelli più adatti a varie professioni, ma soprattutto per valutare l'argomento del programma, web designer e progettisti di layout, poiché il design e la struttura del lavoro sono più adatti a loro stessi.

In precedenza, abbiamo già pubblicato modelli aggiuntivi per la creazione di un portfolio. Per esempio:



Pulito

Professionale, pulito per creare un portfolio personale e una pagina speciale di un web magazine indipendente. Perfettamente adatto a designer, progettisti di layout e programmatori.
Il modello è completamente adattivo, ha un'animazione dell'aspetto degli elementi durante lo scorrimento con un codice valido.



Portafoglio Gorgo

Pulito, pulito ed elegante modello di portfolio di designer. Vikonaniy nello stile del minimalismo. C'è anche un bel nuovo menu sullo schermo.
La rete con il calcio del robot è spezzata dietro il calcio della scacchiera, in modo che sia ancora più silenziosa, i frammenti sono una tendenza. Il lato stesso del robot mi ha colpito ancora di più, forse attraverso la parte demo. Se si intende evidenziare l'intero disegno come elemento speciale, si prega di notare la chiara progettazione dell'opera.



Litio

Modello adattivo gratuito con stile Piatto, che è l'ideale per qualsiasi libero professionista, che tu sia un web writer o un fotografo, poiché la stazione offre sia un portfolio con un filtro per categorie di lavoro che una galleria fotografica.



Brandy

Un altro sopra il ponte Un modello chiaro per creare un portfolio speciale. Ci sono molte chicche che amiamo così tanto: effetti di parallasse, l'effetto dei blocchi che appaiono durante lo scorrimento, scorrimento fluido, diversi trattamenti e, soprattutto, il blocco del portfolio stesso.
Il modello è assolutamente gratuito e adatto a liberi professionisti di qualsiasi professione informatica.



Kong

Tsikavyi modello di portfolio di progettazione html. Nella prima schermata potrai inserire la tua foto, presentarti e scrivere la tua specialità.
Quasi tutti i blocchi nel modello sono implementati nello stesso modo in cui vorremmo vedere nella pagina di destinazione standard.
Se fosse una combinazione di colori, la cambierei. Devo già sbarazzarmene.



MyFolio

Vidminny portafoglio adattivo unilaterale nei toni del verde. Questo vale sia per i liberi professionisti che per i team di sviluppatori. Il modello di scrittura è chiaro e merita rispetto.



Di base

Suvoroso modello nei toni del blu per creare un portafoglio. Pobudovanov su Bootstrsp 3.2. Sostituendo le icone sulla prima schermata, puoi diventare un libero professionista in qualsiasi campo di attività.



Piccolo

Non buono modello HTML su un solo lato in stile piatto. Le divisioni sono divise in tre schermate con un'altezza del 100%. La prima schermata è una foto e brevi informazioni sul libero professionista.
Un'altra schermata è un portafoglio. Vedi il resto 8 robot dal tuo portafoglio su dribbble. Questo è tutto ciò di cui hai bisogno per svilupparti, e questo è tutto. Le immagini verranno aggiornate da sole, in sincronia con le tue attività su Dribbble.
Terza schermata: informazioni di contatto.



Kelvin

Un modello HTML5 CSS3 chiaro e universale. Ceevee può intuire che tipo di guadagno c'è, e anche l'importanza del concetto di blocco con i mozziconi funziona nei grafici che rappresentano le competenze di un libero professionista. È stata aggiunta la possibilità di eseguire dialoghi interiori dettagliati attraverso vari blocchi.



Porzio

Un modello eccezionale e universale, anche se ci sono molti punti che non rivelerò: i caratteri stupidi, i pulsanti scadenti. Forse a qualcuno piacerebbe questa opzione. Yak nyak – combinazione di colori vivaci. Yakshcho troshki vipraviti Stili CSS, puoi ottenere buoni risultati.



Porta

Gratuito e, direi, un elegante modello unilaterale basato su Bootstrap. Mi piacciono particolarmente i rossi elementi attivi. Il blocco con le estremità funziona come una rete pieghevole, e questo è un vantaggio. Questo modello sarà soluzioni utili per la creazione portfolio di un web designer o programmatore.



Esa

Un modello piatto dai colori intensi con un cursore e un cappuccio dalla caratteristica combinazione di colori: verde. Con questa soluzione, puoi creare un meraviglioso sito web per biglietti da visita con mozziconi e un blog.



Libero professionista

Vidminny stile piatto su un solo lato e combinazione di colori verde. Nella prima schermata c'è spazio per la fotografia, e più semplicemente, per non lasciarsi ingannare disegno di stile, autoritratto laterale del sito web di Vlasnik.
Il modello è piccolo e questo è un grande vantaggio, quindi per i nostri scopi non c'è nulla che possa vikorizzare le "ragazze delle feste". Viconaniy, sorprendentemente, è molto chiaro. È completamente adattivo e si basa sul framework Bootstrap.



Portafoglio Dribbble

Un altro modello, portfolio in yakoma Integrato con Dribbble. Devi smettere di modificare il resto del tuo lavoro e dimenticare il costante e noioso aggiornamento del tuo portfolio sulla tua pagina.
Modello di versi per suvoria, combinazione di colori quotidiana. Tutto sembra molto pulito.
Quindi, proprio come il precedente modello Dribbble, non è eccezionale. Direi laconico. Zagalom, il mio voto è 9 su 10.



Tipo strano

Trascurabile, voglio sentirmi un po' importante, modello per creare il portfolio di un libero professionista vicino al lato dell'atterraggio. Utilizziamo vari diagrammi per visualizzare visivamente il livello dei nuovi arrivati ​​nei loro profili di attività: questo è tutto. C'è anche uno slider con clicker e un blocco con una bella griglia con una foto che puoi usare per dimostrare il tuo lavoro.



Dribbble Folio V2

Bezkoshtovny modello con portfolio con rinnovo automatico. Le opere vengono importate dal sito Dribbling. Prima di Wikoristannyam qual è la decisione?, non dimenticare di impostare l'integrazione con il tuo profilo Dribbble.
Purtroppo non esiste una demo.



Porto

Originale html modello CSS nei toni violacei per creare un sito web personale. Si tratta di un tema ricco di pagine, con una pagina principale nello stile di una pagina a una facciata e, a suo modo, anche pagine interne. Vai per l'edificio sito speciale per freelance essere qualsiasi specialità.



U al mondo attuale A volte è importante anche il sito della suocera, come, ad esempio, la disponibilità di numeri di telefono o indirizzi per e-mail. Sfortunatamente, non puoi creare da solo il tuo fantastico sito web professionale e, a volte, non sbaglierai. Inoltre, non è una soluzione ideale per i programmatori, motivo per cui non tutti ne sono contenti.

Possiamo aiutarti a uscire da questa situazione senza danni Modelli HTML siti. Il modello di sito Web HTML è un insieme di pagine statiche già pronte per un sito Web a tema canoro. Usando questo modello, puoi creare un semplice sito web in appena un paio d'anni, ovviamente conoscenza di base Markup HTML. Nella sezione HTML, porti via la consapevolezza che se dedichi un altro paio d'anni allo sviluppo e se non perdi un'ora nella sezione CSS, puoi completare il design dei modelli di siti Web HTML e personalizzarli secondo le tue esigenze. i propri bisogni consumano.

Un altro vantaggio significativo dei modelli di siti Web è che nella maggior parte dei casi vengono scritti da professionisti. Un modello di sito web professionale significa non solo un design bello e moderno, ma anche scrivere codice. Sistemi audio Ti chiedi come scrivi un sito web, codice ottimizzato SEO e non, in base al quale riducono e promuovono in apparenza le tue posizioni. Quindi un buon sito web non è solo bello e moderno, ma è importante anche scrivere correttamente il codice.

Ottieni modelli di siti Web HTML gratuiti e crea i tuoi progetti nel più breve tempo possibile.

Stiamo continuando una serie di lezioni con layout del sito da zero. Abbiamo realizzato il cappello sul modello. Poi arriva un blocco di una grande fotografia. Questo blocco si trova nella prima schermata del browser e anche al centro del tuo account. Pertanto, posiziona in quest'area un'immagine visivamente aggiuntiva che trasmetta l'essenza del sito e le informazioni importanti.



Come hai notato, noi Layout del layout del portafoglio ma non una bestia, ma un cane. Tuttavia, oltre ai fuochi, l'output è un modello tipico nello stile popolare Piatto disegno che puoi creare tu stesso sostituendo testo e fotografie. Il design piatto è caratterizzato da colori contrastanti. L'intero lato è suddiviso in più blocchi, dove il blocco chiaro sostituisce quello scuro, e così tutta l'altezza del lato del numero di schermi. Il blocco skin può idealmente sostituire nuovi contenuti.

L'intero layout è costituito da un'intestazione, diverse sezioni e un seminterrato.

..


Immagine


Portafoglio


Su di me


Modulo e contatti



Sfondo: url("tua_immagine.jpg") nessuna ripetizione;

Scegli la dimensione del selettore di immagini dimensione dello sfondo. Inseriamo l'immagine completamente in larghezza e altezza. Quando la dimensione dello schermo è più grande, l'immagine si allunga; quando viene modificata, viene ridimensionata, senza mantenere le proporzioni.

Dimensione sfondo: 100% 100%;

Al centro del contenitore sezione, posizioniamo un blocco div Dal titolo, testo e pulsante.

Inseriamo il codice nel nostro documento HTML dopo il tag.










Importante buti "milim"




Ogni giorno penso all'importanza di essere gentili. Ma non mi accorgo nemmeno che il tuo “accarezzare” e il tuo “scivolare” mi hanno dato l’impressione.



Scopri di più












Codice per stile.css:

Mop_bg(
sfondo: url(images/articles/html_coding_banner.jpg) nessuna ripetizione;
dimensione dello sfondo: 100%; 100%;
}
.mops_testo(
imbottitura: 20% 0%;
}
.mops_testo h2 (
colore: #fff;
dimensione carattere: 2,9 em;
peso carattere: 600;
indice z: 10;
allineamento testo: centro;
posizione: relativa; /* posizionamento specifico dell'intestazione */
margine superiore: -140px;
}
.mops_text h2 intervallo (
dimensione carattere: 1,1 em;
peso carattere: 290;
}
.mops_testo p(
colore: #fff;
dimensione carattere: 1,2 em;
allineamento testo: centro;
margine: 1,4 em automatico;
larghezza: 76%;
peso carattere: 200;
altezza della linea: 1,3 em;
}
.mops_text .da-butt (
blocco di visualizzazione;
colore di sfondo: #a97b7b;
colore: #fff;
dimensione carattere: 1em;
trasformazione del testo: maiuscolo;
margine: 0 automatico;
larghezza: 10%;
allineamento testo: centro;
imbottitura: 1em 2em;
}
.da-culo (
posizione: assoluta; /* posizionamento assoluto del pulsante */
sinistra: 750px; in alto: 370px; /* accedi ai bordi del browser */
}
.mops_text .da-butt:al passaggio del mouse
{
sfondo:#d0a5a5;
}
.butt-img(
larghezza: 50px;
altezza: 50px;
blocco di visualizzazione;
margine: 2em automatico 1em;
sfondo: url(images/articles/html_coding_buttonimg.png);
-webkit-transition: tutti gli 0,5 sono facili da inserire e da uscire; /* transizione graduale */
-Transizione Moz: tutti gli 0,5 sono facilitati in entrata e in uscita; /* transizione graduale */
-o-transizione: tutti gli 0,5 vengono facilitati in entrata e in uscita; /* transizione graduale */
-ms-transition: tutti gli 0,5 vengono facilitati in entrata e in uscita; /* transizione graduale */
transizione: tutti gli 0,5 sono facilitati in entrata e in uscita; /* transizione graduale */
posizione: relativa; /* posizionamento assoluto della freccia */
sinistra: 210px; in alto: 130px; /* vai da papà */
}
.butt-img:hover(
blocco di visualizzazione;
larghezza: 50px;
altezza: 50px;
sfondo: url(images/articles/html_coding_buttonimgh.png);
}

Il risultato del robot può essere visualizzato su