Dekorasyon ul. Bir html sayfasındaki bir listenin görünümünü özelleştirmek için CSS kuralları. liste stili özelliği (tür, görüntü, konum)

Ul li( kenarlık: 2px düz #ff0000; )

Şimdi bakarsanız, resim işaretçiniz liste öğesinin dışında, yukarıda oluşturduğumuz çerçevenin aynısı. Bu nedenle, işaretçinin liste öğesinin içinde olmasını istediğiniz zamanlar vardır. Bunun için bir mülk var liste-tarzı-konumu başlangıçta ayarlanmış olan dışarıda , yani, işaretçileri öğenin dışında ayarlayın.

Bir öğenin içine bir işaretçi gömmek için değeri kullanın içeri . Şimdi bu özelliği ayarlarsanız içeri , işaretçi liste öğesinin içinde olacaktır ve kırmızı çerçeve bunu bize açıkça gösterir.

Ul( list-style-image: url(../images/Marker image title.jpg); list-style-position:inside; ) ul li( border: 2px solid #ff0000; )

Bu üç özellik bu şekilde çalışır. Tüm bu özellikleri birleştiren gösterimin kısaltılmış bir versiyonu da vardır.

Yani, mülk liste biçimi ve ardından, sırasıyla, işaretçi tipinin değerleri, işaretçinin konumu ve gerekirse, işaretçi olacak görüntüye giden yol. Ve elde ettiğimiz resim şu:

Ul( liste stili: url içinde(../images/Marker resim adı.jpg); )

Listelerin görünümü ile ilgili kuralların kısa bir versiyonu bu şekilde yazılır. Bu girdi, işaretçinin öğenin içinde olması gerektiğini ve işaretçinin aynı resim olacağını söylüyor.

Listelerde bu kadar, ancak listelerde biraz daha fazla zaman harcayın, ancak çeşitli işaretleyicilerin kurulumuyla kendinizi eğitin, her şeyin nasıl çalıştığına dair bir fikir edinin. AT demo işaretçiyi ayarlama seçenekleri gösterilecektir, burada karşılaştırma yaparak işinizin doğruluğunu kontrol edebilirsiniz.

CSS Listeleri- listelerin tasarımından sorumlu bir dizi özellik. Site gezinme çubukları oluşturulurken HTML listelerinin kullanımı çok yaygındır. Liste öğeleri, bir dizi blok öğesini temsil eder.

Standart CSS özelliklerini kullanarak şunları yapabilirsiniz: liste işaretçisinin görünümünü değiştir, işaretçi için resim ekle, birlikte işaretçi konumunu değiştir. İşaret bloğunun yüksekliği line-height özelliği ile ayarlanabilir.

CSS Stilleriyle Stil Listeleri Oluşturma

1. Liste işaretleyici türü liste stili türü

Özellik, işaretçi türünü değiştirir veya işaretçiyi kaldırır madde işaretli ve numaralı listeler için. Miras.

Sözdizimi

Ul (liste stili türü: yok;) ul (liste stili türü: kare;) ol (liste stili türü: yok;) ol (liste stili türü: alt alfa;)
Pirinç. 1. Madde işaretli ve numaralı listelerin tasarımına bir örnek

2. Liste stili görüntü öğeleri için görüntüler

Görüntüler ve degrade dolgular, liste öğesi işaretleri olarak kullanılabilir. Miras.

Sözdizimi

Ul (list-style-image: url("images/romb.png");) ul (list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F %50, #FFB214 %50);)
Pirinç. 2. Resimli Madde İşaretli Liste Tasarlama Pirinç. 3. Madde İşaretli Bir Listeyi Gradyan ile Şekillendirme

3. Liste işaretleyici konum listesi stili konumu

Bu özellik, işaretçiyi liste öğesinin içeriğinin dışına veya içine yerleştirme yeteneği sağlar. Miras.

Sözdizimi

Liste stili türü: daire | disk | kare | ermenice | ondalık | ondalık sayı-sıfır | gürcü | alt-alfa | aşağı yunan | alt latince | alt roma | üst alfa | üst latince | üst roma | Yok

gösterim

değerler

Değerler, madde işaretli veya numaralı bir listeye uygulanıp uygulanmadığına bağlıdır.

maddeli liste

numaralı liste

Kum havuzu

1. dört

ul (liste stili-türü: ondalık ; )

Örnek

1. Gaius Octavius ​​Thurinus
2. Tiberius Claudius Nero
3. Gaius Iulius Caesar Augustus Germanicus
4. Tiberius Claudius Drusus
5. Lucius Arruntius Camillus Scribonianus
6. Nero Claudius Sezar Drusus Germanicus
7. Lucius Clodius Macer

Bu örneğin sonucu Şekil 2'de gösterilmektedir. bir.

Pirinç. 1. Liste stili türü özelliğinin uygulanması

Nesne Modeli

Bir obje.style.listStyleType

Not

Numaralandırılmış bir liste kullanırken Internet Explorer 6'da

ve list-style-position özelliğinin içindeki değerler, 10'dan başlayan sayılar listenin metniyle örtüşmeye başlar.

7'ye kadar olan ve dahil olan Internet Explorer, ermenice , ondalık baştaki sıfır , gürcü , alt yunan , alt latin , üst latin 'i desteklemez. Bunun yerine, Arapça sayılarla numaralandırılırlar. Bu tarayıcıda, kayan öğeler için numaralandırma veya madde işaretleri görüntülenmez ( ul ( float: left; ) ).

Internet Explorer 8 ayrıca numaralandırmayı büyük Yunanca harflere (Α, Β, Γ, Δ,...) ayarlayan üst Yunanca değerini de anlar.

Şartname

Her spesifikasyon, birkaç onay aşamasından geçer.

• Tavsiye (Tavsiye) - spesifikasyon W3C tarafından onaylanmış ve standart olarak tavsiye edilmiştir.
• Aday Önerisi ( Olası öneri) - standarttan sorumlu grup, hedeflerine ulaştığından memnundur, ancak standardı uygulamak için geliştirme topluluğunun desteği gereklidir.
• Önerilen Öneri ( Önerilen öneri) - Bu aşamada belge nihai onay için W3C Danışma Kurulu'na sunulur.
• Çalışma Taslağı - Tartışma ve topluluk incelemesi için yapılan değişikliklerden sonra daha olgun bir taslak.
• Editörün taslağı ( içerik taslağı) proje editörleri tarafından değişiklikler yapıldıktan sonra standardın taslak versiyonudur.
• taslak ( Şartname taslağı) standardın ilk taslak versiyonudur.
×

tarayıcılar

yok, disk, daire, kare, ondalık, alt-alfa, üst-alfa, alt-roman, üst-roman	4	12	1	7	1	1
alt latin, üst latin, alt yunan, ermenice, gürcü	8	12	1	6	1	1
ondalık-başlık-sıfır	8	12	1	8	1	1

CSS size madde işaretli ve numaralı listeler oluşturma, resimli madde işaretleri stil listeleri oluşturma ve gerekirse madde işaretli liste atamalarını tamamen kaldırma yeteneği verir.

CSS stilleri listesi işaretçisi.

liste-tarzı-tipi

liste stili türü: disk | daire | kare | ondalık | alt roma | üst roma | alt-alfa | üst alfa | Yok;

Anlam :

disk - içi dolu daire şeklinde madde işaretli liste

daire - doldurulmamış bir daire şeklinde madde işaretli bir liste

kare - doldurulmuş kare şeklinde madde işaretli bir liste

ondalık - Arapça sayılar (1,2,3, vb.)

üst romen - büyük Romen rakamlarıyla numaralandırılmış liste (I,II,III,IV, vb.)

alt romen - küçük Romen rakamlarıyla numaralandırılmış liste (i,ii,iii,iv, vb.)

üst alfa - büyük harflerle numaralandırılmış liste (A,B,C, vb.)

alt-alfa - küçük harflerle numaralandırılmış liste (a,b,c, vb.)

yok - işaret yok.

Örnek :

• En iyisine inan, en kötüsünü bekle.
• Hayat bir hastalıktır, ölümcüldür.
• Asla asla Deme.




Sonuç :

İşaretçinin listedeki görüntüsünün kaldırılması gereken durumlar vardır. Bunu yapmak için CSS kodunu yazın

liste stili türü: Yok;

Örnek :

• En iyisine inan, en kötüsünü bekle.
• Asla asla Deme.




Sonuç :



Listedeki normal işaretleri kendi resimlerinizle değiştirebilirsiniz. Bu, list-style-image özelliği ile yapılabilir.

liste-tarzı-görüntü

liste-tarzı-görüntü: url(resim.png);

Örnek :

• En iyisine inan, en kötüsünü bekle.
• Hayat ölümcül bir hastalıktır.
• Asla asla Deme.




Sonuç :



Madde işaretli listeye metinden bir mesafe de verebilirsiniz. Bu, li seçici için padding-left özelliği kullanılarak yapılabilir.

Örnek :

• En iyisine inan, en kötüsünü bekle.
• Hayat ölümcül bir hastalıktır.
• Asla asla Deme.




Sonuç :



Bir sonraki görev, işaretçinin rengini değiştirmek, ancak metnin rengini değiştirmemektir. Bu nasıl yapılabilir? Teste bir etiket eklenerek işaretçinin rengi değiştirilebilir .
Şuna benziyor:

1. Metin

Örnek :

• En iyisine inan, en kötüsünü bekle.
• Hayat ölümcül bir hastalıktır.
• Asla asla Deme.




Sonuç :



Genel temaya ek olarak.
Herhangi bir nedenle, işaretçi listesinin numaralandırmasını sıfırdan değil, örneğin 8'den ayarlamanız gerekiyorsa, böyle bir hamle yapabilirsiniz.

Örnek :

• En iyisine inan, en kötüsünü bekle.
• Hayat ölümcül bir hastalıktır Madde 2
• Asla asla deme Madde 3
• Tek bildiğim buydu. 4. madde




Sonuç :



Konu burada son buluyor.

Temmuz 1999'da posta listelerindeki insanları stil sayfalarının güzelliği hakkında eğittiğimi hatırlıyorum. O zamandan beri, çok az şey değişti.

Ancak, bir şey değişti. Stiller için bir çerçeve görevi gören CSS ve (X)HTML hakkındaki görüşümü değiştirdim. Örneğin, çoğu sayfanın bir gezinme çubuğu içerdiğini buldum. Çoğu zaman, etiketlerle ayrılmış bağlantılarla basit bir metin dizesi olarak biçimlendirilir.

veya
Yapısal olarak, bunlar bağlantı listeleridir ve bu nedenle bu şekilde biçimlendirilmelidirler.
Bunları liste olarak biçimlendirmememizin nedeni, menüdeki her bağlantıdan önce bir işaretçi görmek istemememizdir. Daha önce CSS kullanan bazı sayfa düzeni tekniklerinden bahsetmiştim. Bu numaralardan birinde, listeleri dikey olarak değil, bir satırda nasıl görüntüleyeceğimizi öğrendik.
Bu yazıda, CSS ile bu hantal listeleri nasıl evcilleştirebileceğinizi göstereceğim. Web sayfalarınızda dolaşmasını durdurun. Ona nasıl davranacağını emretme vaktin geldi.
Arenanın Hazırlanması
Eğitim konusu olarak basit sırasız listeler seçtim. Burada bahsedilen tüm CSS kuralları aynı sonucu veren numaralandırılmış listelere uygulanabilir. Tüm örneklerde (aksi belirtilmedikçe) aşağıdaki liste kullanılmıştır:
• Madde 1
• 2. öğe
• madde 3
• 4. madde
• 5. madde, bir sonraki satıra geçebilmesi için bu maddeyi biraz daha uzun yap
Her liste basitçe ayrı bir öğenin içine yerleştirilir.
, ve listenin davranışı bu DIV kullanılarak tanımlanır. Tüm DIV'ler için geçerli olan temel kural şudur:
Herhangi bir ek stil kuralı olmadan, temel DIV'deki liste şöyle görünür:
konumlandırma
Bazen varsayılan liste girintisi tasarımınız için çok büyük olabilir. Ancak bir öğenin yalnızca kenar boşluğunu veya dolgu özelliğini değiştirmek
tüm tarayıcılarda çalışmaz. Listenin tamamen sola, diyelim ki hareket etmesi için hem kenar boşluğu hem de dolgu özelliklerini değiştirmeniz gerekiyor. Bunun nedeni, Internet Explorer ve Opera'nın sol kenar boşluğunu kullanarak listenin sol girintisini oluşturması ve Mozilla / Netscape'in bunun için sol dolguyu kullanmasıdır.

Aşağıdaki örnekte, UL öğesinin margin-left ve padding-left özellikleri 0'a ayarlanmıştır:



İşaretçilerin DIV'nin sınırının dışında olduğunu unutmayın. Kap bir DIV değil de bir belge olsaydı, işaretçiler tarayıcı penceresinin dışında olurdu, yani. gözden kaybolacaktı. Kenar boşluklarının DIV'nin kenarlıkları içinde, sol kenarı boyunca uzanmasını istiyorsanız, left-padding özelliğini veya left-margin özelliğini "1em" olarak ayarlayın.



işaretçiler

Diyelim ki özel işaretçileri olan bir listeye ihtiyacınız var. Daha önce nasıl yaptın? Bir tablo oluşturduk, işaretçinin gif görüntüsünü bir sütuna yerleştirdik ve hücrede yukarı ve sağa kaydırdık. Başka bir sütuna, öğelerde olması gereken metin yerleştirildi

• . CSS artık bir görüntüyü işaretleyici olarak kullanmanıza izin veriyor. Tarayıcı bu CSS özelliğini desteklemiyorsa (veya grafik oluşturmayı desteklemiyorsa), varsayılan işaretçi (veya bu konuda belirttiğiniz her şey) kullanılacaktır.

  Stil kuralı şöyle görünür:

  ul ( liste-stil-resim: url(bullet.gif); )

  Ve tarayıcı listeyi şu şekilde gösterecektir:

  

  Grafikleri desteklemeyen tarayıcılar için kurallara aşağıdaki satırı ekleyin:

  liste stili türü: disk;

  İşaretçi olarak seçtiğiniz resim listeden "sürünebilir". Bunun olmasını önlemek için görüntüyü bloğun içine yerleştirin

• . Bunu yapmak için aşağıdaki satırı ekleyin:

  liste-stil-konumu: içeride;

  Üç bildirimin tümü tek bir kısa kuralda birleştirilebilir:

  ul ( liste stili: disk url(bullet.gif) içeride; )

  hangi eşdeğerdir

  ul ( liste-stil-tipi: disk; liste-tarzı-görüntü: url(bullet.gif); liste-stil-pozisyonu: içeride; )

  Ortaya çıkan liste şöyle görünecektir:

  

  Bir listeniz olabilir, ancak madde işaretlerine ihtiyacınız yok veya madde işareti olarak başka bir karakter kullanmak istiyorsunuz. Bir kez daha CSS kurtarmaya geliyor. Kural listesi stilini ekleyin: yok; ve elemanları yapmak

• "sarkan". Tüm kural şöyle görünecek:

  ul ( liste stili: yok; sol kenar boşluğu: 0; sol doldurma: 1em; metin girintisi: -1em; )

  Sol doldurma özelliği veya sol kenar boşluğu özelliği 0 değerine sahip olmalı ve diğerinin değeri 1em olmalıdır. Bu özelliği değiştirerek, işaretleyicinizdeki dolgu miktarını kabul edilebilir bir boyuta ayarlayabilirsiniz. text-indent özelliğindeki negatif bir değer, her liste öğesinin ilk satırının sola girintili olmasına ve metnin geri kalanının "taşmasına" neden olur.

  Bir sonraki listemiz normal olacak, işaretleyici olarak yalnızca standart bir HML karakteri kullanılacak, örneğin kapanış tipografik tırnak işaretine karşılık gelen "": ".

  

  Burada, Netscape6/7/Mozilla'nın (ve Gecko tarayıcılarının diğer türevlerinin) ve Opera'nın, CSS2 standardındaki :before sözde öğesini kullanarak içerik oluşturabileceği belirtilmelidir. Bu işlevi kullanalım ve otomatik olarak " karakterini veya başka bir karakteri işaretçi olarak oluşturalım. Bu şekilde, her bir LI elemanına manuel olarak girmek zorunda değiliz. Opera tarayıcısını veya Gecko tarayıcı ailesini kullanıyorsanız, aşağıdaki CSS, listeye hiçbir şey eklemeden öncekiyle aynı listeyi oluşturacaktır.

  #custom-gen ul li:before (içerik: "0BB 020"; )

  Content özelliği, bir metin dizesine, bir URL'ye veya özel karakterler dahil olmak üzere başka bir şeye ayarlanabilir. "" gibi bir karakter seçtiyseniz, özellikte bu karakterin onaltılık kodunu belirtmelisiniz. Doğru tipografik alıntı, 0BB koduna sahiptir (diğer karakter 020, estetik nedenlerle eklenen bir boşluktur). Sonuç aşağıda gösterilmiştir (Opera veya Mozilla/Netscape tarayıcısı ile görüntüleyin):

  

  Listeyi sıralayın

  Listelerin dikey olarak gitmesi ve işaretçilerle solda biçimlendirilmesi gerektiğini kim söyledi? Örneğin, numaralandırılmış bir bağlantı listesine ihtiyacınız var, ancak görsel olarak bu listenin sayfada dikey bir gezinme çubuğu gibi görünmesini istiyorsunuz. Veya bağlantıların sayfanın üst kısmında yatay olarak çalışmasını istediğinizi varsayalım.

  Bu sadece bağlantı listesi için geçerli değildir. Bir paragraf içinde birden çok kez listelemeniz gerekebilir (örneğin, bir kitap listesi). Yapısal olarak bu bir liste ama bunu daha önce yapmış olsaydınız bu liste paragrafınızı bozardı. CSS yine kurtarmaya geliyor!

  Bu liste sayfada tek başına durmayacağı için önceki listeler gibi bir temel DIV'e koymayacağım. Bu sefer işaretleme şöyle görünecek: paragraf, liste, sonraki paragraf.

  Çığlıkları şimdiden duyabiliyorum: “Aptal! Bize listeleri iki paragraf arasına koymak yerine paragraf içine koymayı öğreteceğini düşündük."

  Ve buna cevap vereceğim: “Evet, haklısın. Maalesef (X)HTML, listelerin bir paragrafın içine yerleştirilmesine izin vermez. Ancak, stiller ile yapabilecekleriniz burada."

  İlk olarak, işte stil kuralları:

  #inline-list ( border: 1px solid #000; margin: 2em; genişlik: %80; padding: 5px; font-family: Verdana, sans-serif; ) #inline-list p ( display: inline; ) #inline- list ul, #inline-list li ( görüntü: satır içi; kenar boşluğu: 0; dolgu: 0; renk: #339; yazı tipi ağırlığı: kalın; )

  Tüm kodlar yerleştirilir

  . Bir paragrafı, ardından standart bir UL listesi ve ardından başka bir paragrafı vardır. UL listesi, her öğeden sonra bir virgül ve son öğeden sonra bir nokta içerecek şekilde düzenlenmiştir.

  Sonuç şöyle görünür (liste mavi renkle vurgulanmıştır):

  

  Yukarıdaki işaretleyici örneğinde olduğu gibi, CSS kullanarak otomatik olarak virgül ve nokta oluşturabiliriz. Ziyaretçileriniz yalnızca Opera ve Gecko tarayıcılarını kullanıyorsa, endişelenmenize gerek yok. Stil kuralları şöyle görünecek:

  #inline-list-gen ul li:after ( content: ", "; ) #inline-list-gen ul li.last:after ( içerik: ". "; )

  Burada her liste öğesinin sonuna virgül eklemek için :after sözde öğesini kullanıyoruz ve nokta koymak için class="last" sınıfını kullanıyoruz. Sonuç şöyle olacaktır (unutmayın, sadece Opera veya Mozilla/Netscape'de çalışır):

  

  Navigasyon

  Her sitede gördüğümüz linkler menüsünün en başında söylediğim gibi, aslında oldukları gibi listeler şeklinde formatlanmalıdırlar. Bu listeyi tarayıcının varsayılan olarak oluşturduğu şekilde görmek istemediğimizden, bazı kozmetik değişiklikler yapmak için CSS'yi kullanacağız. Listelerin yalnızca dikey olarak değil (varsayılan olarak görüntülendiği gibi) özellikle yatay olarak (tek satırda) görüntülenebileceğini zaten biliyoruz. Stillerin yardımıyla, işaretçiler kaldırılabilir ve bir liste öğesini diğerinden görsel olarak nasıl ayıracağınız konusunda elinizde çok çeşitli olasılıklar belirir.

  Aşağıda, aşağıdaki kurallarla aynı temel DIV'ye yerleştirilmiş yatay liste örnekleri verilmiştir.

  Aşağıdaki iki örnek, yalnızca son paragraftaki uzun metin olmadan aynı UL'yi kullanır. Listedeki LI'lerden biriyle ayrı ayrı çalışmanıza izin veren ek bir sınıf da eklendi.

  Sınırlar

  Sembol | genellikle farklı seçeneklere atıfta bulunmak için kullanılır. Menüde kullanılması doğaldır. Bu sembolü LI'deki sınırların yardımıyla simüle edelim.

  #pipe ul (sol kenar boşluğu: 0; doldurma solu: 0; görüntü: satır içi; ) #pipe ul li (sol kenar boşluğu: 0; dolgu: 3px 15px; kenarlık-sol: 1px katı #000; liste stili: yok; görüntüleme: satır içi; ) #pipe ul li.first (sol kenar boşluğu: 0; kenarlık solu: yok; liste stili: yok; ekran: satır içi; )

  Kurallar, listenin yer imleri gibi görünmesi için değiştirilebilir:

  #tabs ul ( margin-sol: 0; padding-left: 0; görüntüleme: satır içi; ) #tabs ul li (sol kenar boşluğu: 0; kenar boşluğu: 0; dolgu: 2px 15px 5px; kenarlık: 1px katı #000 ; liste stili: yok; görüntü: satır içi; ) #tabs ul li.here ( border-bottom: 1px katı #ffc; liste stili: yok; ekran: satır içi; )

  Not: Bu numara Randal Rust tarafından önerildi ve daha sonra css-discuss e-posta listesi üyeleri tarafından geliştirildi.

  zincir bağlantıları

  Bir web sayfasında genellikle yatay olarak yer alan diğer bir bağlantı türü, hepimizin bildiği zincir bağlantılardır (ekmek kırıntısı bağlantıları). Bu bağlantılar size şu anda site hiyerarşisinde nerede olduğunuzu gösterir - ana sayfadan mevcut bölüm veya sayfaya kadar. Sayfa kodunuzu gerçekten anlamsal olarak doğru yapmak istiyorsanız, her bölüm bir önceki bölümün parçası olduğundan, bu tür bağlantı bir dizi iç içe liste olarak biçimlendirilmelidir:

  • Ev
    • " Ürün:% s
      • » Bilgisayarlar
        • " Yazılım

  sonuç olarak şunu elde ederiz:

  

  Aşağıdaki kuralları uygulayarak:

  #bread ( color: #ccc; background-color: #006; padding: 3px; margin-bottom: 25px; ) #bread ul ( margin-sol: 0; padding-left: 0; görüntü: satır içi; kenarlık: yok; ) #bread ul li (sol kenar boşluğu: 0; sol doldurma: 2 piksel; kenarlık: yok; liste stili: yok; ekran: satır içi; )

  şunu elde ederiz:

  Yine, """ karakteri (veya başka herhangi bir uygun karakter), ilk LI öğesinin bu karaktere sahip olmaması için class="first" sınıfıyla birlikte :before sözde öğesi kullanılarak otomatik olarak oluşturulabilir.

  #bread-gen ul li:before ( içerik: "020 020 020 0BB 020"; color: #ff9; ) #bread-gen ul li.first:before ( içerik: " "; )

  Son sonuç:

  gerçeklik dünyası

  Yukarıdaki numarayı kullanan gerçek bir örnekle yazımı sonlandıracağım. Bağlantıları olan standart bir UL listesi alacağız ve yuvarlanma efektleriyle dinamik bir menü oluşturacağız. Yuvarlanma efektini oluşturmak için, A öğelerine görsel stiller uygulanacak ve UL ve LI öğeleri yalnızca yapısal bir çerçeve görevi görecek.

  

  Bu menü aslında Michael Efford tarafından css-discuss e-posta listesinde sorulan bir sorunun cevabıdır. Michael tabloları, grafikleri ve JavaScript'i kullanarak tamamen aynı menüyü yarattı. Daha sonra posta listesinde aynı şeyin CSS ile sağlanıp sağlanamayacağını sordu.

  • Ev
  • Gizli Kameralar
  • CCTV kameraları
  • Çalışan Hırsızlığı
  • Yardımcı ipuçları
  • SSS
  • Hakkımızda
  • Bize Ulaşın

  Stil sayfasını kuralına göre parçalayalım ve her birinin ne için olduğunu açıklayacağım.

  #button (genişlik: 12em; kenar-sağ: 1px katı #000; dolgu: 0 0 1em 0; kenar-alt: 1em; yazı tipi ailesi: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Cenevre, Helvetica , Arial, sans-serif; arka plan rengi: #90bade; renk: #333; )

  İlk kural #button DIV içindir. Menünün ne kadar yer kaplayacağını belirtir ve bağlantıların ve liste öğelerinin davranışını kontrol edebilmemiz için bir bağlam oluşturur. Menüyü esnek ve tarayıcı ayarlarına bağlı hale getirmeyi tercih ettim, bu yüzden (neredeyse) tüm değerler "ems" olarak verildi. Menü genişliği dahil. Siyah bordür Michael'ın orijinal tasarımından alınmıştır. Menüdeki büyük alt dolgu, DIV'nin arka planını görmeniz içindir. Yine, bu orijinal tasarımı kopyalamak için yapıldı. Alt kenar boşluğu (kenar boşluğu), menüyü takip edenlerden ayırmak için kullanılır. Tüm renkler orijinal tasarımdan alınmıştır.

  #button ul ( liste stili: yok; kenar boşluğu: 0; dolgu: 0; kenarlık: yok; ) #button li ( border-bottom: 1px solid #90bade; margin: 0; )

  Burada listenin nasıl görünmesi gerektiğini tanımladım. Tüm liste öğeleri bağlantı olduğundan ve şimdiye kadar yalnızca bağlantıların yuvarlanma etkisi olduğundan, tüm stil kurallarını bilerek listelerden kaldırdım. #button DIV'nin arka plan rengiyle eşleşen bir piksel genişliğinde bir kenarlık ekledim. Bu kenarlık, menü öğeleri arasında bir ayırıcı görevi görür. Orijinal tasarımda bunun için ayrı bir görsel kullanılmıştır.

  
  
  
  

  İlgili Makaleler

  Disk çıkıntısı nedir ve boyutu makine performansını nasıl etkiler Disk çıkıntısı neyi etkiler?

  Ford Explorer için lastikler ve jantlar, Ford Explorer için jant boyutu

  Ford Explorer için lastikler ve jantlar, Ford Explorer için jant boyutu Ne lastik basıncı

  Delme diskleri bmw e60

  En son Microsoft Word güncellemelerini yükleme

  Tablet açıyor ama önyükleme yapmıyor
En son makaleler
• 

  2022-05-06 20:52:29

  Bir bilgisayarın çalışmasını kontrol eden ve bir kişi ile bilgisayar arasında etkileşimi sağlayan bir yazılım paketi mi?
• 

  2022-05-06 20:52:29

  Mac'e pencereler nasıl yüklenir?
• 

  2022-05-06 20:52:29

  Windows'ta Hyper-V: Sanal makineler oluşturma ve yapılandırma kılavuzu Windows'ta hyper v'yi etkinleştirme

Popüler Makaleler
• 

  Bir dizüstü bilgisayarda Skype'ı nasıl geri yükleyeceğimizi düşünüyoruz

• 

  Fixies masters tam sürüm Fixies oyunu tam sürüm bilgisayarınıza indir

• 

  Net framework 3 hatalarını yükleme veya güncelleme, düzeltme

• 

  Dünyadaki sanal para birimleri ve sanal borsalar

• 

  Altın Numaralar Güzel bir telefon numarası nasıl satılır
Editörün Seçimi
• 2022-04-17 04:35:26
  Kripto para madenciliği: basit kelimelerle nedir

  Merhaba arkadaşlar, bu yazıda, bu arada, bu sitede madencilikle ilgili ilk (makale sürekli güncellenmektedir), madenciliğe nasıl başlayacağınızdan bahsedeceğiz ...

• 2022-04-17 04:35:26
  En iyi dizüstü bilgisayar işletim sistemi: Eksiksiz inceleme

  1.5 / 5 ( 39 oy ) Çoğu netbook alıcıya işletim sistemi kurulu olarak sunulur. Bu dizüstü bilgisayar kullanıma hazır...

• 2022-04-07 02:16:41
  Sınıf arkadaşlarından müzik indirmek için programlar Sosyal ağ sınıf arkadaşlarından üzücü bir şarkı indirin

  Bugün, her birimizin herhangi bir sosyal ağda kendi sayfası var. Şaşırtıcı bir şekilde, internet üzerinden iletişim ziyaretçilerin tek arzusu değil...

• 2022-04-07 02:16:41
  Yandex tarayıcısının mobil versiyonu

  EKRAN GÖRÜNTÜLERİ Yandex Tarayıcı Google Chrome'dan daha mı iyi? Yandex.Browser, bir Android mobil cihaz için çok uygun bir tarayıcıdır. İndirmenizi tavsiye ederiz...

• 2022-04-07 02:16:41
  Rakip alternatif uygulamalar

  Android için profesyonel spor simülatörü Athletics 2, dünya standartlarında sporcu olmaya hazırlanan kendine güvenen gençler için oluşturuldu....