A legutóbbi cikkben megtettük keretünk HTML sablon, amely készen áll a kitöltésre és a regisztrációra. Ma elmondom hogyan készítsünk gyönyörű weboldal fejlécet(felső rész) és egy egyszerű menü. Ma más blokkok stílusát is módosítjuk.
Tehát miben vagyunk Ebben a pillanatban? Most a következő stílusaink vannak:
Fix szélességet állítottam be - a blokk szélessége, 1024 pixel méretű, magát a blokkot középre igazítottam, a benne lévő szöveget pedig balra a text-align: left segítségével. A blokkot középre igazíthatjuk a margóstílus használatával, a felső és alsó margót 0-ra, a szélességet auto-ra állítva. Sajnos ez nem mindig működik internet böngésző 6, tehát a törzsbe beírtam text-align: center; és ezért kellett balra igazítanom a szöveget a burkolóblokkban és a láblécben. A törzsben megadtam a margin:0-t is, ezzel 0 pixelre állítottam a margókat az élektől. Ennek eredményeként a Body a következő stílusokat választotta:
Itt minden hasonló a burkolóblokkhoz: állítsa a szélességet 1024 képpontra, igazítsa a blokkot középre, és igazítsa a szöveget balra. A tárolóhoz hozzáadtam a margin-top elemet is: margin-top: 20px; és eltávolítottuk a minimális szélességet, mivel fix burkolószélességünk van.
Nos, elkészítettük a sablont, ideje továbbmenni a webhely fejlécére. A stílusok a következők lesznek:
A blokk magassága 140 képpont, a háttér fehér, a margó a felső széltől 40 képpont. Ez az összes változás a fejlécstílusokban. Mit? Ez mind? És erről van egy egész cikk elnevezve? Természetesen nem. Az oldal fejléce további elemekből fog állni: egy logóból és egy menüből, amelyeket külön tervezünk.
Regisztráljunk HTML sablon kód A fejléc blokkjában ez a sor található: Ez lényegében egy link kezdőlap szöveg nélkül, de hozzá van rendelve a class="logo". Most css stílusokban kell stílusoznia.
Elkészítettem az elemblokkot, megadtam neki a szélességet és a magasságot, valamint készítettem egy logóképet is háttérnek, amit betettem a képkönyvtárba. Az összes sablonkép ebben a könyvtárban található. A kép mérete 388*100 pixel, akkor miért tér el egy kicsit a blokk mérete? A magasságot 104 pixelre tettem úgy, hogy a leendő menü és az embléma között alul az embléma képétől egy hely maradjon, a szélességet pedig minden esetre két képponttal nagyobbra vettem, mivel párszor találkoztam azzal, hogy a Mozilla rosszul határozta meg a méretét, és egy kicsit levágta. Ennyi, elkészültünk a logóval. Menü be
A szerzőtől:Üdvözöljük a weboldalkészítéssel foglalkozó blogunkon. Bármely webhely rendelkezik valamivel, ami általában emlékezetessé teszi, és kiemelkedik a többi közül. Általában ez a webhely fejléce. A CSS lehetővé teszi, hogy a kívánt módon készítse el.
Weboldal fejléce – milyen
Elképesztő, hogy ma mennyire múlhat pusztán egy webes erőforrás kialakításán. De mi különbözteti meg különösen a webes erőforrásokat a többitől? Általában ez a webhely fejléce vállalati logóval és egyedi tervezéssel. Általában így emlékeznek az emberek valamilyen internetes projektre. Ez nagyon jól emlékezik az emberek emlékezetében.
Például, ha egy fehér „B” betűt lát kék alapon, valószínűleg azonnal arra a következtetésre jut, hogy ez egy ikon közösségi háló Kapcsolatban áll. A postagalamb képét pedig mindenki azonnal a Twitterre asszociálja. Mindez azért vált lehetségessé, mert ezeken az oldalakon pont ilyen képek voltak a fejlécekben, és az emberek nagyon jól emlékeztek rájuk.
Oké, ez egy kicsit elgondolkodtató volt, most térjünk közvetlenül a technikai részre.
Hogyan tervezhetsz webhelyfejlécet CSS-ben?
Általában a kalapok különbözőek. Szélességük alapján két csoportra oszthatók: a középre igazítottra, illetve a weboldal teljes szélességén átívelőkre.
Korábban a fejléc ugyanúgy készült, mint bármely más blokk - a szokásos div tag volt megadva szükséges azonosító, ami után minden szükséges tartalom beleesett, majd formalizálódott az egész. Manapság már megszokott a másfajta betűtípus. Kifejezetten a webhely fejlécének létrehozásához HTML5-ben jelent meg páros címke- fejléc Használata javasolt, lehetővé teszi a böngészők számára, hogy megértsék, mi a sablon ezen része, és mit csinál. Egyébként, ha szeretnéd megtanulni a HTML5 alapjait, akkor közvetlen út áll a miénkhez, ahol megtekintheted a technológiáról szóló leckéket.
Ezért egy egyszerű fejléc létrehozásához írja be a következő kódot html-ben:
<
header
>
<
/
header
>
Természetesen még semmi nem fog megjelenni az oldalon – még hozzá kell tennünk tartalmat, meg kell terveznünk. De csináljunk például egy olyan blokkot, ami a képernyő teljes szélességén átível, és díszítsük is egy kicsit.
Általánosságban elmondható, hogy ha mindent jól csináltunk, akkor a blokknak valamilyen osztályt vagy akár azonosítót kell adni (hiszen ez a weboldal fontos eleme), de egyelőre egyszerűen csak címkénként hivatkozunk az elemre.
A szélesség: 100% tulajdonság lehetővé teszi, hogy a blokkunk a képernyő méretétől függetlenül a teljes szélességre nyúljon. Ha azonban a méreteket valamilyen módon korlátozni kell, használjuk a további max-width tulajdonságot, ahol az abszolút méret pixelben van írva, ami elérésekor a konténer már nem tágul.
Most már csak egy csík van előttünk, a választott színre festve. Általában a magasság nincs megadva – a fejlécben szereplő elemek alapján automatikusan meghatározásra kerül.
<
div
id
=
"wrap"
>
<
header
>
<
/
header
>
<
/
div
>
Így az oldal teteje pontosan a központban lesz. Már csak be kell tölteni.
Rizs. 1. Egyelőre ez csak egy tároló, amely az összes tartalmat tartalmazza.
Mit tartalmaz általában egy kalap?
Általában a webhely logója, neve és leírása kerül oda. Lehetnek olyanok is Elérhetőség, oldalnavigáció vagy akár reklámozás.
A logót általában úgy helyezik be, mint háttérkép. Tegyük fel például ezt:
Ehhez csak adjon hozzá néhány szabályt a háttérhez:
háttér: #D8E3AB url(logo.png) ismétlés nélküli 5% 50%;
háttér: #D8E3AB url(logo.png) ismétlés nélküli 5% 50%;
Vagyis az egyszínűen kívül adunk egy háttérképet is (esetünkben logo.png), és először a stílusfájllal egy mappába teszem. Tiltjuk a logó megismétlését, és meghatározzuk a helyzetét a blokkban - kissé tolja el balra és függőlegesen középen.
Adjunk hozzá némi tartalmat a fejléchez. Például fejléc és menü.
Ma CSS stílusokat használva megtervezzük a meglévő fejléc elemeket: favicon, webhelynév cím, kulcskifejezés, és így bemutatjuk kinézet a weboldal fejléceit a tervezési elrendezésnek megfelelően.
Tekintettel arra, hogy a cél CSS stílusok tervezési elrendezésen kell alapulnia, akkor elég nagy figyelmet fordítanak a szükséges adatok grafikus szerkesztő segítségével történő megszerzésére.
A weboldal elrendezésének megfelelően a fejléc két fő részre oszlik. Az első az a terület, ahol a favicon, a webhely nevének címe és a kulcskifejezés található, amelyeket az elem egyesít
osztállyal "hdr-cím". A második rész az elem által alkotott menü
