Golovna Men yangi HTML5 hujjatini belgilashni boshlayman. Sarlavha qismi pastki tomon uslubiga ega.

jQuery kutubxonasi, Quicksand plagini va bizning faylimiz

yopiladigan tana tegidan oldin kiritiladi:

index.html

Mening portfelim

HTML5 sarlavha elementi bizning h1 sarlavhamizni almashtiradi (bu logotip bilan bir xil).

Bo'lim elementida portfel elementlarining tartibsiz ro'yxati mavjud, boshqa ro'yxatlar jQuery kodi bilan qo'shiladi) / To'q yashil rangda yaratilgan nav elementi joyida filtr vazifasini bajaradi. Portfelimizdagi narsalar bilan tartibsiz ro'yxat #stage. Har bir element ma'lumotlar atributiga ega, bu bir qator alohida belgilarni bildiradi.

Keyinchalik, jQuery kodida biz ro'yxatni aylanib chiqamiz, teglarni yozamiz va yashil qo'shni menyudan tanlanishi mumkin bo'lgan toifalarni yaratamiz.

Siz boshqa robotlarni joylashtirishingiz va elementlar ro'yxatidan boshqa teglarni tanlashingiz mumkin.

jQuery

Quicksand plagini ikkita tartibsiz ro'yxatni taqqoslaydi, ulardagi yangi elementlarni topadi va joylashtirish jarayonini jonlantiradi.

jQuery skripti

Darsning ushbu qismini oʻrganish uchun #stage roʻyxatidagi portfel elementlarini aylanib chiqing va har bir aniqlangan tegning tartibsiz yangi (qoʻshilgan) roʻyxatlarini yarating.

