01 ilə 06
CSS ilə sekmeli naviqasiya yaratmaq və şəkillər yox
Web səhifələrində naviqasiya bir siyahı formasıdır və sekmeli naviqasiya bir üfüqi siyahıdır. CSS ilə üfüqi sekmeli naviqasiya yaratmaq olduqca asandır, lakin CSS 3 onlara daha da gözəl baxmaq üçün bir neçə daha çox vasitə təqdim edir.
Bu tutorial bir CSS sekmeli menyu yaratmaq üçün lazım olan HTML və CSS vasitəsilə sizi aparacaq. Nasıl görüneceğini görmek üçün bu linki vurun.
Bu sekmeli menyu, heç bir şəkil , yalnız HTML və CSS 2 və CSS 3 istifadə edir. Daha çox sekmey əlavə etmək və ya mətnləri dəyişdirmək asanlıqla redaktə edilə bilər.
Brauzer dəstəyi
Bu nişan menyu bütün əsas brauzerlərdə işləyəcək. Internet explorer yuvarlaq küncləri göstərməyəcək, əksinə, Firefox, Safari, Opera və Chrome kimi seksiyaları göstərəcəkdir.
02-dən 06-dək
Menyu Listenizi yazın
Bütün naviqasiya menyusları və sekmeleri həqiqətən yalnız sıralanmamış bir siyahıdır. Beləliklə, istədiyiniz ilk şey, sekmeli naviqasiyanın getməyini istədiyi yerə aid birbaşa əlaqə siyahısı yazmaqdır.
Bu tutorial HTML-ni bir mətn redaktoru yazdığınızı və veb-səhifənizdə menyunu HTML yerləşdirməyi bildiyinizi fərz edir.
Aşağıdakı kimi qeyd olunmayan siyahısını yazın:
- class = "tablist">
- CSS 3
- id = "cari"> Sekmeler
- Üçün
- Menüler
Kod iki şeyi çağırır: class = "tablist" və id = "cari". Birinci tələb olunur . Nişanlar siyahısına tablist sinifini verməsəniz, sekmeler işləməyəcəkdir. İkincisi isteğe bağlıdır. Bu səhifəyə vurğulamaq istədiyiniz istənilən seksiyaya id = "cari" qoyun. Mən adətən istifadə etdiyim səhifəni vurğulamaq üçün istifadə edirəm, ancaq ən vacib nişanı vurğulamaq üçün istifadə edə bilərsiniz. Yoxsa tamamilə aradan qaldıra bilərsiniz.
03 ilə 06
Stil Çarşını Düzenlemeye Başlayın
Xarici stillərdən və ya daxili stillərdən istifadə edə bilərsiniz. Nümunə menyu səhifəsi, sənədin
Birincisi, UL özünü tərtib edəcəyik
Bu, siniflər siyahısından istifadə etdiyimiz yerdir. HTML-də. UL etiketinizi tərtib etməkdən başqa, səhifədəki bütün sıralanmamış siyahıları tərtib edəcək, yalnız UL sinifini tərtib etməlisiniz. tablist Belə ki, CSS-də ilk giriş olmalıdır:
.tablist {}Mən bitən kıvırcək brace (}) vaxtından əvvəl qoymaq istəyirəm, belə ki, sonra unutmaq deyil.
Nişanlar menyusu siyahısına görə sıradan bir siyahı etiketi istifadə edərkən, amma hər hansı bir mermi və ya ədəd sürüşməsini istəmirik. siyahısı tərzi: none; Bu, brauzerin bir siyahı olmasına baxmayaraq, əvvəlcədən müəyyən edilmiş üslubları olmayan (güllə və ya nömrələr kimi) bir siyahıdır.
Sonra, siyahınızın hündürlüyü doldurulmasını istədiyiniz yerə uyğunlaşdırmaq üçün təyin edə bilərsiniz. Mənim boyumum üçün 2em seçdim, çünki standart şriftin iki qatına bərabərdir və seksiyanın mətninin yuxarı və aşağı hissəsinə təxminən yarım em verir. boy: 2em; Amma istədiyiniz genişliyə genişliyini təyin edə bilərsiniz. UL etiketləri avtomatik olaraq genişliyin 100% -ni tutacaq, buna görə istənilən konteynerdən kiçik olmadıqda, genişliyi buraxa bilərsiniz.
Nəhayət, master stilinizdə UL və OL etiketləri üçün hazırlıqlar olmadıqda, onları yerləşdirmək istəyə bilərsiniz. Bu, UL-də sərhədləri, marginləri və paddingləri silməlisiniz. padding: 0; margin: 0; sərhəd: none; UL etiketini sıfırlamış olsanız, marjinləri, padding və ya sərhədinizi dizaynınızla uyğun olan bir şeyə dəyişə bilərsiniz.
Sonuncu .servis siyahısı belə olmalıdır:
.tablist {list-style: none; boy: 2em; padding: 0; margin: 0; sərhəd: none; }06 04
Lİ Siyahı Məhsullarını redaktə edin
Nəzarətsiz siyahınızı tərtib etdikdən sonra, onun içərisində Lİ etiketlərini tərtib etməliyik. Əks təqdirdə, standart bir siyahı kimi çıxış edəcək və hər bir sekməni düzgün yerləşdirmədən növbəti xəttə keçəcəklər.
Birincisi, stilinizin əmlakını qurun:
.tablist li {}Sonra tablarınıza yatırmaq üçün üfüqi düzəldilmək istənir. float: sol;
Nişanlar arasında bir neçə margin əlavə etməyi unutmayın, buna görə birləşməyin. margin-right: 0.13em;
Sizin li üslublarınız belə olmalıdır:
.tablist li {float: sol; margin-right: 0.13em; }05-dən 06-dək
Sekmelerin CSS ilə Tabs kimi görünməsi 3
Bu üslubda ağır qaldırmanın ən çoxunu etmək üçün, sıradışı siyahıdakı əlaqələri hədəf alıram. Brauzerlər, bağlantıların digər teqlərdən daha çox bir veb səhifəsində olduğunu bilirlər, belə ki, hover dövlətləri kimi şeyləri yerinə yetirmək üçün köhnə brauzerləri onları çapa etikete (bağlantılara) əlavə etmək daha asandır. İlk olaraq stilinizin xüsusiyyətlərini yazın:
.tablist li a {} .tablist li a: hover {}Bu sekmeler bir tətbiqdə nişanlar kimi hərəkət etməlidirlər, çünki sekmənin bütün sahəsi yalnız əlaqəli mətni deyil, tıklanabilir olmasını istəyir. Bunun üçün A etiketinin normal " inline " vəziyyətindən bir blok elementə çevrilməlidir. ekran: blok; (Fərq haqqında daha çox bilmək maraqlıysanız, Block-Level və Inline Elements-i oxuyun.)
Sonra, sekmelerinizi bir-birinizlə simmetrik olmağa məcbur etmək üçün asan bir yol olsa da, mətnin genişliyini uyğunlaşdırmaq üçün hələ də əyilmə sağ və sola dolu olanı etməkdir. Üst və altını 0 və sağa və sola 1em olaraq təyin etmək üçün padding stenoqrafiya əmlakını istifadə etdim. padding: 0 1em;
Mən də linki vurğulamaq istədim ki, sekmeler daha az əlaqələrə bənzəyir. Amma sizin auditoriyanız tərəfindən səhv olsanız, bu xəttini buraxın. link-bəzək: none;
Nişanlar ətrafında nazik bir sərhəd qoyaraq, onları sekmeler kimi görünür. Sərhədə dörd tərəfin sərhədinə sərhəd qoymaq üçün sərhəd stenoqrafiyasını və mülkiyyətini istifadə etdim: 0.06em solid # 000; Və sonra alt-dən alt aradan qaldırılması üçün sərhəd alt əmlak istifadə. sərhəd altlığı: 0;
Sonra sekmelerin yazı tipinə, rənginə və arxa fonuna bəzi düzəlişlər etdik. Bunları sitenize uyğun olan üslublara qoyun. font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; rəng: # 000; fon-rəng: #ccc;
Yuxarıdakı üslubların hamısı selektorda olmalıdır .Təblifi li, bir qayda olaraq onlar ümumiyyətlə çapa etiketlərə təsir göstərirlər. Daha sonra sekmeleri daha tıklanabilir görünmək üçün bir neçə dövlət qayda əlavə etməlisiniz .tablist li a: hover.
Siçan üzərinə siçan qoyarkən mətnin və fonun rəngini dəyişdirmək istəyirəm. fon: # 3cf; rəng: #fff;
Mən brauzerlər üçün linkin altı çəkilməməsini istəməyim üçün başqa bir öyüd-nəsihət əlavə etmişəm. mətn dekorasiyası: none; Başqa bir ümumi metod, siçanı üzərinə siçan vurduğunuzda altını geri çevirməkdir. Bunu etmək istəyirsinizsə, mətn dekorasiyasına dəyişdirin: vurğulayın;
Amma CSS 3 harada?
Diqqətinizi bildirirsinizsə, ehtimal ki, üslubda istifadə edilən CSS 3 üslubları olmayıb. Internet Explorer da daxil olmaqla hər hansı bir müasir brauzerdə işləmək üstünlüyünə malikdir. Lakin sekmeler kvadrat qutulardan daha çox bir şey kimi görünmür. Bir CSS 3 stil çağırışının sərhəd radiusunu (və bununla əlaqəli brauzerinizin xüsusi zəngləri) əlavə edərək, yuvarlaqlaşdırılan kənarları bir manila qovluğunda seksiyalara daha çox baxmaq üçün edə bilərsiniz.
.tablist li əlavə etməli olan üslublar aşağıdakılardır: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; sərhəd-yuxarı sağ radius: 0.50em; sərhəd-yuxarı sol radius: 0.50em;
Bunlar yazdığım son üslub qaydalarıdır:
.tablist li a {display: block; padding: 0 1em; mətn dekorasiyası: none; sərhəd: 0.06em solid # 000; sərhəd altlığı: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; rəng: # 000; fon-rəng: #ccc; / * CSS 3 elementləri * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; sərhəd-yuxarı sağ radius: 0.50em; sərhəd-yuxarı sol radius: 0.50em; } .tablist li a: hover {background: # 3cf; rəng: #fff; mətn dekorasiyası: none; }Bu üslublarla, bütün əsas brauzerlərdə işləyən və CSS 3 uyğun brauzerlərdə gözəl çap nişanı kimi görünən sekmeli menyu var. Sonrakı səhifə daha da geyinmək üçün istifadə edə biləcək bir seçimdir.
06-dan 06-a
Mövcud Sekişi işarələyin
Yaratdığım HTML-də UL-də bir ID elementi var idi. Bu, bir Lİ-nin qalan hissəsindən fərqli bir stil vermək üçün imkan verir. Ən ümumi vəziyyət, mövcud sekməni bir şəkildə ayırmaqdır. Bunu düşünməyin başqa bir yolu da canlı olmadığı sekmeleri geyməkdir. Sonra idin fərqli səhifələrdəki yerini dəyişirsiniz.
Hər ikisi də bir-birindən fərqlənir, belə ki #current A etiketini və #current A: hover sta tərzini tərtib edirəm. Rəngin, fon rəngini, hətta bu elementin hündürlüyü, genişliyi və paddingini dəyişə bilərsiniz. Hər hansı bir dəyişikliyin dizaynınızda mənalı olmasını təmin edin.
.tablist li # cari a {background-color: # 777; rəng: #fff; } .tablist li # cari a: hover {background: # 39C; }Və bitirdiniz! Veb saytınız üçün yeni bir sekmeli menyu yaradın.