ელემენტი თუ გსურთ ფონის სრული სიგანის ფერი: ჰორიზონტალური ნავიგაციის ზოლის მაგალითები შექმენით ძირითადი ჰორიზონტალური სანავიგაციო ზოლი მუქი ფონის ფერით და შეცვალეთ ბმულების ფონის ფერი, როდესაც მომხმარებელი გადააადგილებს მათ მაუსს:
მაგალითი Ul(
ლი (
ლი ა (
/* შეცვალეთ ბმულის ფერი #111-ზე (შავი) გადახვევაზე */
თავად სცადე" აქტიური/მიმდინარე ნავიგაციის ბმული დაამატეთ "აქტიური" კლასი მიმდინარე ბმულზე, რათა მომხმარებელმა იცოდეს რომელ გვერდზე იმყოფება:
დააწკაპუნეთ მარჯვენა ღილაკით ბმულების გასწორება
ამ გაკვეთილში ჩვენ შევქმნით საიტის ნავიგაციის სისტემას მხოლოდ CSS3-ის გამოყენებით. იდეა არის მრავალი სლაიდის ან შინაარსის ფენის ორგანიზება, რომლებიც ნაჩვენები და დამალული იქნება ფსევდოკლასი:target . CSS გადასვლების გამოყენებით შეგიძლიათ შექმნათ შესანიშნავი ვიზუალური ეფექტები სლაიდების გამოსაჩენად. ჩვენი ნავიგაცია ასევე ადაპტური იქნება.
შენიშვნა: გაკვეთილის შედეგი სრულად მუშაობს CSS3-ის მხარდაჭერილ ბრაუზერებში.
HTML მარკირება
თითოეული ინდივიდუალური სლაიდისთვის, რომელიც შეიცავს ბმულების ერთობლიობას, ან ინფორმაციას, ან სუბსლაიდს, ჩვენ შევქმნით div ელემენტს კლასთან ერთად cn-სლაიდი . სუბსლაიდებისთვის, რომლებიც შეიცავს ორ ბმულს სტრიქონზე, ჩვენ გამოვიყენებთ განსხვავებულ კლასს cn-slide-sub . საინფორმაციო სლაიდს უბრალოდ ექნება კლასი cn-სლაიდი .
ჩვენს მაგალითში იქნება ერთი მთავარი სლაიდი, რომელიც შეიცავს სამ სუბსლაიდს. თითოეული ქვესლაიდი შეიცავს ოთხ ბმულს, რომლებიც მიუთითებენ ინფორმაციის სლაიდზე. მთელი სტრუქტურა იქნება ერთი მთავარი სლაიდის, სამი სუბსლაიდის და თორმეტი სლაიდის კონსტრუქცია, რომელიც შეიცავს ინფორმაციას:
აღწერა
ფილოსოფიის სამეცნიერო ლიტერატურა
ფილოსოფია უკან ეპისტემოლოგია მეტაფიზიკა ესთეტიკა ეთიკა
ეპისტემოლოგია უკან
გეჭიროთ მარცხენა გასაღები ფონის სანახავად
მეტაფიზიკა
. . .
ესთეტიკა
. . .
ეთიკა
. . .
. . .
სუბსლაიდები და საინფორმაციო სლაიდები შეიცავს წინა ფენის ბმულებს.
CSS
მთავარ კონტეინერს აქვს min-width და max-width თვისებები, რაც საშუალებას გვაძლევს გამოვიყენოთ პროცენტები სიგანის დასაყენებლად, რაც უზრუნველყოფს, რომ ელემენტის ქსელი არ გახდეს ძალიან დიდი ან პატარა:
Cn-კონტეინერი (სიგანე: 60%; მინ-სიგანე: 300 პიქსელი; მაქსიმალური სიგანე: 820 პიქსელი; ზღვარი: 10 პიქსელი ავტო 0 ავტომატური; ტექსტის გასწორება: მარცხნივ; პოზიცია: შედარებითი; )
მთავარი სათაური განთავსდება აბსოლუტურად და ნაჩვენები იქნება ეფექტების გამოყენებით, როდესაც სლაიდი "გახსნილია". გადასვლები დაყენებულია დაგვიანებით ისე, რომ სათაური გამოჩნდეს ბმულის ბლოკების ჩვენების შემდეგ:
Cn-კონტეინერი h2( შრიფტი-ოჯახი: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif; შრიფტის ვარიანტი: small-caps; font-weight: 700; ფერი: #fff; პოზიცია: აბსოლუტური; z -ინდექსი: 0 1px rgba(255,255,0.8), 1px rgba(0,0,0,2 font-size: 200px; 0.3s წრფივი 0.4s; გაუმჭვირვალობა: 1 ;
სლაიდები ასევე განლაგებულია აბსოლუტურად. სლაიდების საწყისი გამჭვირვალობა დაყენებულია 0-ზე. ისინი ნაჩვენებია მხოლოდ მაშინ, როდესაც ისინი არიან სამიზნე:
Cn-slide( ტექსტის გასწორება: ცენტრში; პოზიცია: აბსოლუტური; მარცხნივ: -100%; padding-top: 80px; ზღვარი: 0 5%; სიგანე: 90%; გაუმჭვირვალობა: 0; -webkit-transition: მარცხენა 0.4s ხაზოვანი , გაუმჭვირვალობა 0,4წმ წრფივი; ; გადასვლა: მარცხნივ 0,4წმ წრფივი, გამჭვირვალობა 0,4წმ ხაზოვანი) .cn-slide:target(მარცხნივ: 0px; გამჭვირვალობა: 1;)
გთხოვთ, გადახედოთ სხვა დემო ფაილებს. ის იყენებს სხვადასხვა გადასვლის თანმიმდევრობას ვიზუალური ეფექტების შესაქმნელად.
ახლა მოდით შევხედოთ ბმულის ელემენტებს. მათ ექნებათ ერთი ფონის სურათი, რომელიც მოგვიანებით გადაიდება თითოეული ელემენტისთვის. ნაგულისხმევი ფაილია 1.jpg. როდესაც მაუსის ატარებთ ელემენტზე, ტექსტის ჩრდილის ფერი და თავად ბლოკი შეიცვლება:
Cn-slide nav a( ტექსტის გასწორება: მარცხნივ; ჩვენება: ბლოკი; შრიფტი-ოჯახი: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif; შრიფტის ვარიანტი: small-caps; შრიფტის წონა: 700 ;; (0,0,0,0.1 ფონი: #fff url(../images/1.jpg) no-repeat center center -webkit-background-size: 100%; ფონური კლიპი: padding-box: all 0.3s ease-in-out: all 0.3s ease-in-out; -in-out; 1px rgba(0,0,0,0.1 ფერი: rgba(255,255,255,0.9);
Cn-slide-sub nav a (სიგანე: 42%; ეკრანი: inline-block; შრიფტის ზომა: 40px; )
ელემენტებს შორის მცირე უფსკრულის შესაქმნელად, დააყენეთ სწორი ზღვარი კენტი ბავშვებისთვის:
Cn-slide-sub nav a:nth-child(კენტი)( ზღვარი მარჯვნივ: 5px; )
ინფორმაციის სლაიდი არის გადასვლების ბოლო წერტილი:
Cn-content(ფონი: #80B8CE url(../images/1.jpg) განმეორებითი ცენტრის ცენტრი; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover-size: padding: 20px 5px box-shadow: 1px rgba(0,0,0,0.1);
თითოეული შინაარსის სფერო შეესაბამება ბმულის ბლოკს. ფონის სურათი მოგვიანებით დაყენდება:
პარაგრაფს ასევე ექნება გადასვლები. :active pseudo-class-ის გამოყენებით, მომხმარებელს საშუალებას ვაძლევთ, მაუსის მარცხენა ღილაკზე დაჭერით დაათვალიეროს ფონი.
Cn-შიგთავსი:აქტიური p( გამჭვირვალობა: 0; ) .cn-კონტენტი p( ხაზის სიმაღლე: 24 პიქსელი; ტექსტი-ჩრდილი: 1პx 1პx 1px rgba(255,255,255,0.9); ფერი: rgba(103,59,77,09) padding: 15px 20px: rgba(255,255,0.96); ხაზოვანი; -მომხმარებლის შერჩევა: არცერთი;
დაბრუნების ისარი სრიალებს მარცხნივ. თავდაპირველად მას აქვს -100px პოზიცია, ხოლო როდესაც სლაიდი გააქტიურებულია, ის გადადის 3px პოზიციაზე:
Cn-back( მონახაზი: არცერთი; ტექსტის შეწევა: -9000 პიქსელი; სიგანე: 49 პიქსელი; სიმაღლე: 42 პიქსელი; ფონი: გამჭვირვალე url (../images/arrow.png) ცენტრის განმეორების გარეშე; პოზიცია: აბსოლუტური; ზედა: 22 პიქსელი მარცხნივ: -100px: 0.4s ease-in-out; out 0,5s;
ახლა მოდით განვსაზღვროთ ფონის სურათი თითოეული ბმულის ელემენტისთვის. მოსახერხებელი ატრიბუტის სელექტორის დახმარებით ჩვენ შეგვიძლია მივუთითოთ კონკრეტული ელემენტი. ჩვენ ვუყურებთ href ატრიბუტის მნიშვნელობას და განვსაზღვრავთ სურათს:
/* ძირითადი პუნქტები */ .cn-slide nav a( background-image: url(../images/1.jpg); ) .cn-slide nav a( background-image: url(../images/2. jpg); 1- 1 .cn-content ( background-image: url(../images/4.jpg); ) .cn-slide nav a, #slide-1-2 .cn-content ( background-image: url(. ./ images/5.jpg ) .cn-slide nav a, #slide-1-3 .cn-content (back-image: url(../images/6.jpg); ) .cn-slide nav. a, #slide-1-4 .cn-content ( background-image: url(../images/7.jpg); ) /* პუნქტები და ქვეპუნქტები სლაიდისთვის 2*/ .cn-slide nav a, # slide-2- 1 .cn-content ( background-image: url(../images/8.jpg); ) .cn-slide nav a, #slide-2-2 .cn-content ( background-image: url (../ images/9.jpg ) .cn-slide nav a, #slide-2-3 .cn-content ( background-image: url(../images/10.jpg); ) .cn- slide nav a, #slide-2-4 .cn-content ( background-image: url(../images/11.jpg); ) /* პუნქტები და ქვეპუნქტები სლაიდისთვის 3*/ .cn-slide nav a , #slide-3- 1 .cn-content ( background-image: url(../images/12.jpg); ) .cn-slide nav a, #slide-3-2 .cn-content ( background-image: url(../images/13.jpg); ) .cn-slide nav a, #slide-3-3 . cn-content ( background-image: url(../images/14.jpg); ) .cn-slide nav a, #slide-3-4 .cn-content ( background-image: url(../images/ 15.jpg);
დაბოლოს, ჩვენ განვსაზღვრავთ რამდენიმე მედია მოთხოვნას მცირე ეკრანის ზომებზე შაბლონის შესაქმნელად. უმჯობესია ამოიცნოთ ნიმუშის წყვეტის წერტილები და დააწესოთ მათი შეცვლის წესები. ჩვენს შემთხვევაში, არსებობს ორი ასეთი წერტილი: 1060 px და 900 px. მოდით შევცვალოთ შრიფტის ზომა და სუბსლაიდებში გამოვიყენებთ მხოლოდ ერთ ელემენტს სტრიქონზე.
@media ეკრანი და (მაქს. სიგანე: 1060 პიქსელი)( .cn-slide-sub nav a( შრიფტის ზომა: 28 პიქსელი; ) ) @მედია ეკრანი და (მაქს. სიგანე: 900 პიქსელი) ( .cn-კონტეინერი h2( შრიფტის ზომა : 48 პიქსელი; სტრიქონის სიმაღლე: 95 პიქსელი; slide-sub nav a:nth-child(კენტი)( ზღვარი-მარჯვნივ: 0px; ) )
