girişElma tarzında html. DAHA AZ CSS: Elma Stili Menüleri
Gelecekteki siteyle ilgili isteklerini açıklayan birçok müşteri, kendilerini kısaca ifade ediyor: “Apple tarzında bir şey istiyoruz!”. Onlara göre, böyle bir cevap, sanatçıya kapsamlı bilgi vermeli, hemen "i" yi işaretlemeli ve herhangi bir belirsizliği ortadan kaldırmalıdır. Ama gerçekte, elbette, her şey daha karmaşık. Sonuçta, her şey bir kişiyi Apple tarzında etkileyebilir - yeni bir tabletin sunumu, basit bir beyaz iPhone kutusu veya Apple web sitesinin kendisi. Ve en rahatsız edici şey, büyük olasılıkla, “Apple tarzında yap” demek, müşterinin kendisi bunun gerçekten ne anlama geldiğini bilmiyor. Belki de sonunda kendisinden ne beklendiğini bilmeyen mutsuz bir oyuncuya ne dersiniz?
Hadi anlamaya çalışalım!
elma prensibi
Apple'ın yaklaşımı çok basit bir prensibe dayanmaktadır - tüm çalışma alanlarını üstlenmeden gerçekten yüksek kaliteli bir ürün yapamazsınız. Her şey en üst düzeyde yapılmalıdır. Yeni bir telefon piyasaya sürüldüğünde, parlak gövdesinde çatlaklar titreşiyorsa ve devasa bir reklam panosundaki reklam sloganı hatalarla yazılmışsa, olağanüstü ekranının kalitesi ve düşük fiyatı beklenemez.
“Eh, metin yazarlığından tasarruf ettik - metin satmıyoruz, telefon satıyoruz” diye düşünecek çoğunluk.
Ama hepsi bu! Apple'ın bakış açısından, ürünlerine sahip olma deneyimi, herhangi bir iPod için zor kazanılan parayı yatırmadan önce ortaya çıkıyor ve bu nedenle bu zincirde önemsiz unsurlar yok. Bu sadece teknoloji değil, sadece paketleme değil, aynı zamanda reklam ve vitrin, bir web sitesi ve sitedeki metinler. Burada küçük unsurlar yoktur. Ve "ambalajın kendisi bütün bir hikayeyi anlatabilir." Buna göre, "Apple stili" hakkında anlaşılması gereken ilk şey, tüm çalışma alanlarına titizlikle dikkat etmektir.
Apple ürünlerinin ikinci önemli özelliği şık sadeliktir. Apple'da çok önemli bir rol oynuyor.
“Neden sadeliğin iyi olduğunu düşünüyoruz? Çünkü nesnelerle uğraşırken onları yönettiğimizi hissetmek bizim için önemli."
Üçüncü kritik özellik detaylardır. Fark etmediğiniz, ancak Apple ürünlerini kullanırken günlük rahatlığı yaratan tüm o küçük şeyler - geçiş animasyonları, sesler, ses seviyesini ayarlarken duyduğunuz tıklama, sayfada kaydırdığınız yumuşaklık hissi ve daha fazlası , daha fazla.
Ama şimdiye kadar anlattığım her şey ürünlerle ilgiliydi. Orijinal örneğimizde, bir web sitesi oluşturmaktan bahsediyorduk. Bu yaklaşımları web tasarımına nasıl uygularsınız? Bu soruyu cevaplamak için Apple web sitesine bir göz atalım ve hangi stilistik hileleri kullandığını anlamaya çalışalım.
Yaklaşımlar
Fotoğraflar ve çizimler
Apple'ın web sitesini ziyaret ettiğinizde gözünüze ilk çarpan şey, yüksek kaliteli ürün fotoğrafları oluyor. Gerçekte, bu fotoğrafların, uzatılmış "Vay canına!" deme işinin yarısını yaptığına inanıyorum. ziyaretçide. Hepsi büyük, parlak, aynı tarzda yapılmış ve tüm detayları görmenizi sağlıyor.
Fotoğrafların büyüsü. Bazıları bunun “köşeleri yuvarlatılmış normal bir blok” olduğunu söylüyor, ancak bu tür fotoğraflarda takdire şayan.
havadarlık ve saflık
Bir sonraki öğe hafiflik olacak - sayfadaki tüm öğeler çok rahat ve özgür, içerik alanının beyaz arka planı hafiflik hissi veriyor. Ve böylece tüm sayfanın parçalandığı izlenimi olmaz - hafif çerçeveli açık gri bir arka plan tarafından toplanır.
yazı tipleri
Apple, başlıklar için yalnızca iki Adobe Myriad yazı tipi ve standart macOS X yazı tipi Lucida Grande kullanır. Her iki yazı tipi de sade ve modern serif yazı tipleridir ve yalnızca genel bir minimalist stili korur. Açıkçası, yüksek kalite arzusu burada da mevcuttur - sitedeki büyük başlıkların her koşulda güzel görünmesini sağlama arzusundan dolayı, Apple metinler için değil resim yazıları için resimler kullanır.
Steve Jobs ayrıca saygılı tutumunu Apple'daki yazı tiplerine borçludur - üniversiteden ayrıldıktan sonra, hat dersleri de dahil olmak üzere çeşitli kurslara katıldı.
Yuvarlatılmış köşeler
Ayrıca sitede ünlü (onlar olmadan ne kadar!) Yuvarlak köşeler var. Kelimenin tam anlamıyla her yerdeler! Dürüst olmak gerekirse - bazen iPhone'un yalnızca yuvarlatılmış köşeleri kullanma geleneğini sürdürmek için icat edildiği görülüyor.
Yuvarlatılmış köşeler her yerdedir - telefon kılıfında, uygulama simgelerinde ve hatta Ana Sayfa düğmesinde.
Etkileri
Bir sonraki öğe aynı zamanda ünlü Aqua lens parlaması ve gradyan efektleridir. Son zamanlarda, sitedeki sayıları belirgin şekilde azaldı. Genellikle belirli bir unsuru vurgulamak için kullanılırlar.
Apple web sitesindeki ana menü. Ünlü Aqua stiline bir övgü - Scott Forstall'ın istifasından sonra, minimalizm giderek daha fazla skeomorfizm ve karamel efektlerine hükmediyor.
İçerik
Apple, sitenin içeriğine, metnine ve sunumuna daha az dikkat etmedi. İlginç bir özellik, bu sitedeki ana ürünler olduğu için birçok kişi tarafından çok sevilen "Şirket Hakkında" bölümünün olmaması olarak düşünülebilir.
Modern efektler
Site, gitgide daha sık olarak, animasyon veya diğer benzer efektleri kullanmaya başlıyor - dinamikler ekliyorlar, yeni bir ışık altında avantajlar gösteriyorlar veya bazı bölümlerin nasıl çalıştığını anlamaya yardımcı oluyorlar.
Ve hepsi bu mu?
Açıkçası, bu yaklaşım ayrım gözetmeksizin tüm siteler için kullanılamaz. Tanıtım veya tanıtım sitelerinde yer alan kişidir. Ve en önemlisi, yalnızca görsel yönergelerle yönlendirilen stili tekrar edemezsiniz. Web sitesi, yaratılmasının her aşaması sevgi ve fikirlerle üst düzeyde gerçekleştirilmesi gereken eksiksiz, eksiksiz bir üründür.
Adımlardan sadece birinin geliştirilmemesi, "Apple stilinin" kırılgan büyüsünü anında yok edecektir.
Yukarıda açıklanan teknikleri kullanmak güzel, düzenli ve modern bir tasarım yapmanıza yardımcı olacaktır, ancak sizi yaratıcı metinlerin geri kalanından - yetkin metinler yazmak ve bunları doğru miktarlarda kullanmak, video sunumları ve yüksek kaliteli fotoğraflar oluşturmak - kurtarmaz.
Apple kültü kimseyi kayıtsız bırakmaz ve bununla yüzleşin, Apple'ın popülaritesinin arkasındaki en önemli faktörlerden biri benzersiz tasarımıdır. Apple tarafından California'da tasarlanan tasarımcıların ürünlerine sanat gibi davrandıklarını açıkça göstermektedir.
Cupertino, California - 16 Kasım'da Apple, "Designed by Apple in California" başlıklı yeni bir ciltli kitabın yayınlandığını duyurdu. iMac'ten (1998) Apple Pencil'a (2015) kadar, yirmi yıllık tasarım yeniliği, geçmiş ve güncel ürünlerin 450 fotoğrafında yakalanıyor. Kitap 8 yıl boyunca oluşturuldu ve Steve Jobs'un anısına ithaf edildi.
Jony Ive, "İnsanlık için önemli bir şey yaratma fikri Steve'i en başından beri motive etti, bu düşünce bizim idealimiz ve Apple'ın geleceğe taşınmasındaki hedefimiz" diyor.
"Designed by Apple in California", birçok tasarım ekibi ve tamamen farklı alanlardan profesyoneller arasındaki yakın işbirliğinin sonucudur. Hepsi, kitabın insanlara Apple ürünlerinin nasıl ve neden yaratıldığına ve var olduğuna dair bir anlayış vereceği umudunu paylaşıyor. Tüm fotoğraflar Andrew Zuckerman tarafından "kasten mütevazı bir tarz" olarak tanımladığı bir teknikle çekildi. Resimler, tasarım sürecinin ayrıntılarını ve bitmiş ürünlerin kendilerini göstermektedir.
Bu tasarım hakkında bir kitap ama tasarımcıların kendileri, yaratıcı süreç veya ürün geliştirme ile ilgili değil. Apple'ın tasarımının stilini, imajını ve ideolojisini nesnel olarak yansıtır. Pek çok ürün o kadar net, basit ve mantıklı görünüyor ki makul bir alternatifleri yok. Her cihaz için, yapıldığı cihazın tasarımı bile düşünülür.
"Tasarımcılar olarak gelecekte yaşıyoruz, yaptıklarımızı seviyoruz ve henüz yapmadıklarımıza takıntılıyız."
"20 yılı aşkın süredir birlikte çalışarak öğrendiğimiz en önemli şeylerden biri, birbirimizi dinleme ihtiyacıdır, çünkü en parlak fikirler genellikle çok, çok alçak sesle konuşanlar tarafından verilir."
Apple tarafından California'da tasarlanan iki formatta sınırlı sayıda bir kitaptır: 199 $ için küçük (25,9 x 32,4 cm) ve 299 $ için büyük (33 x 40,6 cm). Kenarları mat gümüş kaplama özel renkte özel yapım kağıda baskı yapılmaktadır. Amerika Birleşik Devletleri, Avustralya, Birleşik Krallık, Almanya, Hong Kong, Kore, Fransa, Japonya ve Tayvan'da yalnızca Apple.com'da ve belirli Apple Mağazalarında satılır.
Küçük ama havalı bir şirketin mutlu sahibisiniz. Hâlâ zafere ulaşmak için uzun bir yol, ancak zaman içinde işinizin bir gurur kaynağı ve izlenecek bir örnek olacağından şüpheniz yok. Bu arada, bu anı beklemenize gerek yok: Kendinizi şu anda birinci sınıf bir profesyonel olarak konumlandırabilir, büyük ve ciddi bir şirket gibi ikna edici hale getirebilirsiniz.
Böyle bir sitenin nasıl olması gerektiğinden emin değil misiniz? Merak etmeyin, şimdi her şeyi açıklayacağız ve size nasıl devam edeceğinizi söyleyeceğiz. Tavsiyemize uyarsanız, artık Apple, Nike veya L'Oreal'a iç çekmek zorunda kalmayacaksınız çünkü sizinki de aynı derecede iyi olacak. İşte sağlam, profesyonel bir web sitesi oluşturmak için bazı yönergeler.
Web tasarım trendlerini takip edin
Büyük markalar sitelerini sürekli olarak güncelliyor ve iyileştiriyor. Deneyimli tasarımcı ve geliştiricilerden oluşan ekipler, insanlarda merak uyandıran ve her şeye iyi bakma arzusu uyandıran sıra dışı ve modern bir kaynak yaratmak için çalışıyor.
Evet çok pahalı ama Wix gibi ücretsiz seçenekler var. Editörümüz, her tür aktivite için güzel bir site oluşturabilmeniz ve buna, örneğin paralaks kaydırma veya arka plan olarak video gibi bazı moda efektler ekleyebilmeniz için özel olarak oluşturulmuştur. Gerçek bir "uzun" sayfa yapabilir ve onu "düz" tasarım öğeleriyle tamamlayabilirsiniz *.
Bu aşamada tasarımcılar için sitelerde dolaşmanın ve iyi bir ilham almanın size zarar vermeyeceğini düşünüyoruz. Önerilerimiz: dergi Web İlhamı, Blog Lopart ve tasarım dergisi Görev Odası; İngilizce sizin için bir engel değilse, okuyun Vandelay Tasarım , Smashing Dergisi ve Web Tasarım Deposu .
* Tüm bu kelimelerin ne anlama geldiğini anlamıyor musunuz? Bu yüzden bizimkini okumalısınız.
Markalaşmaya başlayın
Büyük şirketler, tanınabilir bir kurumsal kimliğe ve çok net bir konumlandırmaya sahiptir. İyi tanımlanmış yazı tipleri, renkler ve sloganlar kullanırlar. İster web sitesinde, ister şişelerde ya da cadde üzerindeki reklam panolarında olsun, kırmızı Coca-Cola logosunu hemen tanıyacaksınız.
Peki ya şirketiniz Coca-Cola kadar büyük değilse? Bu, markalaşma yapmanız gerekmediği anlamına gelmez. İyi düşünülmüş bir kurumsal kimlik önemlidir. Bu sayede insanlar ürününüzü hızlı bir şekilde tanımlayabilecekler ve satın almak için zaten bir taş atımı var. Bu nedenle güzel bir logo çizin, bir slogan bulun, markalı yazı tiplerini, renkleri seçin ve sosyal medya sayfalarını buna göre düzenleyin. Daha fazla ipucu için makalemize bakın.
Daha az
Ürününüz ve işletmeniz hakkında detaylı bir şekilde anlatmak istediğinizi anlıyoruz ancak siteyi aşırı yüklemenizi ve ziyaretçilerinizi yormanızı tavsiye etmiyoruz. Site çok kötü yükleniyor, okunması zor ve ziyaretçileri itiyor. En iyi, iyinin düşmanıdır, bu yüzden zamanında nasıl duracağını öğrenmelisin.
Sitenizden nelerin kaldırılabileceğini düşünelim. Metinler teknik ve mesleki terimlerle doluysa, onlardan kurtulun. Ziyaretçilerinizin tüm çalışanlarınızın ayrıntılı biyografisini gerçekten bilmesi gerektiğini düşünüyor musunuz? Olası olmayan. Bazı şeyler elbette kısaltılamaz, örneğin malların veya hizmetlerin ayrıntılı bir açıklaması, ancak bu normaldir, bu bilgi yararlıdır. Kesinlikle fark edilmeyeceği bir yere taşımaya bile değer. Satın alma sürecini yavaşlatan her şey en ufak bir pişmanlık duymadan kaldırılabilir.
Şimdi tasarıma bakalım. Renk sayısını üç veya dörde düşürün, gereksiz görüntüleri kaldırın ve tipografiye dikkat edin. "Hava" olarak da bilinen bol miktarda boş alan bırakmayı unutmayın. Sitede çok fazla "hava" olduğunda, insanlar örneğin ziyaretçileri satın almaya, kaydolmaya, kaydolmaya vb. teşvik etmek için gerekli tüm kritik unsurları fark eder.
Ürünü ana sayfada göster
Sipariş sayısını artırmak ister misiniz? Bu nedenle, insanların ürününüzü hemen gördüğünden emin olun. Ünlü markaların web sitelerine bakın. Görüyorsunuz, ürünleri sadece alışveriş sayfasına değil, ana sayfaya da yerleştiriyorlar, böylece insanlar onları mutlaka fark etsinler. Varsa ve satışları nasıl artıracağınızı düşünüyorsanız - bu tekniği kopyalamaktan çekinmeyin.
Elbette ürün fotoğrafları büyük ve çok kaliteli olmalıdır. Unutmayın ki bu hiçbir şeye dokunulmadığı veya ölçülmediği bir online mağazadır, bu yüzden insanlar resme bakarak satın alma kararı verirler. Profesyonel bir fotoğrafçı için paranız yoksa başlıklı yazımızı okuyun. Biraz pratik yapın ve başaracaksınız! Editörümüzün yeteneklerini de unutmayın, siteye bir uygulama ekleyebilirsiniz, böylece müşteri ilgilenilen şeyin görüntüsünü büyütebilir ve ona iyi bakabilir.
İyi navigasyon yapın
Kendinizi kötü düşünülmüş bir sitede bulduğunuzu ve istediğiniz sayfayı aramak için kafa karışıklığı içinde dolaştığınızı düşünüyoruz. Kural olarak, bu tür yerlerden elimiz boş ve bir daha geri dönmeme arzusuyla ayrılırız. Ve tüm hata, kötü tasarlanmış navigasyondur. Bu hatayı tekrarlamayın ve ziyaretçinin ilk saniyeden itibaren net olduğundan emin olun.
Sürekli aynı soru soruluyorsa, sık sorulan soruların cevaplarını içeren bir sayfa oluşturun. Uygulamayı kullanabilirsiniz Wix SSS... Artı, insanların ihtiyaç duydukları bilgileri almaları ve aynı zamanda başka şeylerden rahatsız olmamanızdır.
Şirketinizin duyarlı ve arkadaş canlısı olduğunu göstermek ister misiniz? Uygulamayı ekle " Tidio Canlı Sohbet»Soruları gerçek zamanlı olarak yanıtlamak için. Akıllı telefonunuza yükleyebilir ve tüm gün bilgisayar başında oturamazsınız, ancak aynı zamanda işinize devam edebilir ve iletişim halinde olabilirsiniz.
İnsanların size güvendiğini gösterin
İletişimde olmaya ve soruları zamanında yanıtlamaya çalışmanız iyidir, ancak bu müşterilerinizle güven oluşturmak için yeterli değildir. Bunu yapmak için sitede tekrar çalışmanız gerekir. Şirketin geçmişi ile ayrı bir bölüm oluşturun, bize kim olduğunuzu, neye inandığınızı ve neyi önemli gördüğünüzü anlatın. Çok fazla bilgi işe yaramaz: metin kısa, samimi ve anlaşılır olmalıdır. İnternette nasıl bir insan olduğunuzu göstermek oldukça zor ama böyle bir sayfanın işini mükemmel yapacağını düşünüyoruz.
Ayrıca siteye müşteri incelemeleri eklemenizi öneririz - ana sayfada veya ayrı bir bölümde. Bunları okuduktan sonra insanlar ürününüzün güvenilir olduğunu bileceklerdir. Bu arada, Yandex ve Google da incelemelere dikkat ediyor, bu da etkiledikleri anlamına geliyor.
Sitenin mobil versiyonunu yapın
İnternet kullanıcılarının yarısından fazlası tabletlerden ve akıllı telefonlardan çevrimiçi oluyor. Bu, sitenin mobil versiyonunun bir heves değil, bir zorunluluk olduğu anlamına gelir. Neyse ki, bunu nasıl yapacağınızı düşünmenize gerek yok. Wix Düzenleyicide mobil versiyon otomatik olarak oluşturulur, test etmeniz ve ince ayar yapmanız yeterlidir. Mobil sürümün masaüstünün tam bir kopyası olmadığını unutmayın, bu nedenle gereksiz tüm öğeleri kaldırın ve düğmeleri ve kişileri görünür hale getirin.
Sosyal medyayı unutmayın
Daha yaşlı ve daha deneyimli iş arkadaşlarının sosyal medya sayfalarını nasıl yönettiğine dikkat edin. Evet, hedef kitlenin daha eksiksiz bir şekilde kapsanması için hem bir web sitesine hem de Facebook, Vkontakte, Instagram vb. Sayfalara ihtiyacınız var. Sosyal medya, haber göndermek, bir ürün hakkında yazmak ve soruları yanıtlamak için idealdir. Sadece iş hakkında konuşmak değil, aynı zamanda bir imaj oluşturmak ve normal, güvene dayalı ilişkiler kurmak da önemlidir. Ne yapacağınızdan gerçekten emin değilseniz, makaleyi okuyun ve tüm önerilerimize uyun.
Belirli bir sitede bir sayfa başlattıktan sonra, site ziyaretçilerinize bundan bahsedin. Üst bilgi, alt bilgi veya kişiler bölümünüze sosyal medya düğmeleri ekleyin. Ayrıca uygulamayı eklemenizi öneririz - ücretsizdir ve büyük şirketler bunu isteyerek kullanır. Yardımıyla sitenizden on hesaba kadar yönetebilirsiniz: haberleri yayınlayın, yorumları zamanında yanıtlayın ve müşterileri hız, kusursuzluk ve profesyonellikle şaşırtın.
Büyük markaların saflarına katılmaya hazır mısınız? Wix'te kendiniz - kolay ve ücretsiz!
Apple tarzı web tasarımı, 1996'dan başlayarak yıllar içinde gelişti ve gelişti. Adından da anlaşılacağı gibi, tasarım fikri Apple şirketine aittir: bu, web sitesinin ve ürün arayüzlerinin tarzıdır. Apple tarzı web sitesi tasarımı, minimalizmi ve kullanıcının dikkatini belirli bir ürüne odaklaması nedeniyle geniş bir popülerlik kazanmıştır.
Apple tarzı web sitesi tasarımının tipik özellikleri
- Elementlerin bileşiminde katı hiyerarşi. Ana öncelik ürün görselidir. Yüksek kaliteli, net, büyük, sayfanın ortasına yerleştirilmiş ve beyaz boşlukla çevrili bir fotoğraf. Minimalizmin en iyi geleneklerinde.
- Renk paleti genellikle üç tondan oluşur: siyah, beyaz, gri. Aynı zamanda, düz stilin aksine, degradeler, gölgeler ve hacmi aktarma yöntemleri yaygın olarak kullanılmaktadır.
- Karakteristik yazı tipleri. Başlıkların stili Adobe Myriad, düz metin Lucida Grande tarafından yapılmıştır.
- İçerik. Sitenin ana sayfası minimum bilgi içerir. Ayrı sayfalarda ayrıntılı bir açıklama verilmiştir. Aşırı doyma etkisi yoktur. Kullanıcı, kendisini ilgilendiren bilgileri kendisi seçer.
- Teknik özellikler. Apple tasarımı, modern tasarım standartlarını kullanarak HTML 5 formatına odaklanmıştır. Resmi Apple web sitesi prensipte Flash kullanmaz.
Hangi siteler için uygundur?
Apple stili, bir ürün veya hizmeti sunmanın mükemmel yoludur. Bu tarz genellikle çevrimiçi mağazaların, her tür ürüne ayrılmış tanıtım sitelerinin tasarımında kullanılır: eğitim kurslarından gayrimenkul satışına kadar. Apple tarzı tasarım, yazılım web siteleri için şöyle görünür:- Jumsoft http://www.jumsoft.com/money/
- Versionsapp https://versionsapp.com/
Merhaba sevgili okuyucular a! Web tasarımı ve web geliştirme çok hızlı gelişiyor. Her gün, çevrimiçi yaşamımızı daha üretken ve kullanışlı hale getiren uygulamalar veya yeni hizmetler olsun, giderek daha fazla yeni ürün görüyoruz. Ve web tasarımı, yalnızca "sanatçının" (tasarımcının) yetenek ve becerileriyle sınırlı, sınırsız bir alandır. O zaman bugün hakkında konuşalım AZ CSS stilleri yazmayı basitleştirecek dinamik bir stil biçimlendirme dilidir.
DAHA AZ nedir?
LESS bir CSS eklentisidir. Bu, herhangi bir CSS kodunun geçerli LESS olduğu, ancak ek LESS öğelerinin basit CSS kodunda çalışmadığı anlamına gelir. Bu harika, çünkü mevcut CSS, yeni teknolojiye girme eşiğini düşüren, halihazırda uygulanabilir LESS kodudur.
LESS, dosyaya birçok kullanışlı dinamik özellik ekler. Değişkenleri, işlemleri, öğeleri ve karışımları tanıtır. Stil sayfalarını modüler olarak yazabilme özelliği sizi birçok güçlükten kurtarır. 
LESS, yazma stillerini çok daha kolay hale getirir. Örneğin, karışımları kullanarak, argüman alabilen işlevler gibi bir şey yaratırız. karışımlar- özelliklerden birinin değeri olarak sınıf adını ekleyerek bir sınıfın tüm özelliklerini başka bir sınıfa dahil etmenize izin verir.
1 | Yuvarlatılmış köşeler (@yarıçap: 5px) ( |
Ve derlenmiş CSS şöyle görünecek:
1 | #başlık ( |
Prefix-free.js kitaplığını indirin ve index.html'ye bağlayın:
< script src= "prefix-free.js" type= "text/javascript" > |
Bu, hazırlığı tamamlar ve doğrudan Apple.com tarzında bir menü oluşturmaya devam eder.
HTML işaretlemesi
Menü işaretlemesi oldukça basittir. Menü, sırasız bir liste temelinde yapılır. HTML düzenleyiciyi açın ve aşağıdaki kodu yapıştırın:
1 |
DAHA AZ stiller
Bu bölümde menü kodunu LESS dilinde yazmaya başlayacağız. LESS'in hem yazımında hem de söz diziminde programlamaya yeni başlayanlar için endişelenmeyin, netleştirmek için her şeyi raflara koymaya çalışacağım. Belki birileri bile site için bu tarz yazım tarzını sevecektir, çünkü gerçekten daha üretkendir.
Menünün hangi bileşenlerden oluşacağına bakalım: 
Yukarıdaki ekran görüntüsünde gördüğümüz gibi, Apple.com navigasyonu aşağıdaki 6 ana bölümden oluşmaktadır:
- Bir gölge kullanılır;
- Sınır;
- Menü öğeleri arasında ayırıcı;
- Arka plan için gradyan;
- Fareyle üzerine gelindiğinde karartma efekti;
- Menü metni.
Yazılı stilleri kullanmanın iki yolu vardır:
- çıtır çıtır
Önemli: ilk yöntemi kullanırken, böylece style.less, less.js kitaplığı bağlanmadan önce bağlanır! Ayrıca bağlanmayı hatırlamaya devam ediyor ön eksiz.
Böylece, stillerin bağlantısı şöyle görünür:
1 |
Şifre kurtarma
|