Səhifə başlığı. Addım-addım css təlimatları ilə monoxromatik başlıq yaradın. Səhifə başlığı Elementlərə şrift xassələrinin təyin edilməsi
Bu yazıda saytın başlığını necə düzəltməyə baxacağıq və saytın başlığını və təsvirini orada yerləşdirəcəyik.
İlk növbədə, saytın başlığı üçün bir şəkil lazımdır. Ən yaxşısı Photoshop-da edilir.
Bu redaktorun sahibi olmayanlar üçün, mən Paint-də, standart olaraq bütün Windows-da mövcud olan ən asan yolu təklif edirəm.
Şəklin enini 900px, saytın enini, hündürlüyünü isə 200px edək. Şübhəsiz ki, öz ölçüləriniz ola bilər, nə qədər ki, şəklin eni saytın eninə (sarğı) uyğundur, hündürlük sizin ixtiyarınızdadır.
Şəkil hazır olduqdan və şəkillər qovluğuna yerləşdirilən kimi, əvvəlki səhifədə yaradılmışı götürün və başlığı saytda quraşdırmağa davam edin.
#başlıq seçicisində onun üçün müəyyən edilmiş hündürlüyü çıxarın və çəkilmiş şəklin enini və hündürlüyünü təyin edin.
#başlıq (
eni: 900px; - eni
hündürlük: 200px; - hündürlük
fon rəngi: #25B33f ; - fon
kənar-alt: 10px; - alt abzas
}
Sonra şəklin özünü daxil edirik.
#başlıq (
eni: 900px;
hündürlük: 200px;
fon rəngi: #25B33f ;
kənar-alt: 10px;
fon şəkli : url(images/i8.png) - şəkil
}
Fon rəngi xüsusiyyəti, hər hansı bir ziyarətçinin brauzerində birdən-birə şəkil göstərilmədiyi təqdirdə göstərilir.
Əgər şəkil hər hansı ofsetlə yerləşdirilibsə və onu düzəltmək lazımdırsa, o zaman əmlak buraya əlavə olunur
İndi saytın başlığı və təsvirinin vaxtıdır. Bunun üçün bədən teqində id="header" identifikatoru ilə div bloku yazırıq və orada iki h1 və h3 başlıqları var, onlara saytın adını və onun təsvirini daxil edirik.
Saytın başlığı
Gəlin görək nə edə bilərik.
İndi başlığa və təsvirə nəzər salaq. Onlar üçün iki seçici yaradırıq və aşağıdakı xüsusiyyətləri təyin edirik:
h3 üçün eni 200 pikselə təyin edəcəyik ki, o, bütün təsvirə uzanmasın. Başlıqda mətni harada yerləşdirmək daha rahat olacağından asılı olaraq abzaslar manipulyasiya edilə bilər.
Nəticəni görək.
Məncə, çox şirindir.
Bu səhifənin kodunu ümumiləşdirək.
Başlıqsız sənəd
#sarğı (
eni: 900px;
kontur : 1px bərk #787274 ;
doldurma: 10px;
kənar: 0 avtomatik;
}
#başlıq (
eni: 900px;
hündürlük: 200px;
fon rəngi: #25B33f ;
kənar-alt: 10px;
fon şəkli: url(images/i8.png)
}
#yan panel (
fon rəngi: #2FF553 ;
kənar-alt: 10px;
eni: 180px;
doldurma: 10px;
üzmək: sağa;
}
#məzmun (
fon rəngi: #9EF5AF ;
kənar-alt: 10px;
eni: 670px;
doldurma: 10px;
}
#footer (
hündürlük: 80px;
fon rəngi: #41874E ;
kənar-alt: 10px;
}
.açıq(
aydın: hər ikisi;
}
h1 (
rəng: #ffee00 ;
şrift: 40px Georgia;
sol kənar: 300px;
}
h3 (
eni: 200px;
rəng: #ffee00 ;
şrift üslubu: kursiv;
kənar: 70px 0 0 30px;
}
Saytın başlığı
Başlıq və təsviri olan bir veb sayt üçün başlığı necə etmək olar
Salam əziz gələcək veb ustaları!
Mənim 55 yaşım var və salamlamaqdan məmnunam
saytınızda.
Bu sayt mənim özüm hazırladığım ilk saytdır.
və ondan əvvəl mən ancaq internetə necə girməyi bilirdim.
Amma mənim üçün yaşım və “təcrübəmi” nəzərə alsaq, bu, asan deyildi
bu nüansları dəqiq başa düşmək üçün götürdülər
çox vaxt.
Və materialımı yazmağa qərar verdim ki, başqaları üçün də asan olsun
yeni məlumat axınında naviqasiya edin.
Veb saytın yaradılmasını müşayiət edən bütün xırda detallar burada “çeynənilir”,
digər müəlliflər adətən keçmişi atlayırlar.
Saytın başlığına şəkil əlavə etmək üçün başqa bir seçim var. Bloka başlıqdan əvvəl şəklin ünvanını daxil edə bilərsiniz (məsələn, mənim şəklimin ünvanı
http://trueimages.ru/img/0b/d0/06bb1a05753316ac3c567d047ba.png ">
Bu halda, #header selektorunda biz background-image xassəsini silirik: (../images/position.png); , və mövqeyini yazın: nisbi .
Və h1 və h3 teqlərinin seçicilərində biz xassə mövqeyini təyin edirik: mütləq; .
Bu halda, başlıqlar üçün boşluqları dəyişdirməlisiniz. Bunun niyə edildiyini məqalədə oxuya bilərsiniz
#başlıq (
eni: 900px;
hündürlük t: 200px ;
fon rəngi: #25B33f ;
kənar-alt: 10px;
mövqe: qohum;
}
h1(
mövqe: mütləq;
rəng: #ffee00 ;
şrift: 40px Georgia;
sol: 300px;
}
h3(
mövqe: mütləq;
eni: 200px;
rəng: #ffee00 ;
şrift üslubu: kursiv;
yuxarı: 70px;
sol: 30px;
}
Qalan hər şey dəyişməz olaraq qalır.
İndi veb saytı WordPress CMS-də olanlar üçün bəzi məlumatlar.
WordPress-də hazır mövzu quraşdırılıb, başlığı hazırdır, lakin tutaq ki, siz bu hazır başlığa öz loqotipinizi və ya başqa bir şəkil əlavə etmək istəyirsiniz.
Bu aşağıdakı kimi edilir. Konsolda “Yazılar - Yeni əlavə et” bölməsini açın, redaktoru HTML rejiminə keçirin və sonra saytın başlığına əlavə olunacaq şəkli yükləyin.
Yüklədikdən sonra şəkil kodu redaktorda görünəcək, onu kopyalamalısınız və "Qeyd" silinə bilər.
Sonra “Görünüş - Redaktor”a keçin və redaktə üçün header.php faylını açın.
Bu faylda xətti tapın və ondan sonra kopyalanan şəkil kodunu yapışdırın.
Bundan sonra biz faylı yeniləyirik və şəklin sayt başlığında necə yerləşdirildiyini görürük.
Əgər onu bir yerə köçürmək lazımdırsa, fayl redaktoruna qayıdın və img teqində şəkil koduna margin xüsusiyyəti ilə stil atributunu əlavə edin.
style="margin:0 0 0 0;"
Və şəkli lazım olan yerə köçürürük.
Beləliklə, saytın ilk səhifəsini yaratdıq. Başlığı və aşağıda təsvir edilən bəzi digər dəyişiklikləri yekunlaşdırdıqdan sonra siz bu faylı index.html adlandırıb hostinqə yükləyə bilərsiniz. Sonra eyni şablondan istifadə edərək başqa səhifələr yaradılır, menyu yaradılır və s. Və sayt internetdə öz həyatına başlayır.
P.S. Kimsə WordPress saytının başlığında olan şəkli dəyişdirmək və başlıqların mövqeyini manipulyasiya etmək istəyirsə, bu məqalə bu barədə danışacaq.
Sizə yaradıcılıq uğurları arzulayıram.
Səhifənin tərtibatı HTML sənədinin strukturunun işlənib hazırlanması prosesidir, nəticəsi veb səhifədir. Veb səhifənin strukturu müvafiq HTML teqləri ilə müəyyən edilir. Teqlər - məzmun üçün düzbucaqlı konteyner blokları - brauzer pəncərəsində görünmür. Onlar brauzerə məzmunun növü haqqında məlumat verirlər və brauzer bu məlumatlara əsaslanaraq onların məzmununu - mətn və ya media fayllarını göstərir.
Bloklardan istifadə edərək səhifə strukturunu necə yaratmaq olar (blok düzümü) 1. Səhifənin tərtibatını bölmələrə necə bölmək olarSəhifənin tərtibatını yaratmaq üçün sənədin əsas bölmələrini (bölmələrini) seçmək lazımdır. Məqalədə bölmə elementləri haqqında daha çox oxuya bilərsiniz.
Standart veb-səhifədə aşağıdakı bölmələr var:
düyü. 1. Səhifənin əsas bölmələri
Elementdən istifadə etməyəcəyik, çünki o, bütün brauzerlər tərəfindən dəstəklənmir.
Elementlər,
və blok əsaslıdır, ona görə də onlar konteyner blokunun - elementinin bütün enini tutacaqlar. Bu tərtibatlı səhifə kiçik ekranlarda yaxşı görünəcək, lakin yüksək ayırdetmə qabiliyyətinə malik cihazlarda belə səhifələrdəki mətni oxumaq çətin olacaq. Buna görə məzmun üçün bir konteyner etiketi əlavə etmək lazımdır - hər bölmənin məzmunu: 
düyü. 2. Konteyner etiketi olan səhifənin əsas bölmələri
və bunun üçün məzmunu aşağı qətnamə ilə cihazların ekranının kənarlarından ayıracaq maksimum genişlik, daxili doldurma, həmçinin konteyneri ana blokun ortasında hizalamağa imkan verən xarici doldurma təyin edin:
Konteyner ( eni: 100%; maksimum eni: 1024px; /*maksimum enin fərqli dəyəri ola bilər*/ doldurma: 0 15px; kənar: 0 avtomatik; )
Beləliklə, səhifəmiz üçün bir çərçivə aldıq (bu vəziyyətdə bölmələrin hündürlüyü virtualdır, çünki məzmunsuz bölmələrin hündürlüyü sıfırdır).
2. Saytın başlığının tərtibatı və onun elementlərinin yerləşdirilməsiVeb səhifənin başlığı deyilən birinci bölməni qeyd etməyə başlayaq. Element səhifədə/saytda giriş məlumatı və naviqasiya vasitələrini qruplaşdırmaq üçün nəzərdə tutulmuşdur. Saytın loqosunu və naviqasiya bağlantılarını etiketin içərisinə əlavə edək:
düyü. 3. Əlavə loqosu və keçidləri olan veb sayt başlığı Loqo ( float: sol; ) nav ( float: sağ; ) nav ul ( kənar: 0; padding: 0; siyahı üslubu: heç biri; ) nav li ( ekran: inline-block; /* elementləri bir yerə yerləşdirməyin bir yolu xətt */)
Blok elementlərini bir sıra yerləşdirməyin bir neçə yolu var. Onların hamısı dərsdə verilir.
düyü. 4. Konteyner blokunun çökməsinin təsiri Diqqət yetirin ki, biz sarğı tətbiq etdikdən sonra başlıq yox oldu. Bu, üzən elementlərin (float xassə dəstinə malik olanlar) normal axından silinməsi və əsas konteynerin artıq onların hündürlüyünü görməməsi səbəbindən baş verdi, beləliklə həm element, həm də onun içindəki sinif .container elementi çökdü. Bu vəziyyəti düzəltmək üçün .container sinfi olan element üçün axın təmizlənməsindən istifadə edək:
Konteyner:sonra ( məzmun: ""; ekran: cədvəl; aydın: hər ikisi; )
Biz də onun içindəki elementləri başlığın kənarlarından ayıraraq, ona şaquli padding əlavə edəcəyik. Nəticədə üslublar belə görünəcək:
Konteyner (en: 100%; maksimum en: 1024px; doldurma: 15px; kənar: 0 avtomatik; ) 
düyü. 5. Stream təmizləmə
Şəklin loqo rolunu oynadığı bir vəziyyəti nəzərdən keçirək. O, birbaşa etiketin içərisinə və ya fon şəkli kimi əlavə edilə bilər. Təsvirin öz hündürlüyü olacaq, bu, naviqasiya menyusunun hündürlüyündən çox fərqli ola bilər, buna görə də başlıq elementlərinin şaquli hizalanması problemi ilə qarşılaşacağıq.
düyü. 6. Loqo şəkli Bizim nümunəmizdə loqonun hündürlüyü 38 pikseldir, ona görə də menyu bağlantılarını başlığın ortasına uyğunlaşdırmaq üçün onları müvafiq sətir hündürlüyünə təyin etməlisiniz:
Nav a (mətn dekorasiyası: heç biri; xəttin hündürlüyü: 38px; ) Şek. 7. Başlıq menyusunun keçidlərinin düzülməsi
3. Səhifənin əsas hissəsi üçün şəbəkə yaradınSəhifənin əsas hissəsi çox vaxt müxtəlif enli bloklardan ibarət bir şəbəkədir. Belə blokların yerləşdirilməsi də float xüsusiyyətindən istifadə etməklə həyata keçirilir. Hər bir blok sırasını .row sinfi ilə əlavə blokla bağlayacağıq:
düyü. 7. Səhifənin əsas hissəsinin şəbəkəsi.col-1-2 (en: 50%; float: sol; ) .col-1-3 (en: 33.3333333333%; float: sol; ) .col-1-4 (en: 25 %; üzmə: sol; ) .col-2-3 (en: 66.6666666667%; üzmə: sol; )
.sətir sinfi olan element üçün axın təmizlənməsini də tətbiq edirik:
Konteyner:sonra, .sətir:sonra ( məzmun: ""; ekran: cədvəl; aydın: hər ikisi; )
Sətirləri bir-birindən ayırmaq üçün aşağı kənar əlavə edə bilərsiniz:
Sıra (aşağıdan kənar: 15px; )
Şəbəkə bloklarının hündürlüyü onların məzmununun hündürlüyü ilə müəyyən edilir, buna görə də fərqli ola bilər:
düyü. 8. Şəbəkə elementlərinin müxtəlif hündürlükləri Blokların hündürlüyü onu açıq şəkildə göstərməklə müəyyən edilə bilər, məsələn, .row div (hündürlük: 100px) . Ancaq bu vəziyyətdə, tərtibata uyğunlaşma əlavə edərkən, blokların məzmununun blokun kənarından kənara çıxmayacağına əmin olmalısınız.
Bir sıra blokları üçün fon rəngini təyin etmək lazımdırsa, bu, aşağıdakı kimi edilə bilər: .row sinfi olan bir element üçün yalnız bu sıranın üslubunu yaratmağa imkan verən yeni bir sinif əlavə edin (məlum olur ki, . sətir-bir), bunun üçün hündürlüyündə kiçik blokun fon rəngini təyin edin və hündür blok üçün öz rəngini təyin edəcəyik, yəni bu şəkildə fon fonu edəcəyik.
Lorem ipsum dolor sit amet.
Duis lobortis tempor tortor və ya iaculis. Komodo lacus sərinləşir, vəstibulum səliqəsizdir.
Birinci sıra ( fon: açıq mavi; ) .col-2-3 ( en: 66.6666666667%; üzmə: sol; fon: dəniz qabığı; ) 
düyü. 9. Fon tutqun
Səhifənin əsas bölməsində yalnız iki blok varsa, əlavə sarğı sırası əlavə edilə bilməz:
4. Səhifənin altbilgisinin tərtibatıSəhifənin altbilgisi və ya altbilgisi adətən müəllif hüquqları məlumatlarını, əlavə bağlantıları və s. Bütün bu məlumatlar eyni və ya fərqli genişlikdə ola bilən sütunlarda da yerləşdirilir.
Düşünürəm ki, bir çoxunuz artıq qeyd etdi ki, trend indi istifadəçi səhifəni sürüşdürdükcə görünən daha çox yapışqan dizayn elementlərini ehtiva edir. Məncə, bu, çox rahatdır, xüsusən də sayt naviqasiyasıdırsa. Bu, bu gün edəcəyimiz nümunədir. JQuery və CSS3-dən istifadə edərək animasiya ilə veb sayt başlığının necə hazırlanacağını öyrənəcəyik.
Həmişə olduğu kimi, bu, minimum kod sətirlərində edilir və çox sadə və eyni zamanda çox təsirlidir. Yaxşı, indi dərsə başlayaq.
Ancaq əvvəlcə http://www.webdesignerdepot.com saytına böyük təşəkkür etmək istərdim və indi başlayaq.
Mən HTMLHTML kodu çox, çox sadədir, sadəcə olaraq etiketləri təyin etməli və sonra onların arasında saytın məzmununu yazmalıyıq:
Əlavə edilmiş sayt başlığıBu ən sadə nümunə olduğundan, burada h1 teqləri arasına sadəcə mətn əlavə etdik, lakin siz şəkillərdən və ya məsələn, sayt naviqasiyasından da istifadə edə bilərsiniz.
jQuery koduCSS bu gün animasiyaları və keçidləri həyata keçirməyin ən yaxşı yoludur. Beləliklə, biz minimum skriptlərdən istifadə edəcəyik və yalnız səhifəni sürüşdürərkən animasiyanın tetiklenmesini müəyyən etmək üçün.
Səhifənin sürüşdürmə mövqeyinin dəyəri 1-dən böyük olduqda, bu o deməkdir ki, istifadəçi səhifəni sürüşdürüb və siz saytın başlığı etiketinə “yapışqan” sinif əlavə etməlisiniz. Saytın başlığı belə işə salınır və düzəldilir.
Və kodun özü budur:
$(pəncərə).scroll(function() ( if ($(bu).scrollTop() > 1)( $("başlıq").addClass("yapışqan"); ) else( $("başlıq").removeClass ("yapışqan"); ))))
Qeyd etmək lazımdır ki, bu nümunədə istifadə etmək o qədər də yaxşı fikir deyil, çünki brauzerdə skriptlərin istifadəsi qeyri-aktivdirsə, saytın başlığı sadəcə düzəldiləcək və budur.
CSSCSS kodu 2 hissədən ibarət olacaq. İlk kod standart mövqedə olan standart sayt başlığına cavabdeh olacaq. İkinci kod istifadəçi səhifəni sürüşdürən zaman başlığın göstərilməsinə cavabdeh olacaq. Defolt kodun necə göründüyünə baxaq:
Başlıq (mövqe: sabit; en: 100%; mətn hizalanması: mərkəz; şrift ölçüsü: 72px; xətt hündürlüyü: 108px; hündürlük: 108px; fon: #335C7D; rəng: #fff; şrift ailəsi: "PT Sans ", sans-serif; )
İndi maraqlı hissə: istifadəçi səhifəni aşağı sürüşdürdükdə, .sticky sinfi tətbiq olunacaq ki, biz ona yalnız CSS-nin qadir olduğu tamamilə fərqli bir ekran verə bilərik. Saytın başlığının həmişə görünməsi üçün sabit mövqe də təyin edəcəyik.
Aşağıdakı bu CSS qaydalarından istifadə edərək, sürüşdürərkən başlığın özünün sahəsini azaltmaq, rəngini dəyişdirmək və əlbəttə ki, şrifti kiçik etmək istəyirik. Budur kodun özü:
Header.sticky ( şrift ölçüsü: 24px; sətir hündürlüyü: 48px; hündürlük: 48px; fon: #efc47D; mətni hizalayın: sola; doldurma-sol: 20px; )
Bu, işin mahiyyətini başa düşməli olduğunuz ən sadə nümunədir. Hamısı saytınızın dizaynından asılıdır.
Yaxşı, indi istifadə edərək keçidimizə bəzi animasiya əlavə edək. Budur kod:
Keçid: bütün 0.4s asanlığı;
Mən NəticəÜmid edirəm ki, bu üsul sayt üçün rahat və sadə naviqasiyanın həyata keçirilməsi ilə bağlı bir çox sualları həll edəcək. Bundan əlavə, bu icra çox sadə və başa düşüləndir.
Maye düzümü ilə bağlı əsas çətinlik yüksəkdən aşağıya doğru müxtəlif qətnamələrdə düzgün görüntünün təmin edilməsidir. Məzmun genişliyini 760 piksellə məhdudlaşdırdığımız üçün başlıq şəkli elə yerləşdirilməlidir ki, şəklin daha vacib hissəsi bu ölçüyə uyğun olsun. Şəkildə. 6.3 bunun necə ediləcəyini göstərir. 760px eni olan mərkəzi hissə tünd rənglə vurğulanır, A hərfi bərabər genişlikdə qalan fraqmentləri bildirir.
düyü. 6.3. Qapağın eni
Başlıqda şəkilin faktiki əlavə edilməsi elementin mərkəzinə uyğunlaşdırılmalı olan fon şəkli vasitəsilə həyata keçirilir.
Başlıq (ekran: blok; /* Köhnə brauzerlər üçün */ hündürlüyü: 405px; /* Başlığın hündürlüyü */ arxa plan: url(images/header-bg.png) təkrar olunmayan mərkəzin alt hissəsi; )
İdeal olaraq, şəkil 2000 piksel böyük bir eni olmalıdır, sonra demək olar ki, hər hansı bir monitor qətnaməsində şəkil pəncərəyə uyğun olmayan hər şeyi kəsərək mərkəzi hissəni göstərəcəkdir. Ancaq problem ondadır ki, əvvəlcə şəkil o qədər də geniş deyil və yanlara sonsuz uzanan qara zolaqlar çəkmək istəmirsiniz. Çözümlərdən biri üfüqi fonun təkrarlanmasını təmin etməkdir. 1280 piksel və ya daha az eni olanlar tək bir şəkil görəcəklər, geniş monitorların sahibləri isə eyni vaxtda bir neçə heyvana və batan günəşə heyran ola biləcəklər. Burada çertyojın birləşməsiz özü ilə üfüqi uyğunlaşması üçün redaktə etmək vacibdir (şək. 6.4). Aydınlıq üçün gradient gizlədilib.
düyü. 6.4. Şəklin üfüqi hizalanması
Bu şəkildə birləşmənin yeri ox və boşluqla göstərilir ki, oynaq görünsün. Fon şəklinin sağ və sol hissələrini düzgün redaktə etsəniz, o, bir davamlı naxış kimi görünən birləşmələr olmadan üfüqi şəkildə təkrarlanacaq. Təkrarlanmayan (təkrar yoxdur) dəyərini təkrar-x (üfüqi təkrar) ilə əvəz edərək üslubu bir az düzəltmək qalır.
Başlıq (ekran: blok; hündürlük: 405px; fon: url(şəkillər/başlıq-bg.png) təkrar-x mərkəzi alt; )
düyü. 6.5. Başlıq üçün fon şəkli
PNG-24 formatında fon ölçüsü 1325x405 piksel olan fayl təxminən 32 KB, gradientin keyfiyyətinin bir qədər pis olduğu 256 rəngli palitrası olan PNG-8-də isə təxminən 15 KB yer tutur. Siz fonu iki komponentə - gradient və şəkilə ayıra və hər bir şəkli öz formatında saxlaya bilərsiniz ki, bu da gradient ekranının keyfiyyətinin artmasına səbəb olmalıdır. Bununla belə, belə böyük bir şəkil üçün 32 KB çox deyil və bəziləri "matçlara qənaət" əlavə optimallaşdırmanı nəzərdən keçirəcəklər. Bununla belə, bəzi insanlar veb sayt başlığı yaratmaq üçün bu alternativ yanaşmanı faydalı hesab edə bilər və istəsəniz, onu atlaya bilərsiniz.
Başlığın optimallaşdırılmasıBaşlıqdakı qradiyent üfüqi şəkildə təkrarlandığı üçün o, düzəndən kəsilə və fon şəkli kimi təyin edilə bilər. Şəkildə. Şəkil 6.6-da bu məqsədlə hazırlanmış 405 piksel yüksək gradient göstərilir. PNG-24 formatı təsviri təhrif etmir və gradientləri yaxşı sıxışdırır (son həcm 402 baytdır), bu halda siz mütləq ondan istifadə etməlisiniz. Aydınlıq üçün şəklin ətrafına çərçivə əlavə olunub.
düyü. 6.6. Gradient rəsmi (header-gradient.png)
Siluet heyvanları olan bir şəkil şəffaf fonda və 198 piksel yüksəklikdə hazırlanır, onu başlığın bütün hündürlüyünə çatdırmağın mənası yoxdur, çünki o, yalnız bir hissəsini tutur. Şəklin bir parçası Şəkildə göstərilmişdir. 6.7. Dama taxtası şəffaflığı bildirir.
düyü. 6.7. Şəffaflıqla fon şəkli (header-animal.png)
Bu şəkil PNG-24 formatının 256 səviyyəsindən fərqli olaraq yalnız bir şəffaflıq səviyyəsinə malik olan PNG-8 formatında saxlandığı üçün gradient fonunda düzgün örtüyü təmin etmək vacibdir. Bunun üçün Photoshop-da yadda saxlayarkən siluetin üst-üstə qoyulduğu gradientin orta hissəsinə yaxın olan kənarların rəngini (Matte) təyin etməlisiniz. Bu təxminən #9de1f0 rəngidir. Bu vəziyyətdə, ağacların və heyvanların ətrafında çirkli konturlar olmayacaq və şəkil, gradientin üzərinə qoyulduqda, vahid bir bütöv olaraq qəbul ediləcəkdir.
Başlığın fonu üçün iki şəkil hazırlanır, HTML kodunu yazırıq.
Və başlıq-bg elementi və təbəqəsi üçün üslub.
Başlıq ( fon: #00b0d8 url(şəkillər/header-gradient.png) təkrar-x; ) .header-bg (fon: url(şəkillər/header-animal.png) təkrar-x mərkəzi aşağı; hündürlük: 405px; )
Nəticədə, faylın ölçüsü 12,5 KB oldu, bu gözləniləndən də azdır.
Saytın adıBaşlıq lələkli kənarları olan bulud üzərində yazılmışdır ki, bu da gradientə tətbiqi çətinləşdirməlidir. Onların ətrafında getməyin iki yolu var.
Aydındır ki, ikinci metodun bir sıra çatışmazlıqları var - şəkil hətta bir neçə piksellə də köçürülə bilməz, o, gradientə bağlıdır və onun gradienti dəyişdirilərsə, şəkil dəyişdirilməli olacaq. Beləliklə, başlığı PNG-24 formatında saxlayırıq. HTML kodu eyni qalacaq, lakin üslublar genişləndiriləcək.
Başlıq ( fon: #00b0d8 url(şəkillər/header-gradient.png) təkrar-x; ) .header-bg ( fon: url(şəkillər/header-animal.png) təkrar-x mərkəzi aşağı; hündürlük: 405px; /* Başlıq hündürlüyü */ text-align: center; /* Mərkəzə düzülmə */ ) .header-bg img (mövqe: nisbi; /* Nisbi yerləşdirmə */ yuxarı: 40px; /* Şəkli aşağı köçürün */ )
Mərkəzə düzülmə teqin əsas hissəsinə əlavə edilmiş mətnə uyğunluq xüsusiyyəti vasitəsilə həyata keçirilir , və yuxarı əmlak vasitəsilə aşağı sürüşdürün. Bu xüsusiyyətin işləməsi üçün nisbi dəyəri olan mövqe xüsusiyyətindən istifadə edərək şəkil üçün nisbi yerləşdirmə təyin etməlisiniz.
Saytın əsas səhifəsində başlıqlı şəkil həmişəki kimi göstərilir, digər səhifələrdə isə əsas səhifəyə keçid rolunu oynayır. Bunu etmək üçün kodu bir az dəyişdirin:
href atributunun /y dəyəri ana səhifəyə işarə edir və yerli olaraq deyil, yalnız veb serverdə işləyir.
Başlıq üçün son kod Nümunə 6.14-də göstərilmişdir.
Misal 6.14. Saytın başlığı
HTML5 CSS 2.1 IE Cr Op Sa Fx
Səhrada aslanı necə tutmaq olar?
Çox vaxt sadə görünən layout tapşırıqları mürəkkəb HTML işarələmə strukturunu və CSS hiylələrinin istifadəsini tələb edir. Elementləri mərkəzləşdirmək və ya məzmunu hizalamaq çox yorucu ola bilər. Belə vəzifələrdən biri saytın yuxarısındakı elementləri loqonun solda, menyu elementlərinin isə sağda olması üçün uyğunlaşdırmaqdır. Siz float və position:absolute istifadə edə bilərsiniz və şaquli düzülmə üçün müxtəlif elementlərə kənar və dolgu əlavə edə bilərsiniz. Görünür, mürəkkəb bir şey yoxdur. Amma əgər sayt mobil cihazlarda düzgün göstərilməlidirsə, bir çox problemlər yaranır.
Aşağıda bu problemi həll etməyin qısa yolu var.
HTML işarələməsi mümkün qədər sadədir:
Super Pis İlk Link İkinci Link Üçüncü LinkBaşlığın hündürlüyü sabitdir, əlavə edin mətni düzləşdirmək: əsaslandırmaq, uşaq elementlər üçün:
Başlıq (mətn hizalayın: əsaslandırın; hərf aralığı: 1px; hündürlük: 8em; doldurma: 2em 10%; fon: #2c3e50; rəng: #fff; )
Əlavə et ekran: inline-block bütün naviqasiya elementləri üçün bir-birinin yanında yerləşdirilə bilməsi üçün:
Başlıq h1, başlıq naviqasiyası (ekran: inline-block; )
Atribut etmək mətni düzləşdirmək: əsaslandırmaq istədiyimiz kimi işlədik, Jelmer de Maat tərəfindən inline-block istifadə edərək mükəmməl əsaslandırılmış CSS şəbəkə texnikası məqaləsində tapılan yalançı elementlərlə bir az hiylə işlətməliyik:
Başlıq::sonra (məzmun: ""; ekran: inline-blok; en: 100%; )
Nəticə istifadə etmədən üfüqi hizalama idi sal Və mövqe: mütləq. İndi elementləri şaquli olaraq hizalamalısınız. İstifadə şaquli düzləşdirmə naviqasiya elementləri üçün ana blokun hündürlüyündən asılılıq olacaq - başlıq. Və bu çox düzgün deyil. Vertikal align: yuxarı və şaquli align: jsbin-də ortadan istifadə nümunələri. Aşağıda şaquli hizalama üçün bəlkə də ən əlverişli üsuldur.
Yenidən psevdo elementlərdən istifadə edək. Michał Czernow tərəfindən qeyd olunan Naməlumda Mərkəzləşmə məqaləsindən bir nümunə istifadə edərək:
Başlıq h1 ( hündürlük: 100%; ) başlıq h1:: əvvəl ( məzmun: ""; ekran: inline-blok; şaquli hizalama: orta; hündürlük: 100%; )
Nəticə sizə lazım olan şeydir:
Həll etmək üçün iki problem qalır: başlıqda çox sayda mətn olduqda düzgün ekran və uyğunlaşma. Saytın başlığı çox uzun olarsa, tərtibat sürüşməyə başlayacaq:
Başlıqda psevdo-element hiyləsindən istifadə edək:
CSS kodu
başlıq (mətn hizalanması: əsaslandırma; hündürlük: 15em; doldurma: 2em 5%; fon: #2c3e50; rəng: #fff; ) başlıq::after (məzmun: ""; ekran: inline-blok; en: 100%; ) başlıq > div, başlıq naviqasiyası, başlıq div h1 (ekran: inline-block; şaquli hizalama: orta; ) başlıq > div (en: 50%; hündürlük: 100%; mətni hizalayın: sola; ) başlıq > div: :əvvəl (məzmun: ""; ekran: inline-blok; şaquli hizalama: orta; hündürlük: 100%; )
Daha yaxşı görünür:
İndi uyğunlaşmaya keçək. Bu problemi həll etməyin bir neçə yolu var, sadəcə başlığın hündürlüyünü təyin edə bilməzsiniz və bütün daxili elementlər hündürlüyə uyğunlaşacaqdır. Bunun üçün psevdo elementlərlə ikinci hiylə tələb olunmayacaq, jsbin-də canlı nümunə.
CSS kodu
başlıq (mətn hizalanması: əsaslandırma; doldurma: 2em 5%; fon: #2c3e50; rəng: #fff; ) başlıq::sonra (məzmun: ""; ekran: inline-blok; en: 100%; ) başlıq h1, başlıq naviqasiyası (ekran: inline-block; şaquli düzülmə: orta; ) başlıq h1 (en: 50%; mətni düzləndirmə: sol; padding-top: 0.5em; ) başlıq naviqasiyası (padding-top: 1em; )
Başlığın hündürlüyünü təyin etmək lazımdırsa, onda psevdo elementlərlə ikinci hiylədən istifadə etməli və müxtəlif ölçülü ekranlar üçün media sorğusu əlavə etməli olacaqsınız:
@media ekranı və (maksimum eni: 820px)( başlıq ( hündürlük: avtomatik; ) başlıq > div, başlıq >
Nəticə uyğunlaşır və mobil cihazlarda belə görünür:
Nümunədə aydınlıq üçün 820px istifadə olunur; canlı saytda, tələblərə uyğun olaraq, dəyər əlbəttə ki, fərqli olmalıdır. Internet Explorer 8-i dəstəkləmək üçün psevdo elementlər üçün “::” əvəzinə “:” istifadə etməlisiniz.
Son CSS kodu
@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * ( padding: 0; margin: 0; ) body ( fon: #1abc9c; font-family: "Lato", sans-serif; mətn-çevir: böyük hərf; hərflər arası: 1px;) başlıq (mətn hizalayın: əsaslandırın ; hündürlük: 8em; doldurma: 2em 5%; fon: #2c3e50; rəng: #fff; ) başlıq::sonra (məzmun: ""; ekran: inline-blok; en: 100%; ) başlıq > div, başlıq > div::əvvəl, başlıq naviqasiyası, başlıq > div h1 (ekran: inline-block; şaquli-align: orta; text-align: sola; ) header > div ( hündürlük: 100%; ) header > div::fore ( content : ""; hündürlük: 100%; ) başlıq > div h1 (şrift ölçüsü: 3em; şrift tərzi: kursiv; ) başlıq nav a (doldurma: 0 0.6em; boşluq: nowrap; ) başlıq nav a:son -child ( padding-right: 0; ) @media screen and (max-width: 720px)( header ( hündürlük: auto; ) header > div, header > div h1, header nav ( hündürlük: auto; width: auto; display) : blok; mətni hizalayın: mərkəz; ) )
Nəticə:
Hamıya salam. Bu gün insanların bloga daxil olduğu axtarış sorğularının statistikasına baxdım və aşkar etdim ki, bir neçəsi var ki, bunlar heç də uyğun deyil. Xeyr, blog deyil, məqalələr.
Onlardan biri saytın başlığını necə düzəltmək olar? Mövzu aktual olduğundan və bu sahədə suallar olduğundan dərhal vəziyyəti düzəltməyə və məqalə yazmağa qərar verdim.
Ümumiyyətlə, səhifəni sürüşdürməyin bir neçə yolu var. Siz javascriptdən istifadə edə bilərsiniz, lakin mən bu mövzuda çox güclü deyiləm və onu yeni öyrənirəm. Buna görə də, hələlik CSS ilə məşğul olacağıq. Allaha şükürlər olsun ki, saytın başlığını (yalnız başlığı deyil, hər hansı digər elementi) “az xərclə” düzəldə bilərsiniz :)
Əslində, səhifəni sürüşdürərkən elementi düzəltmə üsulu çox sadədir və bu problemin nə qədər asanlıqla həll olunduğuna təəccüblənəcəksiniz.
Səhifəni sürüşdürərkən başlığın düzəldilməsiBaşlığı düzəltmək üçün iki blok yaratmalı olacaqsınız. Biri - qapağı mərkəzləşdirə bilmək üçün. İçində bir uşaq da var, o da yazılacaq. Başlayaq...
Bu çox sadə bir html quruluşudur! İndi üslubları əlavə edək!
#headerMain (en:920px; hündürlük: 195px; kənar:0px avtomatik; z-index:0; ) #başlıq (en:920px; hündürlük: 195px; fon: url(../img/bg-header.jpg) yox -təkrar; mövqe: sabit; z indeksi: 9999; )
İndi başlıq ekranın yuxarı hissəsində sabitlənəcək və sürüşərkən hərəkət etməyəcək.
Düşünürəm ki, bir çoxunuz artıq qeyd etdi ki, trend indi istifadəçi səhifəni sürüşdürdükcə görünən daha çox yapışqan dizayn elementlərini ehtiva edir. Məncə, bu, çox rahatdır, xüsusən də sayt naviqasiyasıdırsa. Bu, bu gün edəcəyimiz nümunədir. JQuery və CSS3-dən istifadə edərək animasiya ilə veb sayt başlığının necə hazırlanacağını öyrənəcəyik.
Həmişə olduğu kimi, bu, minimum kod sətirlərində edilir və çox sadə və eyni zamanda çox təsirlidir. Yaxşı, indi dərsə başlayaq.
Ancaq əvvəlcə http://www.webdesignerdepot.com saytına böyük təşəkkür etmək istərdim və indi başlayaq.
Mən HTMLHTML kodu çox, çox sadədir, sadəcə olaraq üçün teqləri təyin etməli və sonra onların arasında saytın məzmununu yazmalıyıq:
Əlavə edilmiş sayt başlığı 
Bu ən sadə nümunə olduğundan, burada h1 teqləri arasına sadəcə mətn əlavə etdik, lakin siz şəkillərdən və ya məsələn, sayt naviqasiyasından da istifadə edə bilərsiniz.
jQuery koduCSS bu gün animasiyaları və keçidləri həyata keçirməyin ən yaxşı yoludur. Beləliklə, biz minimum skriptlərdən istifadə edəcəyik və yalnız səhifəni sürüşdürərkən animasiyanın tetiklenmesini müəyyən etmək üçün.
Səhifənin sürüşdürmə mövqeyinin dəyəri 1-dən böyük olduqda, bu o deməkdir ki, istifadəçi səhifəni sürüşdürüb və siz saytın başlığı etiketinə “yapışqan” sinif əlavə etməlisiniz. Saytın başlığı belə işə salınır və düzəldilir.
Və kodun özü budur:
$(pəncərə).scroll(function() ( if ($(bu).scrollTop() > 1)( $("başlıq").addClass("yapışqan"); ) else( $("başlıq").removeClass ("yapışqan"); ))))
Qeyd etmək lazımdır ki, bu nümunədə istifadə etmək o qədər də yaxşı fikir deyil, çünki brauzerdə skriptlərin istifadəsi qeyri-aktivdirsə, saytın başlığı sadəcə düzəldiləcək və budur.
CSSCSS kodu 2 hissədən ibarət olacaq. İlk kod standart mövqedə olan standart sayt başlığına cavabdeh olacaq. İkinci kod istifadəçi səhifəni sürüşdürən zaman başlığın göstərilməsinə cavabdeh olacaq. Defolt kodun necə göründüyünə baxaq:
Başlıq (mövqe: sabit; en: 100%; mətn hizalanması: mərkəz; şrift ölçüsü: 72px; xətt hündürlüyü: 108px; hündürlük: 108px; fon: #335C7D; rəng: #fff; şrift ailəsi: "PT Sans ", sans-serif; )
İndi maraqlı hissə: istifadəçi səhifəni aşağı sürüşdürdükdə, .sticky sinfi tətbiq olunacaq ki, biz ona yalnız CSS-nin qadir olduğu tamamilə fərqli bir ekran verə bilərik. Saytın başlığının həmişə görünməsi üçün sabit mövqe də təyin edəcəyik.
Aşağıdakı bu CSS qaydalarından istifadə edərək, sürüşdürərkən başlığın özünün sahəsini azaltmaq, rəngini dəyişdirmək və əlbəttə ki, şrifti kiçik etmək istəyirik. Budur kodun özü.
Maye düzümü ilə bağlı əsas çətinlik yüksəkdən aşağıya doğru müxtəlif qətnamələrdə düzgün görüntünün təmin edilməsidir. Məzmun genişliyini 760 piksellə məhdudlaşdırdığımız üçün başlıq şəkli elə yerləşdirilməlidir ki, şəklin daha vacib hissəsi bu ölçüyə uyğun olsun. Şəkildə. 6.3 bunun necə ediləcəyini göstərir. 760px eni olan mərkəzi hissə tünd rənglə vurğulanır, A hərfi bərabər genişlikdə qalan fraqmentləri bildirir.
düyü. 6.3. Qapağın eni
Başlıqda şəkilin faktiki əlavə edilməsi elementin mərkəzinə uyğunlaşdırılmalı olan fon şəkli vasitəsilə həyata keçirilir.
Başlıq (ekran: blok; /* Köhnə brauzerlər üçün */ hündürlüyü: 405px; /* Başlığın hündürlüyü */ arxa plan: url(images/header-bg.png) təkrar olunmayan mərkəzin alt hissəsi; )
İdeal olaraq, şəkil 2000 piksel böyük bir eni olmalıdır, sonra demək olar ki, hər hansı bir monitor qətnaməsində şəkil pəncərəyə uyğun olmayan hər şeyi kəsərək mərkəzi hissəni göstərəcəkdir. Ancaq problem ondadır ki, əvvəlcə şəkil o qədər də geniş deyil və yanlara sonsuz uzanan qara zolaqlar çəkmək istəmirsiniz. Çözümlərdən biri üfüqi fonun təkrarlanmasını təmin etməkdir. 1280 piksel və ya daha az eni olanlar tək bir şəkil görəcəklər, geniş monitorların sahibləri isə eyni vaxtda bir neçə heyvana və batan günəşə heyran ola biləcəklər. Burada çertyojın birləşməsiz özü ilə üfüqi uyğunlaşması üçün redaktə etmək vacibdir (şək. 6.4). Aydınlıq üçün gradient gizlədilib.
düyü. 6.4. Şəklin üfüqi hizalanması
Bu şəkildə birləşmənin yeri ox və boşluqla göstərilir ki, oynaq görünsün. Fon şəklinin sağ və sol hissələrini düzgün redaktə etsəniz, o, bir davamlı naxış kimi görünən birləşmələr olmadan üfüqi şəkildə təkrarlanacaq. Təkrarlanmayan (təkrar yoxdur) dəyərini təkrar-x (üfüqi təkrar) ilə əvəz edərək üslubu bir az düzəltmək qalır.
Başlıq (ekran: blok; hündürlük: 405px; fon: url(şəkillər/başlıq-bg.png) təkrar-x mərkəzi alt; )
düyü. 6.5. Başlıq üçün fon şəkli
PNG-24 formatında fon ölçüsü 1325x405 piksel olan fayl təxminən 32 KB, gradientin keyfiyyətinin bir qədər pis olduğu 256 rəngli palitrası olan PNG-8-də isə təxminən 15 KB yer tutur. Siz fonu iki komponentə - gradient və şəkilə ayıra və hər bir şəkli öz formatında saxlaya bilərsiniz ki, bu da gradient ekranının keyfiyyətinin artmasına səbəb olmalıdır. Bununla belə, belə böyük bir şəkil üçün 32 KB çox deyil və bəziləri "matçlara qənaət" əlavə optimallaşdırmanı nəzərdən keçirəcəklər. Bununla belə, bəzi insanlar veb sayt başlığı yaratmaq üçün bu alternativ yanaşmanı faydalı hesab edə bilər və istəsəniz, onu atlaya bilərsiniz.
Başlığın optimallaşdırılmasıBaşlıqdakı qradiyent üfüqi şəkildə təkrarlandığı üçün o, düzəndən kəsilə və fon şəkli kimi təyin edilə bilər. Şəkildə. Şəkil 6.6-da bu məqsədlə hazırlanmış 405 piksel yüksək gradient göstərilir. PNG-24 formatı təsviri təhrif etmir və gradientləri yaxşı sıxışdırır (son həcm 402 baytdır), bu halda siz mütləq ondan istifadə etməlisiniz. Aydınlıq üçün şəklin ətrafına çərçivə əlavə olunub.
düyü. 6.6. Gradient rəsmi (header-gradient.png)
Siluet heyvanları olan bir şəkil şəffaf fonda və 198 piksel yüksəklikdə hazırlanır, onu başlığın bütün hündürlüyünə çatdırmağın mənası yoxdur, çünki o, yalnız bir hissəsini tutur. Şəklin bir parçası Şəkildə göstərilmişdir. 6.7. Dama taxtası şəffaflığı bildirir.
düyü. 6.7. Şəffaflıqla fon şəkli (header-animal.png)
Bu şəkil PNG-24 formatının 256 səviyyəsindən fərqli olaraq yalnız bir şəffaflıq səviyyəsinə malik olan PNG-8 formatında saxlandığı üçün gradient fonunda düzgün örtüyü təmin etmək vacibdir. Bunun üçün Photoshop-da yadda saxlayarkən siluetin üst-üstə qoyulduğu gradientin orta hissəsinə yaxın olan kənarların rəngini (Matte) təyin etməlisiniz. Bu təxminən #9de1f0 rəngidir. Bu vəziyyətdə, ağacların və heyvanların ətrafında çirkli konturlar olmayacaq və şəkil, gradientin üzərinə qoyulduqda, vahid bir bütöv olaraq qəbul ediləcəkdir.
Başlığın fonu üçün iki şəkil hazırlanır, HTML kodunu yazırıq.
Və başlıq-bg elementi və təbəqəsi üçün üslub.
Başlıq ( fon: #00b0d8 url(şəkillər/header-gradient.png) təkrar-x; ) .header-bg (fon: url(şəkillər/header-animal.png) təkrar-x mərkəzi aşağı; hündürlük: 405px; )
Nəticədə, faylın ölçüsü 12,5 KB oldu, bu gözləniləndən də azdır.
Saytın adıBaşlıq lələkli kənarları olan bulud üzərində yazılmışdır ki, bu da gradientə tətbiqi çətinləşdirməlidir. Onların ətrafında getməyin iki yolu var.
Aydındır ki, ikinci metodun bir sıra çatışmazlıqları var - şəkil hətta bir neçə piksellə də köçürülə bilməz, o, gradientə bağlıdır və onun gradienti dəyişdirilərsə, şəkil dəyişdirilməli olacaq. Beləliklə, başlığı PNG-24 formatında saxlayırıq. HTML kodu eyni qalacaq, lakin üslublar genişləndiriləcək.
Başlıq ( fon: #00b0d8 url(şəkillər/header-gradient.png) təkrar-x; ) .header-bg ( fon: url(şəkillər/header-animal.png) təkrar-x mərkəzi aşağı; hündürlük: 405px; /* Başlıq hündürlüyü */ text-align: center; /* Mərkəzə düzülmə */ ) .header-bg img (mövqe: nisbi; /* Nisbi yerləşdirmə */ yuxarı: 40px; /* Şəkli aşağı köçürün */ )
Mərkəzə düzülmə teqin əsas hissəsinə əlavə edilmiş mətnə uyğunluq xüsusiyyəti vasitəsilə həyata keçirilir , və yuxarı əmlak vasitəsilə aşağı sürüşdürün. Bu xüsusiyyətin işləməsi üçün nisbi dəyəri olan mövqe xüsusiyyətindən istifadə edərək şəkil üçün nisbi yerləşdirmə təyin etməlisiniz.
Saytın əsas səhifəsində başlıqlı şəkil həmişəki kimi göstərilir, digər səhifələrdə isə əsas səhifəyə keçid rolunu oynayır. Bunu etmək üçün kodu bir az dəyişdirin:
href atributunun /y dəyəri ana səhifəyə işarə edir və yerli olaraq deyil, yalnız veb serverdə işləyir.
Başlıq üçün son kod Nümunə 6.14-də göstərilmişdir.
Misal 6.14. Saytın başlığı
HTML5 CSS 2.1 IE Cr Op Sa Fx
Səhrada aslanı necə tutmaq olar? gövdə ( kənar: 0; ) başlıq ( displey: blok; fon: #00b0d8 url(şəkillər/başlıq-gradient.png) təkrar-x; /* Gradient */ ) .header-bg ( fon: url(şəkillər/başlıq- animal.png) təkrar-x mərkəzi alt; /* Heyvanlar */ hündürlüyü: 405px; /* Başlığın hündürlüyü */ mətni align: mərkəzə; /* Mərkəzə düzülmə */ ) .header-bg img (mövqe: nisbi; / * Nisbi yerləşdirmə */ yuxarı: 40px; /* Şəkli aşağı köçürün */ )
Çox vaxt sadə görünən layout tapşırıqları mürəkkəb HTML işarələmə strukturunu və CSS hiylələrinin istifadəsini tələb edir. Elementləri mərkəzləşdirmək və ya məzmunu hizalamaq çox yorucu ola bilər. Belə vəzifələrdən biri saytın yuxarısındakı elementləri loqonun solda, menyu elementlərinin isə sağda olması üçün uyğunlaşdırmaqdır. Siz float və position:absolute istifadə edə bilərsiniz və şaquli düzülmə üçün müxtəlif elementlərə kənar və dolgu əlavə edə bilərsiniz. Görünür, mürəkkəb bir şey yoxdur. Amma əgər sayt mobil cihazlarda düzgün göstərilməlidirsə, bir çox problemlər yaranır.
Aşağıda bu problemi həll etməyin qısa yolu var.
HTML işarələməsi mümkün qədər sadədir:
Super Pis İlk Linkİkinci LinkÜçüncü Link
Başlığın hündürlüyü sabitdir, əlavə edin mətni düzləşdirmək: əsaslandırmaq, uşaq elementlər üçün:
Başlıq (mətn hizalayın: əsaslandırın; hərf aralığı: 1px; hündürlük: 8em; doldurma: 2em 10%; fon: #2c3e50; rəng: #fff; )
Əlavə et ekran: inline-block bütün naviqasiya elementləri üçün bir-birinin yanında yerləşdirilə bilməsi üçün:
Başlıq h1, başlıq naviqasiyası (ekran: inline-block; )
Atribut etmək mətni düzləşdirmək: əsaslandırmaq istədiyimiz kimi işlədik, Jelmer de Maat tərəfindən inline-block istifadə edərək mükəmməl əsaslandırılmış CSS şəbəkə texnikası məqaləsində tapılan yalançı elementlərlə bir az hiylə işlətməliyik:
Başlıq::sonra (məzmun: ""; ekran: inline-blok; en: 100%; )
Nəticə istifadə etmədən üfüqi hizalama idi sal Və mövqe: mütləq. İndi elementləri şaquli olaraq hizalamalısınız. İstifadə şaquli düzləşdirmə naviqasiya elementləri üçün ana blokun hündürlüyündən asılılıq olacaq - başlıq. Və bu çox düzgün deyil. Vertikal align: yuxarı və şaquli align: jsbin-də ortadan istifadə nümunələri. Aşağıda şaquli hizalama üçün bəlkə də ən əlverişli üsuldur.
Yenidən psevdo elementlərdən istifadə edək. Michał Czernow tərəfindən qeyd olunan Naməlumda Mərkəzləşmə məqaləsindən bir nümunə istifadə edərək:
Başlıq h1 ( hündürlük: 100%; ) başlıq h1:: əvvəl ( məzmun: ""; ekran: inline-blok; şaquli hizalama: orta; hündürlük: 100%; )
Nəticə sizə lazım olan şeydir:
Həll etmək üçün iki problem qalır: başlıqda çox sayda mətn olduqda düzgün ekran və uyğunlaşma. Saytın başlığı çox uzun olarsa, tərtibat sürüşməyə başlayacaq:
Başlıqda psevdo-element hiyləsindən istifadə edək:
CSS kodu
başlıq (mətn hizalanması: əsaslandırma; hündürlük: 15em; doldurma: 2em 5%; fon: #2c3e50; rəng: #fff; ) başlıq::after (məzmun: ""; ekran: inline-blok; en: 100%; ) başlıq > div, başlıq naviqasiyası, başlıq div h1 (ekran: inline-block; şaquli hizalama: orta; ) başlıq > div (en: 50%; hündürlük: 100%; mətni hizalayın: sola; ) başlıq > div: :əvvəl (məzmun: ""; ekran: inline-blok; şaquli hizalama: orta; hündürlük: 100%; )
Daha yaxşı görünür:
İndi uyğunlaşmaya keçək. Bu problemi həll etməyin bir neçə yolu var, sadəcə başlığın hündürlüyünü təyin edə bilməzsiniz və bütün daxili elementlər hündürlüyə uyğunlaşacaqdır. Bunun üçün psevdo elementlərlə ikinci hiylə tələb olunmayacaq, jsbin-də canlı nümunə.
CSS kodu
başlıq (mətn hizalanması: əsaslandırma; doldurma: 2em 5%; fon: #2c3e50; rəng: #fff; ) başlıq::sonra (məzmun: ""; ekran: inline-blok; en: 100%; ) başlıq h1, başlıq naviqasiyası (ekran: inline-block; şaquli düzülmə: orta; ) başlıq h1 (en: 50%; mətni düzləndirmə: sol; padding-top: 0.5em; ) başlıq naviqasiyası (padding-top: 1em; )
Başlığın hündürlüyünü təyin etmək lazımdırsa, onda psevdo elementlərlə ikinci hiylədən istifadə etməli və müxtəlif ölçülü ekranlar üçün media sorğusu əlavə etməli olacaqsınız:
@media ekranı və (maksimum eni: 820px)( başlıq ( hündürlük: avtomatik; ) başlıq > div, başlıq >
Nəticə uyğunlaşır və mobil cihazlarda belə görünür:
Nümunədə aydınlıq üçün 820px istifadə olunur; canlı saytda, tələblərə uyğun olaraq, dəyər əlbəttə ki, fərqli olmalıdır. Internet Explorer 8-i dəstəkləmək üçün psevdo elementlər üçün “::” əvəzinə “:” istifadə etməlisiniz.
Son CSS kodu
@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * ( padding: 0; margin: 0; ) body ( fon: #1abc9c; font-family: "Lato", sans-serif; mətn-çevir: böyük hərf; hərflər arası: 1px;) başlıq (mətn hizalayın: əsaslandırın ; hündürlük: 8em; doldurma: 2em 5%; fon: #2c3e50; rəng: #fff; ) başlıq::sonra (məzmun: ""; ekran: inline-blok; en: 100%; ) başlıq > div, başlıq > div::əvvəl, başlıq naviqasiyası, başlıq > div h1 (ekran: inline-block; şaquli-align: orta; text-align: sola; ) header > div ( hündürlük: 100%; ) header > div::fore ( content : ""; hündürlük: 100%; ) başlıq > div h1 (şrift ölçüsü: 3em; şrift tərzi: kursiv; ) başlıq nav a (doldurma: 0 0.6em; boşluq: nowrap; ) başlıq nav a:son -child ( padding-right: 0; ) @media screen and (max-width: 720px)( header ( hündürlük: auto; ) header > div, header > div h1, header nav ( hündürlük: auto; width: auto; display) : blok; mətni hizalayın: mərkəz; ) )
Nəticə:
