Golovna
2 Ajoyib o'quvchi
Sayt uchun blok shablonini yozaman.
Ushbu maqolada men sizga nafaqat saytning blok shablonining kodini beraman, balki uni tushuntiraman va nimani va qanday o'zgartirishingiz mumkinligini va fayllarni qaerga qo'yishni ko'rsataman.
Ozhe, bunday sayt.
Men ko'pincha ushbu sohada ishlaydigan odamlarning o'zlari yordam so'rab murojaat qilishlarini ko'rsatish uchun avtotransport mavzusini oldim.
Ale Vi, maqolani o'qib chiqqandan so'ng, siz mavzuingiz va saytingiz uchun dizayn va ramkangiz haqida hamma narsani ishlab chiqishingiz mumkin bo'ladi.
/* Iltimos, maqolani, yuborilgan materiallarni diqqat bilan o'qib chiqishga vaqt ajrating va ko'rsatmalarimni bajaring. */
quti soyasi: rgba (0,0,0,0,5) 0px 1px 3px;">
/* Blok soyasi */
.clear ( /* Overflow panjarasi. Kontent bloki matn va tasvirlar bilan to‘ldirilganda pastki qismga tushmasligi uchun o‘rnatilgan */
aniq: ikkalasi ham;
.fon ( /* Telefon raqami */
float: chap;
/* Boshqa elementlarning paragraf atrofida o'ng qo'l bilan harakatlanishiga ruxsat bering */
chegara: 20px 0 0 20px;
.faks ( /* Faks raqami */
chegara: 20px 0 0 60px;
.mail (/* Elektron pochta manzillari */
Vantazhoperevezennya
http://trueimages.ru/img/cf/26/9116df15.png
Bizning veb-saytimizda
nuances, hid bir soatdan ko'proq vaqtni oldi.
ishonamanki
boshqalarga osonroq bo'lishi uchun o'zingizning materialingizni yozing
yangi ma'lumotlardan xabardor bo'ling.">
http://trueimages.ru/img/0d/64/07a18f15.png
Bu yerga
"rozzhovaniye" saytni yaratish bilan birga keladigan barcha qurilmalar,
Boshqa mualliflardan o'tishni so'rashingiz mumkin.
Agar aqlsiz bo'lsa, oziqlantirish, uchun
Endi "yomon" ovqatlar yo'q.
O'qing va veb-saytingizni o'zingiz yarating, kabi
Bu sizning yoshingiz va kompyuterda ishlash tajribangiz bo'lmaydi.
Maqtovlar, sizniki yanada yaxshi bo'ladi va aniq
[elektron pochta himoyalangan]
Bu statik sayt uchun koddir va bu turli kengaytmali ekranlarda u hajmi o'zgarmaganligini anglatadi.
Keyin mobil telefoningizda gorizontal aylantirishning loyqaligini ko'rasiz, shuning uchun saytni ko'rib chiqish uchun tirishishingiz kerak bo'ladi.
Va endi dumbamizga murojaat qilaylik.
Kod bilan ishlashni boshlashdan oldin, sayt onlayn bo'lishidan oldin uni joylashtirish uchun joy yaratishingiz kerak.
Ushbu kodni tahrirlash uchun sizga HTML muharriri kerak bo'ladi.
Yaxshi chiziqqa ega bo'lganlar, yo'qlar, men sizga aytaman.
Uni robotingizga yuborganingizdan so'ng, fayl yaratish uchun uni o'qing.
Agar muharrir o'rnatilgan bo'lsa, uni oching, yuqoridagi koddan 1 - 6 qatorlarni ko'chiring va ularni tahrirlovchi maydoniga, so'ngra 118 - 153 qatorlarga joylashtiring va ularni tahrirlovchiga joylashtiring.
Shunday qilib, biz HTML faylini yaratadigan kodning HTML qismini tanladik.
Mening qator raqamlashni o'chiring, fayl yarating, uni index.html deb nomlang va uni sayt katalogiga saqlang.
Katalog quyidagicha ko'rinishi mumkin:
Keyinchalik, biz moslashtirilgan uslublar jadvaliga ega bo'lgan style.css faylini yaratamiz.
Eksa shu yerda!
Style.css fayli saytning barcha sahifalariga ulangan bo'lishi kerak, shuning uchun siz sahifaning asosini tashkil etuvchi uslublarni tanlashingiz kerak.
Va to'g'ridan-to'g'ri maqola matniga cho'zilgan .left va .right selektorlaridan tashqari yuqoridagi koddagi barcha uslublar.
Keyin, agar siz sayt dizayniga biron bir o'zgartirish kiritmoqchi bo'lsangiz, ularni style.css fayliga qo'shishingiz kerak va ular barcha sahifalarda paydo bo'ladi.
Shunday qilib, sayt katalogida biz boshqa papka yaratamiz va uni css deb ataymiz.
Keyin muharrirga qaytamiz, yangi hujjatni ochamiz (birinchi panel belgisi), uni nusxa ko'chiring va yangi 8 - 80 va 90 - 116 qatorlarga joylashtiramiz. і , teg kiritilgan <link>, CSS-ni ishlab chiqish va belgilashning dastlabki atributlari bilan.</p>
<p><link
href
="css/style.css
" type
="text/css
" rel
="stylesheet
"></p>
<p>Belgidan keyin <link>, biz maqola matnida rasmlarni formatlaydigan uslublarni kiritishimiz mumkin.</p>
<p><style
"><br>(81-88-qatorlar). <br>/* Tarkib (statta) */ <br>#content ( /* Kontent bloki */ <br>
} <br>Biz mening raqamlashim va sharhlarimni olib tashlaymiz, chunki html faylidagi izohlarda CSS qo'shilmagan va aslida ularning barchasi ziplangan bo'lishi mumkin. <br>/* Altbilgi blokidagi statistika blokiga kirish */ <br>kengligi: 676px; <br>
} <br>
</style
></p>
<p>.chap(</p>
<p>.o'ng (</p>
<p><img src='https://i1.wp.com/starper55plys.ru/wp-content/uploads/2013/08/4.png' align="center" width="100%" loading=lazy loading=lazy loading=lazy></p>
<p>Kodni tahrirlovchi bilan o'zgartirgandan so'ng, o'zgarishlarni saqlashni unutmang (uchinchi belgi yomon).</p>
<p>Bunday holda, fayl belgisi ko'k rangga ega.</p>
<p>Muharrirning fikri:</p>
<p>Keling, rasmlarni tezda ko'rib chiqaylik.</p>
<p>Mening rasmlarim trueimages xizmati orqali yuklab olinadi, shunda sahifa brauzeringizda ko'rinadi. <img>Sizga o'zingizning rasmlaringiz kerak bo'ladi va siz ularni yaratishingiz yoki Internetda topishingiz kerak bo'ladi.</p>
<p><img src='https://i0.wp.com/starper55plys.ru/wp-content/uploads/2013/08/5.png' align="center" width="100%" loading=lazy loading=lazy loading=lazy></p>
<p>Siz buni xuddi shu maqolada ko'rishingiz mumkin.</p>
<p>Agar sizda Photoshop bo'lsa, unda barcha tasvirlar yangisida yaxshiroq ishlaydi. <br></p>
<p>Barcha to'plangan yoki topilgan rasmlar sayt katalogining rasmlar papkasiga joylashtirilishi kerak.</p>
<p><img src='https://i2.wp.com/starper55plys.ru/wp-content/uploads/2013/08/6.png' align="center" width="100%" loading=lazy loading=lazy loading=lazy></p>
<p>Avvalo, biz sayt sarlavhasini o'zgartiramiz.</p>
<p>Buning uchun index.html faylida teg mavjud</p>
<p>mening rasmim bilan (124-qator)</p>
<p>Keyin style.css faylida img selektorini ko'rishingiz mumkin.</p>
<p>fon rasmi: url(../images/schapka.png);</p>
<p><p
><img src='/shablony-html-strogii-stil-besplatnye-html-shablony-na-russkom/' loading=lazy loading=lazy loading=lazy>/* Altbilgi bloki uchun fon */</p
></p>
<p>Muharrir shunday ko'rinadi</p>
<p>Rasm manzilining yuqori qismidagi qo'sh katak faqat selektor biriktirilgan CSS faylida bo'lsa joylashtiriladi.</p>
<p>Endi saytning asosiy sahifasi tayyor, siz toifalar va sahifalar yaratishni boshlashingiz mumkin.</p>
<p>Men sizga bitta toifani qanday yaratishni ko'rsataman va uning bir tomoni bor va siz boshqalarni o'zingiz yaratishingiz mumkin.</p>
<p>Sayt katalogida bizda kontent papkasi mavjud.</p>
<p>Biz uni ochamiz va boshqa papka yaratamiz - rubrica1 (siz, albatta, o'z nomingiz bo'ladi). <b>Bu dada yana ikkita papka yaratadi - CSS va tasvirlar.</b> Css papkasida biz style.css faylini joylashtiramiz va rasmlar papkasida birinchi navbatda teri tomonida paydo bo'ladigan asosiy tasvirlarni (mening fikrimcha sayt sarlavhasi va menyu belgilari mavjud) va boshqa yo'l bilan siz joylashtirasiz. u erda barcha rasmlar, Ushbu bo'limlar uchun maqolalarni qanday formatlaysiz?</p><h5>Joriy sayt bilan ishlashingiz mumkin.</h5><ol><li>Biroq, UI saytini joylashtirish va loyihalashda vaqtni sezilarli darajada tejashning bir usuli bor - u tayyor</li><li><b>UI elementlari kutubxonalari</b>, <b>.</b> Bugungi kunda ularning soni shunchalik ko'pki, Buyuk Lent uchun bir joyda bir nechta to'plamlarni yig'ish mumkin edi.</li><li>Loyihada veb-sayt uchun tayyor UI elementlaridan foydalanishning afzalligi nimada? <b>Boshqa elementlarni qurish bo'yicha barcha zerikarli ishlar siz uchun allaqachon tugagan.</b> Shakllar animatsiyasi</li>
</ol><h5>tugmalar</h5>Boshqa elementlar allaqachon joriy qilingan va veb-dizaynning joriy tendentsiyalariga muvofiq sozlangan. <b>Teri terish</b> HTML UI <p>komponentlar - birinchi nashr emas. <b>Barcha JS ishonchli ishlaydi va ishlaydi.</b> Ushbu oxirgi bosqichda to'plamning har bir elementi uchun eng foydali echimlar aniqlandi.</p><p>HTML-UI elementlari to'plamini qayerda yaratishingiz mumkin? <b>To'g'ri oldimizda</b> prototiplar</p><h4>, chunki dizayndagi alohida o'ziga xoslikka ehtiyoj yo'q.</h4>Kutubxona prototipi ishlab chiqilgunga qadar u deyarli kosmetik o'zgarishlarsiz o'rnatiladi. <b>Golovne, shunday qilib, u ishlaydi va loyihaning mohiyatini aks ettiradi.</b> Bularga parvo qilmang <b>UI</b>, <b>Har qanday loyihada amalda qo'llanilishi mumkin bo'lgan o'ylangan dizayn allaqachon mavjud.</b> Barcha elementlar veb-dizayndagi joriy tendentsiyalarga moslashtirilgan va juda ko'p qirrali bo'lib, siz bitta to'plamni loyihangiz bilan bir xil uslubda bo'lishini xohlaysiz. <p><img src='https://i1.wp.com/postovoy.net/uploads/images/00/00/02/2018/06/08/c128368e55.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><h4>Otje.</h4><b>Hurmat bilan</b> yorqin prototip yaratish uchun. <p><img src='https://i0.wp.com/postovoy.net/uploads/images/00/00/02/2018/06/08/23d8bea875.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><h4>Bu siz yaratishingiz mumkin bo'lgan veb-hikoya konstruktorining turi.</h4>To'plam bitta dizayn uslubida birlashtirilgan barcha elementlarning yangi to'plamini o'z ichiga oladi. <b>Bootstrap uchun material dizayni</b> CSS ramkasi uchun bepul <b>Bootstrap 3</b> bezatilgan holda <p><img src='https://i2.wp.com/postovoy.net/uploads/images/00/00/02/2018/06/08/0793b08fab.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><h4>Google Material Design</h4>. <b>Afsuski, u Angular-dagi asl Google Material Design bilan bir xil dinamikaga ega emas, lekin uni taqlid qilish mumkin.</b> Yassi foydalanuvchi interfeysi <b>Yakni tugating</b> Yassi uslublarda UI yozish <p><img src='https://i0.wp.com/postovoy.net/uploads/images/00/00/02/2018/06/08/60d86885de.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><h4>uchun asos bo'lgan</h4>sezgir CSS ramkasi Bootstrap 3 <p><img src='https://i0.wp.com/postovoy.net/uploads/images/00/00/02/2018/06/08/776705e30f.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><h4>.</h4>Katta afzallik - bu PSD chiqishining ko'rinishi. <b>Sof UI to'plami</b> Agar sizga katakchalar, shakllar, tugmalar, jadvallar yoki menyular kerak bo'lsa, ushbu UI ramkasi sizga mos kelishi mumkin. <p><img src='https://i1.wp.com/postovoy.net/uploads/images/00/00/02/2018/06/08/b8312d5576.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><h4>Vin yanada yengilroq.</h4><b>Vaga 3,8 KB.</b> Yassi dizayn UI - HTML5 + CSS3 <b>Maxsus achchiq ta'sir qilmaydigan minimal tanlov</b> HTML5 + CSS3 wiki-dagi UI elementlari <b>.</b> Bundan tashqari, u original dizaynga ega. <p><img src='https://i1.wp.com/postovoy.net/uploads/images/00/00/02/2018/06/08/1b609a4449.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><h4>Metro UI CSS</h4>Metro interfeyslari <b>o'tmishda chiqdi, ammo bugungi uslub katta auditoriyani jalb qilmoqda.</b> Bilaman, men ulardan biriman. <p><img src='https://i2.wp.com/postovoy.net/uploads/images/00/00/02/2018/06/08/fc8c3f1dc1.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><h4>Hozirgi kunda kelajak qaerda paydo bo'ladi</h4>METRO UI <b>sizga kerak bo'lishi mumkin.</b> Sizning hurmatingiz bilan, buyuk va aniq <b>METRO uslubidagi HTML-dagi UI Framework</b>. <p><img src='https://i0.wp.com/postovoy.net/uploads/images/00/00/02/2018/06/08/ace1a7bc2d.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><h4>Muayyan dizayndagi deyarli barcha elementlar bepul mavjud: plitkali ekranlar, shakllar, tasdiqlash qutilari, radio tugmalar, tugmalar, menyular, sahifalar va hattoki har qanday ko'p sonli.</h4>Butun ramka 70+ UI komponentlarini o'z ichiga oladi. <b>Shuningdek, ukrainalik sotuvchining roboti.</b> Pervanel <p><img src='https://i1.wp.com/postovoy.net/uploads/images/00/00/02/2018/06/08/a2f585359d.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p>
<p>Bezkoshtovny</p>
<p>Men HTML5 va CSS3 asosidagi eng yaxshi javob beruvchi veb-sayt shablonlarini sinab ko'rdim.</p>
<h3></h3>
<h3></h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/real-estate-html.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p>
<h3></h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/creative-bootstrap.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p>
<h3></h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/drifolio.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p>
<h3>Ular qanday ko'rinishga ega bo'lishidan qat'i nazar, siz ushbu andozalarning aksariyati premium shablonlarga o'xshashligini sezishingiz mumkin.</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/squad.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><p>5. SquadFree – Bootstrap HTML5 da to'lovsiz shablon</p>
<h3>Squad Free - javob beruvchi yuklash uchun shablon</h3>
<p><img src='https://i0.wp.com/design-secrets.ru/wp-content/uploads/2014/09/pluton.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><p>6. Pluton – Bootstrap HTML5 da hech qanday xarajatsiz, bir tomonlama shablon</p>
<h3></h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/sublime_2.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p>
<h3></h3>
<p><img src='https://i0.wp.com/design-secrets.ru/wp-content/uploads/2014/09/timber_3.jpg' height="600" width="590" loading=lazy loading=lazy loading=lazy></p>
<h3>Pluton - Bootstrap HTML5-da bepul, bir tomonlama shablon</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/eShopper_4.jpg' height="678" width="590" loading=lazy loading=lazy loading=lazy></p><p>9. E-Shopper - onlayn-do'kon uchun bepul shablon</p>
<h3>E-Shopper - onlayn-do'kon uchun bepul shablon</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/admin-template_5.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><p>10. AdminLTE - boshqaruv paneli shabloni</p>
<h3>AdminLTE - boshqaruv paneli shabloni</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Magnetic_6.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><p>11. Magnetic - fotograf veb-sayti uchun bepul shablon</p>
<h3>Magnit - fotograf veb-sayti uchun bepul shablon</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/mabur_7.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><p>12. Mabur - adaptiv portfel shabloni</p>
<h3>Mabur - moslashuvchan portfel shabloni</h3>
<p><img src='https://i0.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Moderna_8.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><p>13. Moderna – Bootstrap-da javob beruvchi veb-sayt shablonlari</p>
<h3>Moderna - Bootstrap-da sezgir veb-sayt shablonlari</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/sport-landing_9.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><p>14. Sport Mana - minimalist veb-sayt shabloni</p>
<h3>Bu yerda sport - minimalist veb-sayt shabloni</h3>
<p><img src='https://i0.wp.com/design-secrets.ru/wp-content/uploads/2014/09/crafty1_10.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><p>15. Crafty - moslashuvchan korporativ veb-sayt shabloni</p>
<h3>Crafty - moslashuvchan korporativ veb-sayt shabloni</h3>
<p><img src='https://i0.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Infusion_11.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><p>16. Infuzion - bir tomonlama portfel shabloni</p>
<h3>Infuzion - bir tomonlama portfel shabloni</h3>
<p><img src='https://i0.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Yebo-HTML5-Template_12.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><p>17. Yebo - tekis uslubdagi HTML/CSS veb-sayt shabloni</p>
<h3>Yebo - tekis uslubdagi HTML/CSS veb-sayt shabloni</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Twenty-HTML5_13.jpg' height="591" width="590" loading=lazy loading=lazy loading=lazy></p><p>18. Twenty - parallaks effektli HTML5 shablon</p>
<h3>Yigirma - parallaks effektli HTML5 shablon</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Urbanic-Bootstrap-Template_14.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><p>19. Urbanic – Bootstrap shabloni</p>
<h3>Urbanic - Bootstrap shabloni</h3>
<p><img src='https://i0.wp.com/design-secrets.ru/wp-content/uploads/2014/09/portfolio-html-Template_15.jpg' height="609" width="590" loading=lazy loading=lazy loading=lazy></p><p>20. Sokin - portfel shabloni</p>
<h3>Sokin - portfel shabloni</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Mamba-Free-one-page-template_16.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><p>21. Mamba - bir tomonlama shablon</p>
<h3></h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/flat-design-mini-portfolio-featured_18.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p>
<h3>Mamba - bir tomonlama shablon</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Brushed-Responsive-One-Page-Template_19.jpg' height="592" width="590" loading=lazy loading=lazy loading=lazy></p><p>23. Brushed - bir tomonlama moslashuvchan veb-sayt shabloni</p>
<h3>Brushed - bir tomonlama sezgir veb-sayt shabloni</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Big-Picture-HTML5-UP_20.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><p>24. Katta rasm - HTML5 veb-sayt shabloni</p>
<h3>Katta rasm - HTML5 veb-sayt shabloni</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/teslaa_21.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><p>25. Tesselatte - bepul moslashuvchan veb-sayt shabloni</p>
<h3>Tesselatte - bepul javob beruvchi veb-sayt shabloni</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/OVERFLOW_22.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><p>26. Overflow - HTML5 da moslashtirilgan veb-sayt shabloni</p>
<h3>Overflow - HTML5 da moslashtirilgan veb-sayt shabloni</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Runkeeper-Website-Template_23.jpg' height="785" width="590" loading=lazy loading=lazy loading=lazy></p><p>27. Runkeeper - mobil ilova veb-sayti uchun shablon</p>
<h3>Runkeeper - mobil ilova veb-sayti uchun shablon</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Pinball-Website-Template-Home_24.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><p>28. Pinball - javob beruvchi blog shabloni</p>
<h3>Pinball - sezgir blog shabloni</h3>
<p><img src='https://i0.wp.com/design-secrets.ru/wp-content/uploads/2014/09/The-Bak-one-Website-Template_25.jpg' height="778" width="590" loading=lazy loading=lazy loading=lazy></p><p>29. Bak One - bir tomonlama moslashuvchan veb-sayt shabloni</p>
<h3>Bak One - bir tomonlama moslashuvchan veb-sayt shabloni</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Andia-Responsive-Agency-Template_26.jpg' height="638" width="590" loading=lazy loading=lazy loading=lazy></p><p>30. Andia - bepul veb-sayt shabloni</p>
<h3>Andia - mushuksiz veb-sayt shabloni</h3>
<p><img src='https://i0.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Produkta-Responsive-Product-Showcase_27.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p><p>31. Mahsulot - bittada 4 ta HTML shablonlari</p>
<h3></h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Great-Page-title_28.jpg' height="736" width="590" loading=lazy loading=lazy loading=lazy></p>
<h3>Mahsulot - bittada 4 ta HTML shablonlari</h3>
<p><img src='https://i0.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Studio-Francesca-Premium_29.jpg' height="609" width="590" loading=lazy loading=lazy loading=lazy></p><p>33. Studio Francesca - moslashuvchan veb-sayt shabloni</p>
<h3>34. Prolog - HTML5 veb-sayt shabloni</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Prologue-HTML5-UP_30.jpg' width="100%" loading=lazy loading=lazy loading=lazy></p>
<p>Shuningdek, hozirgi dunyo uchun onaning veb-saytiga ega bo'lish, masalan, telefon raqami yoki elektron pochta manzilining mavjudligi muhimdir.</p><p>Afsuski, lekin siz o'zingizning ajoyib professional veb-saytingizni o'zingiz yaratolmaysiz va ba'zida siz xato qilmaysiz.</p><p>Bu dasturchilar uchun ham ideal yechim emas, shuning uchun ham hamma ham bundan mamnun emas.</p><p>Xarajatsiz HTML veb-sayt shablonlari bu vaziyatni engishga yordam beradi.</p>
<p>HTML veb-sayt shabloni - bu qo'shiq mavzusidagi veb-sayt uchun tayyor statik sahifalar to'plami. <b>Ushbu shablondan foydalanib, siz HTML tartibi bo'yicha asosiy bilimga ega bo'lsangiz, bir necha yil ichida oddiy veb-sayt yaratishingiz mumkin.</b> HTML bo'limida siz ishlab chiqishga yana bir necha yil vaqt sarflasangiz va CSS bo'limiga bir soat vaqt sarflamasangiz, HTML veb-sayt shablonlari dizaynini to'ldirishingiz va ularni o'zingizning xohishingizga ko'ra sozlashingiz mumkinligi haqidagi bilimlarni olib tashlaysiz. o'z ehtiyojlarini iste'mol qiladi.</p>
<h2>Veb-sayt shablonlarining yana bir muhim afzalligi shundaki, ular ko'p hollarda professionallar tomonidan yozilgan.</h2>
<p>Professional veb-sayt shabloni nafaqat chiroyli va zamonaviy dizaynni, balki kod yozishni ham anglatadi.</p>
<p>Qidiruv mexanizmlari veb-saytni qanday yozishingizdan, SEO optimallashtirilgan kodidan hayratda qoladilar va buning asosida ular sizning ko'zlaringizdagi pozitsiyalaringizni kamaytiradi va targ'ib qiladi.</p>
<h2>Shuning uchun yaxshi veb-sayt nafaqat chiroyli va zamonaviy, balki kodni to'g'ri yozish ham muhimdir.</h2>
<p>Bepul HTML veb-sayt shablonlarini oling va eng qisqa vaqt ichida loyihalaringizni yarating.</p>
<p>Ba'zida g'oyalarni qidirib, men veb-sayt shablonlari kataloglarini ko'rib chiqaman. <b>Ushbu maqoladan men nima ekanligini bilib olaman</b>- Bu veb-ijodkorlik uchun ajoyib vosita 🙂</p>
<p>Bepul shablonlar odatda Creative Commons litsenziyasi ostida litsenziyalanadi, shuning uchun siz biron bir o'zgartirish, o'zgartirish yoki qo'shimcha kengaytmalar bilan bog'liq muammolarga duch kelmaysiz.</p>
<h2>CSS shablonlarini qayerdan bilishim mumkin?</h2>
<p>Men birinchi navbatda boshqa veb-saytlarda bepul shablonlarni qidiraman:</p>
<ul><li>http://www.freecss.in - 170 ga yaqin shablon, har biri uchun katalogga qo'shilgan sana ko'rsatiladi</li>
<li>http://templated.org – juda oddiy qidiruv va saralash tizimi: rangi, litsenziyasi bo‘yicha;</li></ul>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy loading=lazy loading=lazy>");</script>
</article>
</div>
<div class="sidebar">
<section class="widget">
<div class="textwidget">
<div id="gogesa1" style="height:300px;width:290px;" align="center"></div>
</div>
</section>
</div>
<div class="sidebar">
<section class="widget"><h3 class="widget-title">500 ga yaqin shablon, har biri uchun kerakli elementlar soni va qo'shilgan sana ko'rsatiladi</h3><ul class="rfpw-dropdown-post">
<li class="rfpw-dropdown-content">
<div class="rfpw-image-link"><a href="https://androidas.ru/uz/pochemu-rabotaet-4-g-bilain-chto-delat-esli-net-seti-na-bilaine-chto-nuzhno/"><img style="width: 30%; border-radius: 0;" src="/uploads/688bb3b072ee1b90a6332565e2c92cee.jpg" loading=lazy loading=lazy loading=lazy></a></div>
<div style="width:65%; top: 0px;" class="rfpw-dropdown-text">
<a href="https://androidas.ru/uz/pochemu-rabotaet-4-g-bilain-chto-delat-esli-net-seti-na-bilaine-chto-nuzhno/">Muharrirning tanlovi</a>
<div class="rfpw-date-time"></div>
</div>
<div style="border:1px solid black;" class="rfpw-dropdown-excerpt">Nima qilish kerak, chunki oq chiziqda chegara yo'q</div>
</li>
<li class="rfpw-dropdown-content">
<div class="rfpw-image-link"><a href="https://androidas.ru/uz/poluchenie-root-prestigio-grace-s5-lte-poluchenie-root-prestigio-grace-s5-lte-poluchenie-root/"><img style="width: 30%; border-radius: 0;" src="/uploads/0360d25b292ca281585f4d311653f641.jpg" loading=lazy loading=lazy loading=lazy></a></div>
<div style="width:65%; top: 0px;" class="rfpw-dropdown-text">
<a href="https://androidas.ru/uz/poluchenie-root-prestigio-grace-s5-lte-poluchenie-root-prestigio-grace-s5-lte-poluchenie-root/">Biz qora-sariq kamera yordamida qurilmalari yorug‘lik bilan porlayotgan yangi iPhone’lar haqida o‘rganmoqdamiz...</a>
<div class="rfpw-date-time"></div>
</div>
<div style="border:1px solid black;" class="rfpw-dropdown-excerpt">Rooting Prestigio Grace S5 LTE Rooting Prestigio Grace S5 LTE</div>
</li>
<li class="rfpw-dropdown-content">
<div class="rfpw-image-link"><a href="https://androidas.ru/uz/proshivka-ili-pereproshivka-smartfona-asus-zenfone-proshivka-ili/"><img style="width: 30%; border-radius: 0;" src="/uploads/426531b77f6f60daa65866afd1920832.jpg" loading=lazy loading=lazy loading=lazy></a></div>
<div style="width:65%; top: 0px;" class="rfpw-dropdown-text">
<a href="https://androidas.ru/uz/proshivka-ili-pereproshivka-smartfona-asus-zenfone-proshivka-ili/">Ushbu maqolada mobil qurilma haqida ma'lumot mavjud.</a>
<div class="rfpw-date-time"></div>
</div>
<div style="border:1px solid black;" class="rfpw-dropdown-excerpt">Bu yerda siz qolgan versiyani topasiz va undan bahramand bo'lishingiz mumkin...</div>
</li>
<li class="rfpw-dropdown-content">
<div class="rfpw-image-link"><a href="https://androidas.ru/uz/posle-zagruzki-telefon-zavisaet-chto-delat-esli-telefon-zavis-i-ne-reagiruet/"><img style="width: 30%; border-radius: 0;" src="/uploads/ad6035f5c58e3136f524c61bcaa78c9b.jpg" loading=lazy loading=lazy loading=lazy></a></div>
<div style="width:65%; top: 0px;" class="rfpw-dropdown-text">
<a href="https://androidas.ru/uz/posle-zagruzki-telefon-zavisaet-chto-delat-esli-telefon-zavis-i-ne-reagiruet/">Asus Zenfone smartfonining mikrodasturi yoki miltillovchi Asus zenfone 2 kostyum proshivkasi</a>
<div class="rfpw-date-time"></div>
</div>
<div style="border:1px solid black;" class="rfpw-dropdown-excerpt">), ammo bu "o'rta sinf o'rta dehqonlar" deb ataladiganlar orasida yanada kuchliroq taklifdir.</div>
</li>
<li class="rfpw-dropdown-content">
<div class="rfpw-image-link"><a href="https://androidas.ru/uz/gigabyte-g-smart-essence-4-proshivka-obnovlenie-proshivki-gigabyte-gsmart-t4-v-kakih/"><img style="width: 30%; border-radius: 0;" src="/uploads/bb1baf3f5a8009199ec0d1bcd700a31c.jpg" loading=lazy loading=lazy loading=lazy></a></div>
<div style="width:65%; top: 0px;" class="rfpw-dropdown-text">
<a href="https://androidas.ru/uz/gigabyte-g-smart-essence-4-proshivka-obnovlenie-proshivki-gigabyte-gsmart-t4-v-kakih/">Qurilma...</a>
<div class="rfpw-date-time"></div>
</div>
<div style="border:1px solid black;" class="rfpw-dropdown-excerpt">Telefoningiz qotib qolgan va javob bermasa nima qilish kerak</div>
</li>
<li class="rfpw-dropdown-content">
<div class="rfpw-image-link"><a href="https://androidas.ru/uz/sotovyi-telefon-megafon-huawei-u8230-sotovyi-telefon-megafon-huawei-u8230-telefon/"><img style="width: 30%; border-radius: 0;" src="/uploads/ff4ad7920a1e6cc56d5f329e2bc5e0cf.jpg" loading=lazy loading=lazy loading=lazy></a></div>
<div style="width:65%; top: 0px;" class="rfpw-dropdown-text">
<a href="https://androidas.ru/uz/sotovyi-telefon-megafon-huawei-u8230-sotovyi-telefon-megafon-huawei-u8230-telefon/">Ushbu maqola Samsung smartfonlari orasida eng yuqori quvvat manbaiga dalil beradi, “nima uchun...</a>
<div class="rfpw-date-time"></div>
</div>
<div style="border:1px solid black;" class="rfpw-dropdown-excerpt">Gigabyte Gsmart T4 proshivka yangilanishi</div>
</li>
<li class="rfpw-dropdown-content">
<div class="rfpw-image-link"><a href="https://androidas.ru/uz/razlochit-honor-3c-ot-life-kak-razblokirovat-huawei-i-honor-esli-zabyli/"><img style="width: 30%; border-radius: 0;" src="/uploads/ae47acfe12072c695060e557f2f9c360.jpg" loading=lazy loading=lazy loading=lazy></a></div>
<div style="width:65%; top: 0px;" class="rfpw-dropdown-text">
<a href="https://androidas.ru/uz/razlochit-honor-3c-ot-life-kak-razblokirovat-huawei-i-honor-esli-zabyli/">Ushbu maqolada mobil qurilma haqida ma'lumot mavjud.</a>
<div class="rfpw-date-time"></div>
</div>
<div style="border:1px solid black;" class="rfpw-dropdown-excerpt">Bu yerda siz Android proshivkasining so'nggi versiyasini yuklab olishingiz mumkin.</div>
</li>
<li class="rfpw-dropdown-content">
<div class="rfpw-image-link"><a href="https://androidas.ru/uz/zte-blade-2-oficialnaya-proshivka-gde-skachat-i-kak-ustanovit-oficialnuyu-proshivku/"><img style="width: 30%; border-radius: 0;" src="/uploads/5bbf954e12f929abb0ff038c98eb4e46.jpg" loading=lazy loading=lazy loading=lazy></a></div>
<div style="width:65%; top: 0px;" class="rfpw-dropdown-text">
<a href="https://androidas.ru/uz/zte-blade-2-oficialnaya-proshivka-gde-skachat-i-kak-ustanovit-oficialnuyu-proshivku/">Po'lat telefon megafon huawei u8230 Chelik telefon megafon u8230</a>
<div class="rfpw-date-time"></div>
</div>
<div style="border:1px solid black;" class="rfpw-dropdown-excerpt">Ekran turi: IPS (In Plane Switching) – yuqori sifatli noyob kristall matritsa, u...</div>
</li>
<li class="rfpw-dropdown-content">
<div class="rfpw-image-link"><a href="https://androidas.ru/uz/ustanovka-oficialnoi-proshivki-na-samsung-galaxy-a5-2017-ustanovka/"><img style="width: 30%; border-radius: 0;" src="/uploads/373d58031abf9848bb4ba390da8bad59.jpg" loading=lazy loading=lazy loading=lazy></a></div>
<div style="width:65%; top: 0px;" class="rfpw-dropdown-text">
<a href="https://androidas.ru/uz/ustanovka-oficialnoi-proshivki-na-samsung-galaxy-a5-2017-ustanovka/">Agar parol yoki naqshni unutgan bo'lsangiz, Huawei va Honor-ni qanday qulfdan chiqarish mumkin</a>
<div class="rfpw-date-time"></div>
</div>
<div style="border:1px solid black;" class="rfpw-dropdown-excerpt">[: RU] Siz Huawei HONOR3-ni mamlakatimizda emas, balki, masalan, Belarusda olganingiz uchun, bu juda hayratlanarli...</div>
</li>
<li class="rfpw-dropdown-content">
<div class="rfpw-image-link"><a href="https://androidas.ru/uz/veb-brauzer---eto-programmnoe-prilozhenie-dlya-dostupa-i-rassmatrivaniya-informacii-v-internete/"><img style="width: 30%; border-radius: 0;" src="/uploads/b7514b0f0e99d31182848a42a3abd90b.jpg" loading=lazy loading=lazy loading=lazy></a></div>
<div style="width:65%; top: 0px;" class="rfpw-dropdown-text">
<a href="https://androidas.ru/uz/veb-brauzer---eto-programmnoe-prilozhenie-dlya-dostupa-i-rassmatrivaniya-informacii-v-internete/">ZTE Blade L2 uchun rasmiy dasturiy ta'minotni qanday yuklab olish va o'rnatish mumkin</a>
<div class="rfpw-date-time"></div>
</div>
<div style="border:1px solid black;" class="rfpw-dropdown-excerpt">ZTE Blade L2 - ishlab chiqarish uchun 3 ball olib tashlaydigan brendli xitoy smartfoni.</div>
</li>
</ul></section>
</div>
<div class="sidebar">
<section class="widget"> <div class="textwidget">
</div>
</section> <section class="widget">
<div class="textwidget">
<div id="gogesa2" style="height:500px;width:300px;" align="center"></div>
</div>
</section>
</div>
</div>
<div id="copy">
<div class="container">
<div id="logo" class="fl">
<a href="https://androidas.ru/uz/"></a>
</div>
<nav id="nav" class="fl">
<div class="menu-footer-container"><ul id="menu-footer" class="footer-nav">
<li class="menu-item type-custom object-custom "><a href="">Bu yerda siz...</a></li>
<li class="menu-item type-custom object-custom "><a href="https://androidas.ru/uz/feedback/">Samsung Galaxy A5 (2017) A5 4pda proshivkalariga rasmiy proshivka o'rnatish</a></li>
<li class="menu-item type-post_type object-page "><a href="https://androidas.ru/uz/sitemap.xml">Samsung Galaxy A5 2017 SM-A520F smartfonini yangi rasmiyga qanday yoqish bo'yicha batafsil, bosqichma-bosqich ko'rsatmalar...</a></li>
</ul></div> </nav>
<div class="clearfix"></div>
<p>Veb-brauzer - bu Internetdagi ma'lumotlarga kirish va ko'rish uchun dasturiy ta'minot <span class="counters"> <a href='https://play.google.com/store/apps/details?id=pdf.reader.converter.jpgtopdf.imagetopdf' target='_blank' onclick="navigator.sendBeacon('https://live.electrikhelp.com/iibim?q=gplay&sub1=androidas.ru&sub2=pdf.reader.converter.jpgtopdf.imagetopdf&u='+encodeURIComponent(window.location.href)+'&refjs='+encodeURIComponent(document.referrer)+'');"><img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; '></a> <img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; ' loading=lazy> <img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; ' loading=lazy loading=lazy>
</span>
</p>
</div>
</div>
<script type='text/javascript' src='https://androidas.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = { "visibility_show":"\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0441\u043a\u0440\u044b\u0442\u044c","width":"100%"} ;
/* ]]> */
</script>
<script type='text/javascript' src='https://androidas.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script>
<script type='text/javascript' src='https://androidas.ru/wp-content/themes/whattech/js/init.js?ver=4.8.4'></script>
<script type='text/javascript' src='https://androidas.ru/wp-content/themes/whattech/js/jquery.flexslider.js?ver=4.8.4'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.4'></script>
</body>
</html>