Function createList(text,items)( // Menyu tugmasi matnini va // elementlar massivini olib tashlaydigan qoʻshimcha funksiya li // Boʻsh tartibsiz roʻyxat yaratadi var ul = $("

",("class":"hidden"));$.each(items,function())( // Teri elementining nusxasini yarating li // Va uni ro'yxatga qo'shing: $(this).clone( ).appendTo(ul ));ul.appendTo("#container"); // Tartibsiz ro'yxat ma'lumotlar parametri sifatida qo'shiladi (.data("list"): var. a = $(" ",(html:matn, href:"#", ma'lumotlar: (ro'yxat:ul) )).appendTo("#filtr");

Bu funksiya guruh nomi va li elementli massivni parametr sifatida oladi.

Keyin u ushbu elementlarni yangi ul ro'yxatiga klonlaydi va yuborilgan yashil qutini qo'shadi.

Endi biz barcha guruhlarni aylanib chiqamiz va qo'shimcha funktsiyani bosamiz, shuningdek menyu elementlari uchun bosish jarayonini qo'shamiz.

script.js - 3-qism

// Menyu uchun "Hammasi" variantini yarating: createList("Hammasi", elementlar);

// itemsByTags-da massivlar bo'ylab aylanish: $.each(itemsByTags,function(k,v)( createList(k,v); ));

$("#filtr a").live("klik",function(e)( var link = $(bu); link.addClass("faol").siblings().removeClass("faol"); // Li nuqtalarini jonlantirish uchun Vikorist's Quicksand plagini.// CreateList funksiyamiz tomonidan aniqlangan Vikorist ma'lumotlari("ro'yxat"): $("#stage").quicksand(link.data("list").find("li")) e.preventDefault());

$("#filtr a:birinchi").click();



CSS

Loyihalaringiz uchun shablon yaratishingiz mumkin.

Portfelingizni o'zgartirish juda oddiy.

Agar sizda JavaScript yoqilgan bo'lsa, siz hali ham robotlarning SEO saytida ko'rinishini olishingiz mumkin.



Ushbu to'plam turli kasblar uchun shablonlarni ko'paytirdi, lekin asosan dastur mavzusini, veb-dizaynerlar va maket dizaynerlarini baholash uchun mo'ljallangan, chunki ular uchun dizayn va tuzilish to'g'risida qaror qabul qilish yaxshiroqdir.

Ilgari biz portfel yaratish uchun qo'shimcha shablonlarni nashr qilgan edik.
Masalan:



Toza

Professional, shaxsiy portfel va mustaqil veb-jurnalning maxsus sahifasini yaratish uchun toza. Dizaynerlar, maket dizaynerlari va dasturchilar uchun juda mos keladi. Shablon to'liq moslashtirilgan, unda tegishli kod bilan aylantirishda elementlarning ko'rinishi animatsiyasi mavjud.
Gorgo portfeli



Toza, toza va zamonaviy

Dizayner portfeli shabloni . Vikonaniy minimalizm uslubida.



Bundan tashqari, chiroyli yangi ekran menyusi ham mavjud.

Robotning dumbalari bo'lgan to'r shaxmatchi ayolning dumbasining orqasida parchalanadi, shuning uchun u yanada jim bo'ladi, parchalar - trend. Robotning o'zi meni ko'proq taassurot qoldirdi, ehtimol demo qismi orqali. Agar siz butun dizaynni maxsus element sifatida ta'kidlamoqchi bo'lsangiz, iltimos, ishning aniq dizayniga e'tibor bering.
Litiy



Uslubda xarajatsiz moslashtirilgan shablon

Yassi , bu siz veb-yozuvchi yoki fotosuratchi bo'lishingizdan qat'i nazar, har qanday frilanser uchun ideal, chunki stantsiya ish toifalari uchun filtrli portfel va foto galereyani taklif qiladi. Brendi
Yana biri ko'prik tepasida
Maxsus portfel yaratish uchun aniq shablon



.

Biz juda ko'p yaxshi ko'radigan narsalar bor: Parallaks effektlari, aylanayotganda paydo bo'ladigan bloklarning effekti, silliq aylantirish, turli xil ishlov berishlar va ayniqsa, portfel blokining o'zi. Shablon mutlaqo bepul va har qanday IT kasbining frilanserlari uchun javob beradi. Kong



Tsikavyi

html dizayner portfeli shabloni . Birinchi ekranda siz o'zingizning rasmingizni joylashtirishingiz, o'zingizni tanishtirishingiz va o'z mutaxassisligingizni yozishingiz mumkin.



Shablondagi deyarli barcha bloklar biz standart ochilish sahifasida ko'rishni xohlagan tarzda amalga oshiriladi.

Agar bu rang sxemasi bo'lsa, men uni o'zgartirgan bo'lardim. Men undan allaqachon qutulishim kerak..
Bo'limlar balandligi 100% bo'lgan uchta ekranga bo'lingan. Birinchi ekranda frilanser haqidagi fotosurat va qisqacha ma'lumotlar mavjud. Boshqa ekran - bu portfel.
Qolganini ko'ring



Dribbble bo'yicha portfelingizdan 8 ta robot

.



Rivojlanishingiz kerak bo'lgan hamma narsa shu, va hammasi.

Tasvirlar o'z-o'zidan yangilanadi, Dribbble-dagi harakatlaringiz bilan sinxronlashtiriladi. Uchinchi ekran - Kontakt ma'lumotlari. Kelvin



Aniq, universal HTML5 CSS3 shabloni.

Ceevee qanday daromad borligini, shuningdek, dumbali blok tushunchasidagi ahamiyatini frilanserning mahoratini ifodalovchi grafiklarda taxmin qilish mumkin. Turli bloklardan foydalanish orqali batafsil o'z-o'zidan gaplashish imkoniyati uzatildi. Portio Ajoyib, universal shablon, garchi men buzmaydigan juda ko'p fikrlar bo'lsa-da: ahmoq shriftlar, kambag'al tugmalar..



Ehtimol, kimdir bu variantni yoqtiradi.

Yak nyak - yorqin rang sxemasi.



Yakshcho bir oz tetiklik

Biz juda ko'p yaxshi ko'radigan narsalar bor: Parallaks effektlari, aylanayotganda paydo bo'ladigan bloklarning effekti, silliq aylantirish, turli xil ishlov berishlar va ayniqsa, portfel blokining o'zi. CSS uslublari, siz yaxshi natijalarga erishishingiz mumkin. Port Xarajatsiz va, aytmoqchimanki, Bootstrap-ga asoslangan oqlangan bir tomonlama shablon.
Menga ayniqsa qizil ranglar yoqadi



faol elementlar

. Dumbali blok katlanadigan to'r kabi ishlaydi va bu ortiqcha. Ushbu shablon yaratish uchun foydali echimlar bo'ladi
veb-dizayner yoki dasturchi portfeli
Hexa



Slayderli va xarakterli rang sxemasiga ega qalpoqli boy rangli Yassi shablon - yashil.

Ushbu yechim bilan siz dumba va blog bilan ajoyib tashrif qog'ozi veb-saytini yaratishingiz mumkin. Freelancer qo'nish tomoniga yaqin.



Biz yangi kelganlarning faollik profilidagi darajasini vizual ravishda ko'rsatish uchun turli diagrammalardan foydalanamiz - bu hammasi.

Bundan tashqari, kliklari bo'lgan slayder va ishingizni namoyish qilish uchun foydalanishingiz mumkin bo'lgan fotosuratga ega chiroyli panjarali blok mavjud. Dribbble Folio V2 Bezkoshtovny avtomatik yangilash portfeli bilan shablon. Ishlar saytdan import qilinadi Dribbl
.



Wikoristannyam oldin

qaror nima , Dribbble profilingiz bilan integratsiyani o'rnatishni unutmang. Afsuski, demo mavjud emas. Makoni Asl html css shablon



binafsha rangda shaxsiy veb-sayt yaratish uchun. Bu bir tomonlama sahifa uslubidagi asosiy sahifaga, shuningdek, o'ziga xos tarzda, ichki sahifalarga ega bo'lgan boy mavzu. Binoga boring maxsus freelancer sayti

har qanday mutaxassislik bo'lishi. U hozirgi dunyoga Ba'zan onaning sayti ham muhimdir, masalan, telefon raqamlari yoki manzillari mavjudligi elektron pochta orqali

. Afsuski, siz o'zingizning ajoyib professional veb-saytingizni o'zingiz yaratolmaysiz va ba'zida siz xato qilmaysiz. Bu dasturchilar uchun ham ideal yechim emas, shuning uchun ham hamma ham bundan mamnun emas.

Biz sizga bu vaziyatdan zararsiz chiqib ketishingizga yordam bera olamiz

HTML shablonlar saytlar. HTML veb-sayt shabloni - bu qo'shiq mavzusidagi veb-sayt uchun tayyor statik sahifalar to'plami.



Bunday shablon yordamida siz aniq sabablarga ko'ra bir necha yil ichida oddiy veb-sayt yaratishingiz mumkin. Portfel tartibining tartibi lekin hayvon emas, balki it. Biroq, yong'indan tashqari, chiqish mashhur uslubdagi odatiy shablondir tekis

matn va fotosuratlarni almashtirish orqali o'zingiz uchun yaratishingiz mumkin bo'lgan dizayn.

..


Yassi dizayn kontrast ranglar bilan ajralib turadi.


Butun tomoni bir nechta bloklarga bo'linadi, bu erda yorug'lik bloki qorong'i o'rnini egallaydi va shuning uchun ekranlar sonining yon tomonining butun balandligi.


Teri bloki ideal tarzda yangi tarkibni almashtirishi mumkin.


Butun tartib sarlavha, bir nechta bo'limlar va podvaldan iborat.



Rasm

Portfel Men haqimda Shakl va aloqa

Fon: url("your_image.jpg") takrorlanmaydi;

Rasm tanlash moslamasining o'lchamini tanlang fon o'lchami. Biz tasvirni to'liq kenglik va balandlikda joylashtiramiz. Ekran o'lchami kattaroq bo'lsa, rasm o'zgartirilganda cho'zilib ketadi, proporsiyalarni saqlamasdan o'lchaydi;

Fon hajmi: 100% 100%;










Idishning o'rtasida




bo'limi



, keling, blokni joylashtiramiz












div Sarlavha, matn va tugmadan.

Tegdan keyin kodni HTML hujjatimizga kiritamiz.
Muhim buti "milim"
Har kuni men yaxshi bo'lish muhimligi haqida o'ylayman.
}
Lekin sizning “silash”ingiz va “lissingishingiz” menda taassurot qoldirganini ham sezmayapman.
Batafsil ma'lumot oling
}
uchun kod
style.css:
Mops_bg(
fon: url (rasmlar/maqolalar/html_coding_banner.jpg) takrorlanmaydi;
fon o'lchami: 100%; 100%;
.mops_text(
to'ldirish: 20% 0%;
.mops_text h2 (
}
rang: #fff;
shrift o'lchami: 2,9em;
shrift og'irligi: 600;
}
z indeksi: 10;
style.css:
matnni tekislash: markaz;
.mops_text(
pozitsiyasi: nisbiy;
/* sarlavhaning aniq joylashuvi */
tepalik chegarasi: -140px;
.mops_text h2 oralig'i (
}
shrift o'lchami: 1,1em;
shrift og'irligi: 290;
.mops_text p(
style.css:
shrift o'lchami: 1,2em;
chekka: 1,4em avtomatik;
kengligi: 76%;
shrift og'irligi: 200;
.mops_text(
chiziq balandligi: 1,3em;
}
.mops_text .da-butt (
displey: blok;
fon rangi: #a97b7b;
}
shrift o'lchami: 1em;
{
matnni o'zgartirish: katta harf;
}
chegara: 0 avtomatik;
kengligi: 10%;
to'ldirish: 1em 2em;
shrift og'irligi: 290;
.da-butt (
pozitsiyasi: mutlaq;
/* tugmaning mutlaq joylashuvi */
chap: 750px;
yuqori: 370px;
/* brauzerning chetlariga kirish */
.mops_text .da-butt:hover
fon:#d0a5a5;
chap: 210px;
}
yuqori: 130px;
shrift og'irligi: 290;
kengligi: 10%;
to'ldirish: 1em 2em;
/* dadamga boring */
}

.butt-img:hover(