Ul ჰორიზონტალური. როგორ განვათავსოთ სიის ელემენტები ჰორიზონტალურად? როგორ მუშაობს ცენტრირების მეთოდი?

ჰორიზონტალური მენიუს ცენტრირების ამოცანა შეიძლება რთული იყოს, განსაკუთრებით მათთვის, ვინც ახალია CSS. გადაწყვეტილებების ძიებას მივყავართ მეთოდების ძალიან შეზღუდულ სიამდე, რომელთა უმეტესობა ეყრდნობა CSS ხრიკებს, JavaScript-ს ან არასტანდარტული წესების გამოყენებას, რომლებიც არ არის მხარდაჭერილი ყველა ბრაუზერის მიერ. ამ სახელმძღვანელოში ჩვენ განვიხილავთ ჰორიზონტალური მენიუს ცენტრირების მეთოდს, რომელიც იყენებს მხოლოდ სტანდარტულ CSS წესებს და მუშაობს ყველა ბრაუზერში.

ცენტრალური მენიუს მაგალითი

ქვემოთ მოცემულია ჰორიზონტალური მენიუ, რომელიც მდებარეობს ამ სვეტში, რომელშიც გააქტიურებულია მეორე ჩანართი. შეგიძლიათ სცადოთ თქვენი ბრაუზერის ფანჯრის ან გვერდის ზომის შეცვლა, რათა დარწმუნდეთ, რომ მენიუ ყოველთვის ცენტრში და ფუნქციონირებს.

დემო გვერდზე შეგიძლიათ იხილოთ ჰორიზონტალურად ორიენტირებული მენიუს დიზაინის რამდენიმე ვარიანტი. ნებისმიერი მათგანის გამოყენება შესაძლებელია თქვენს პროექტებში.

HTML მარკირება

ამ სახელმძღვანელოში ნაჩვენები ყველა მენიუ იყენებს მარტივ სტრუქტურას. ეს არის ელემენტში მოთავსებული ბმულების ჩვეულებრივი დაუგეგმავი სია დივ.

ცენტრალური მენიუ CSS კოდი

ქვემოთ მოცემულია სრული CSS კოდი, რომელიც გამოიყენება მენიუს ცენტრში. მუშაობის პრინციპის განმარტება მოცემულია გაკვეთილის შემდეგ.

#ცენტრირებული მენიუ ( float:მარცხნივ; სიგანე:100%; ფონი:#fff; საზღვარი-ქვედა:4px მყარი #000; overflow:დამალული; პოზიცია: შედარებითი; ) #ცენტრირებული მენიუ ul (გასუფთავება:მარცხნივ; float:მარცხნივ; სიის სტილი padding: 0 0 0 padding; 3px 10px:#ddd color:#000 line-height:1.3em ) #centeredmenu ul li: a.active, #centredmenu ul li a.active:hover ( ფერი:# fff; ფონი:#000;

როგორ მუშაობს ცენტრირების მეთოდი?

მეთოდის მოქმედება ეფუძნება მცურავი ბლოკის ელემენტების შედარებით განლაგებას ერთმანეთის შიგნით. ჯერ ვნახოთ, როგორ იცვლება ელემენტების ზომა გადაადგილებისას.

ელემენტი დივ(ბლოკი) გადაადგილების გარეშე გადაჭიმულია მის ხელთ არსებულ მთელ სიგანეზე.

მაგრამ თუ div-ს მარცხნივ გადავიტანთ, ის ავტომატურად შემცირდება, რათა მოერგოს მის შიგთავსს. შეკუმშვა არის გასაღები მენიუს ცენტრირების ამ მეთოდის განსახორციელებლად. ეს გეხმარებათ მენიუს სწორ პოზიციაზე გადატანაში.

სტანდარტული მარცხნივ გასწორებული მენიუ

ავიღოთ სტანდარტული მარცხნივ გასწორებული მენიუ და გადავაკეთოთ ის ეტაპობრივად. სიცხადისთვის, ნივთები სხვადასხვა ფერებშია შეღებილი, ასე რომ, მაშინვე გასაგებია, სად მიდის.

გთხოვთ გაითვალისწინოთ შემდეგი პუნქტები:

• ელემენტი ცენტრალური მენიუ div(ლურჯი მართკუთხედი) გადაადგილებულია მარცხნივ, მაგრამ აქვს სიგანე 100%, ასე რომ ის რჩება გადაჭიმული მთელ გვერდზე.
• ელემენტი ul(ვარდისფერი მართკუთხედი) არის ელემენტის შიგნით ცენტრალური მენიუ დივდა გადადის მარცხნივ. ეს ნიშნავს, რომ ის შეკუმშული იქნება მისი შინაარსის სიგანეზე, ანუ ყველა სანიშნეების მთლიან სიგანეზე.
• ყველა li ელემენტი (მწვანე მართკუთხედები) არის ელემენტის შიგნით ulდა გადავიდეთ მარცხნივ. ამრიგად, ისინი შეკუმშულია მათში არსებული ბმულების ზომით და ერთ ჰორიზონტალურ ხაზში გაფორმებულია.
• თითოეული ბმულის შიგნით (ნარინჯისფერი ოთხკუთხედები) ნაჩვენებია სანიშნე ტექსტი: სანიშნე 1, სანიშნე 2 და ა.შ.

შეუკვეთავი სიის პოზიციის შეცვლა

შემდეგ ჩვენ დავაფიქსირეთ ელემენტი ulმარჯვნივ 50%-ით პოზიციით:ნათესავი; . როდესაც ამ პირობებში ელემენტი კომპენსირებულია პროცენტით, მნიშვნელოვანია გვახსოვდეს, რომ მასში შემავალი ელემენტების მთლიანი სიგანე არ არის მისი სიგანე. ჩვენს შემთხვევაში, ოფსეტური ხდება ბრაუზერის ფანჯრის ნახევრად (ან საჩვენებლად ხელმისაწვდომი სივრცით). და გადავიდეთ შემდეგ ეტაპზე.

მენიუს ყველა ელემენტის პოზიციის შეცვლა

რჩება მხოლოდ ყველა ელემენტის გადატანა ლიდარჩა 50%. ეს არის ჩვენი ul ელემენტის სიგანის 50% (კონტეინერი, რომელიც შეიცავს მენიუს). ამრიგად, სანიშნეები გადადის ზუსტად ფანჯრის ცენტრში.

რამდენიმე მნიშვნელოვანი შენიშვნა

ცენტრირების ამ მეთოდის გამოყენებისას უნდა გახსოვდეთ რამდენიმე მნიშვნელოვანი პუნქტი:

• ვინაიდან ელემენტი ulნაწილობრივ ვრცელდება ფანჯრის მიღმა, რაც იწვევს გადახვევის ზოლების ჩვენებას. ამიტომ, თქვენ უნდა გამოიყენოთ overflow:hidden წესი. ელემენტისთვის ცენტრალური მენიუ div. ამრიგად, ელემენტის ამობურცული ნაწილი დივგაწყდება.
• ვინაიდან ელემენტი ulარ არის გასწორებული სანიშნეებთან, თქვენ არ შეგიძლიათ გამოიყენოთ რაიმე ვიზუალური სტილი ამისთვის. დატოვე ul ელემენტი ფონის ფერის გარეშე და საზღვრის გარეშე, რათა ის სრულიად უხილავი გახდეს. და სანიშნეების სტილები უნდა იყოს გამოყენებული მხოლოდ ელემენტებისთვის ლი.
• თუ თქვენ გჭირდებათ სპეციალური სტილის დაყენება პირველი და ბოლო სანიშნეებისთვის, თქვენ უნდა დაამატოთ კლასი პირველი და ბოლო ელემენტებისთვის ლი, ასე რომ თქვენ შეგიძლიათ მათი სტილი ინდივიდუალურად.

დასკვნა

შემოთავაზებული გადაწყვეტა თავსებადია ყველა ბრაუზერთან, არ იყენებს JavaScript-ს და მხარს უჭერს ზომის შეცვლადი ტექსტს.

დავალება

აჩვენეთ ბურთულებიანი სია ჰორიზონტალურად ბურთულების გარეშე.

გამოსავალი

ტყვიის ტეგი

ნაგულისხმევად აჩვენებს ელემენტებს
• ვერტიკალურად ერთმანეთზე მაღლა. ნავიგაციის ელემენტების შესაქმნელად, ზოგიერთ შემთხვევაში მოსახერხებელია სიის ჰორიზონტალურად ჩვენება. ამ სიის ჩვენების მისაღწევად რამდენიმე გზა არსებობს.

  თქვენ უკვე უნდა იცოდეთ, რომ HTML-ს აქვს ბლოკი და ინლაინ ელემენტები. Inline ელემენტები არ ქმნიან საკუთარ ბლოკებს ასეთი ელემენტების მაგალითია ტეგები ან . ბლოკის ელემენტები ნაჩვენებია ახალ ხაზზე და ქმნის მართკუთხა ბლოკს, ასეთი ტეგების მაგალითს

  ან

  ასე რომ, აქ არის ტეგი

• ასევე არის ბლოკის ელემენტი.

  Მონიშვნა

• არ იქცეოდა როგორც ბლოკის ელემენტი, შეგიძლიათ გამოიყენოთ CSS, რათა ის გახადოთ inline.

  CSS თვისების ჩვენება განსაზღვრავს, თუ როგორ იქნება ელემენტი ნაჩვენები დოკუმენტში. მოდით განვიხილოთ მისი სამი მნიშვნელობა (თუმცა უფრო მეტია):

  • ბლოკი - ელემენტი ნაჩვენებია ბლოკის ელემენტად.
  • inline - ელემენტი ნაჩვენებია როგორც inline.
  • inline-block - ბლოკ-ხაზის ელემენტი, წაიკითხეთ მეტი ამ ტიპის ელემენტის შესახებ ქვემოთ, ჩვენ მას გამოვიყენებთ.

  პირველ რიგში, მოდით შევქმნათ ჰორიზონტალური სია მისი პუნქტების ხაზოვან ელემენტებად გადაქცევით. CSS სტილში დავწეროთ წესი, რომელშიც li სელექტორი დაყენებულია საკუთრების ჩვენებაზე მნიშვნელობით inline .

  • პუნქტი 1
  • წერტილი 2
  • წერტილი 3
  
  
  

  ასე რომ, ამ სტილმა იმუშავა და მივიღეთ სიის ელემენტების ჰორიზონტალური განლაგება:

  სურათი 1. მაგალითი #1 სამუშაოზე.

  ამ მეთოდს აქვს უარყოფითი მხარეები. ფაქტია, რომ ინლაინ ელემენტებს აქვთ გარკვეული შეზღუდვები ბლოკის ელემენტებთან შედარებით. მაგალითად, მათ არ შეიძლება მიეცეს სიგანე და სიმაღლე, მაგრამ ბლოკებს შეუძლიათ.

  მაგალითად, ჩვენ გვჭირდება მენიუს ელემენტი, რომელსაც ჩვენ ვქმნით, ჰქონდეს სიგანე 150 პიქსელი და სიმაღლე 40 პიქსელი. შევეცადოთ შევცვალოთ სტილი შემდეგში, ანუ დავამატოთ ორი წესი, რომლებიც განსაზღვრავს მენიუს ელემენტის ზომას:

  ეს ცვლილებები არ გამოიწვევს რაიმე ცვლილებას. იმისათვის, რომ მენიუს ელემენტები განლაგდეს ჰორიზონტალურად და შეძლონ მათი სიგანისა და სიმაღლის დაყენება, მათ უნდა დააყენონ ტიპი inline-block . მოდით შევცვალოთ ჩვენი მაგალითის კოდი:

  • პუნქტი 1
  • წერტილი 2
  • წერტილი 3
  
  
  

  ეს კოდი მუშაობს და ცვლილებები ჩანს:

  
  სურათი 2. მაგალითი No2 მოქმედებაში.

  მაგრამ შეიძლება არსებობდეს სხვადასხვა ვარიანტები, მაგალითად, ჩვენ უნდა გამოვაჩინოთ ჩადგმული სიები მენიუში:

  • რედაქტირება
    • გაუქმება
    • გაჭრა
    • კოპირება
    • ჩასმა
  • შრიფტი
    • თამამი
    • დახრილი
    • ხაზგასმულია
  • ზომა
    • Პატარა
    • ნორმალური
    • საშუალო
    • Დიდი
  
  
  

  აი ამ კოდის შედეგი:

  
  ნახაზი 3. მაგალითი No3 სამუშაოზე.

  ჩვენ ვხედავთ, რომ ბლოკები არ არის გასწორებული სიმაღლეში, როგორც ჩვენ გვსურს. რა თქმა უნდა, თქვენ შეგიძლიათ მიუთითოთ ერთი და იგივე სიმაღლე ყველა ბლოკისთვის, მაგრამ ჩვენ ყოველთვის არ ვიცით მისი ზუსტი მნიშვნელობა წინასწარ და ის შეიძლება შეიცვალოს.

  მაგრამ სინამდვილეში რატომ ხდება ეს?

  ჩვენს ბლოკებს აქვთ ჩვენების თვისება დაყენებული inline-block . ეს ნიშნავს, რომ მათ აქვთ როგორც ბლოკის ელემენტების (სიგანისა და სიმაღლის დაზუსტების უნარი) ასევე ხაზოვანი ელემენტების თვისებები. რასაც ჩვენ ვხედავთ არის შიდა ელემენტების ხარისხი.

  მოდით შევხედოთ სტრიქონს სხვადასხვა ზომის "A" სიმბოლოებით:

  A A A A A A A

  ჩვენ ვხედავთ, რომ ყველა ასო ვერტიკალურად არის გასწორებული ქვედა ხაზის გასწვრივ. უფრო ზუსტად, საბაზისო ხაზის გასწვრივ, მაგრამ ახლა სარეველას ნუ შევეხებით. ასე რომ, იგივე მოხდა ჩვენს ბლოკებთან დაკავშირებით.

  ტექსტის ვერტიკალურად გასასწორებლად გამოიყენეთ ვერტიკალური გასწორების თვისება. ჩვენს მაგალითში #3, ჩვენ უნდა გამოვიყენოთ მნიშვნელობა top , რომელიც გაასწორებს ელემენტის ზედა საზღვარს ხაზის ყველაზე მაღალი ელემენტის ზედა ნაწილთან.

  ახლა მოდით გამოვიყენოთ იგი სხვადასხვა ზომის "A" სიმბოლოებით სტრიქონზე:

  A A A A A A A

  ასოები თითქოს ოდნავ „ხტუნავს“. მე დავაყენე CSS საზღვარი ყველაზე მაღალ ასოზე, რათა ვაჩვენო, რომ რეალურად არ არის ნახტომი, უბრალოდ ცარიელი სივრცე ზედა საზღვრებს შორის (სადაც ხდება გასწორება) და "A" ზედა წერტილს შორის.

  ვერტიკალური გასწორების თვისება უნდა იქნას გამოყენებული თითოეულ ხაზოვან ელემენტზე, ის არ არის მემკვიდრეობით მიღებული. შეგიძლიათ მეტი წაიკითხოთ ამ ქონების შესახებ: vertical-align .

  ამ გადახრის შემდეგ ჩვენ გავაგრძელებთ სიის ელემენტების ჰორიზონტალურად განთავსებას.

  მეორე გზა

  თქვენ შეგიძლიათ განათავსოთ სიის ელემენტები ჰორიზონტალურად float თვისების გამოყენებით. ეს თვისება განსაზღვრავს რომელ მხარეს არის ელემენტი გასწორებული და აქვს ორი პოზიცია: მარცხნივ და მარჯვნივ.

  აი მაგალითი ამ კოდის გამოყენებით:

  • პუნქტი 1
  • წერტილი 2
  • წერტილი 3
  
  
  

  აი კოდის შედეგი:

  სურათი 4. მუშაობის მაგალითი.

  როგორც ჩანს, მაგალითი მუშაობს. მაგრამ არსებობს ერთი სიფრთხილე ამ ქონების გამოყენებისას. ახლა ჩვენ შევხედავთ მას. მაგალითად, ავიღოთ კოდი, რომელშიც არის ორი ჰორიზონტალური სია ელემენტების ჰორიზონტალურად განლაგების სხვადასხვა გზით: ჩვენება და float:

  • პუნქტი 1
  • წერტილი 2
  • წერტილი 3
  • პუნქტი 1
  • წერტილი 2
  • წერტილი 3
  
  
  

  აი კოდის შედეგი:

  ნახაზი 5. მუშაობის მაგალითი.

  ამ მაგალითებში სიის კონტეინერები

  აქვს წითელი საზღვარი 1 პიქსელის სისქით. მაგრამ ზედა სია, რომელიც იყენებს ჩვენების თვისებას, შეიცავს სიის ელემენტებს. მაგრამ float თვისების გამოყენებით შექმნილი სიის ელემენტები ამოვარდება მათი კონტეინერიდან.

  ერთი შეხედვით ყველაფერი მუშაობს. მაგრამ მოდით გავცვალოთ ჩვენი სიები. მოდით ჩავდოთ სია კლასის მენიუ-1-ით კოდში კლასის მენიუ-2-ის სიის წინ (ახლა ის უფრო დაბალია).

  ეს არის ის, რასაც ვიღებთ შედეგად:

  სურათი 6. მაგალითი გაშვებული.

  ქვედა მენიუს ელემენტები ასევე ახვევენ ზედა მენიუს, რადგან float თვისების ეფექტი არ გაუქმებულა და ის ვრცელდება ყველა შემდგომ ელემენტზე.

  როგორ მოვაგვაროთ ეს პრობლემა?

  ამისათვის თქვენ უნდა გამოიყენოთ წმინდა თვისება, ის აუქმებს ელემენტის სხვა ელემენტის გარშემო შეფუთვას, თუ მას აქვს float თვისებების ნაკრები.

  აქ არის შეცვლილი მაგალითი წმინდა თვისების გამოყენებით:

  • პუნქტი 1
  • წერტილი 2
  • წერტილი 3
  • პუნქტი 1
  • წერტილი 2
  • წერტილი 3
  
  
  

  ჩანს, რომ ქვედა სია აღარ ეხვევა ზედა, ელემენტები არ ეჯახება ერთმანეთს. მაგრამ პირველ სიაში არის ტეგები

  • კვლავ მდებარეობს კონტეინერის გარეთ
    .
    სურათი 7. მუშაობის მაგალითი.

    გარდა ამისა, სამუშაოში ყოველთვის არ ვიცით, რომელი ელემენტი მოჰყვება ელემენტს float-ის გამოყენებით. იდეალური ვარიანტი იქნება float ქონების ფუნქციონირების დახურვა იმავე ბლოკში, რომელშიც ის ღიაა.

    ეს კეთდება ფსევდო ელემენტის გამოყენებით. აი კოდი:

    • პუნქტი 1
    • წერტილი 2
    • წერტილი 3
    • პუნქტი 1
    • წერტილი 2
    • წერტილი 3
    
    
    

    ახლა ჩვენ გვაქვს 100% სამუშაო კოდი.

    სურათი 8. მაგალითი გაშვებული.

    ეს ტექნიკა float თვისებით ჩვეულებრივ გამოიყენება ვებსაიტების დიზაინის დროს ტეგებით შექმნილი სვეტების გასწორებისას

    . ამ გზით ვიღებთ სვეტების ნორმალურ კონსტრუქციას საჭირო სიმაღლის განლაგებით. როდესაც ჩვენ ვქმნით მენიუს, უმეტეს შემთხვევაში ბლოკების სიმაღლე ჩვენთვის არ არის მნიშვნელოვანი, ის თითქმის ყოველთვის ერთნაირია. ამიტომ ამ შემთხვევაში წესის გამოყენება (ჩვენება: inline-block) სავსებით გამართლებულია.
    მაგრამ თემის სისრულისთვის, ჩვენ გავეცანით ყველა შესაძლო ვარიანტს. მიუხედავად იმისა, რომ შეიძლება არსებობდეს სხვა გზები, მაგალითად, CSS ცხრილების გამოყენება, საძიებო სისტემები მკაცრად გირჩევენ ცხრილების გამოყენებას მხოლოდ მათი დანიშნულებისამებრ და არა ნავიგაციის ელემენტების ან სხვა რამის ორგანიზებისთვის.
    03/24/05 7.6K
    მახსოვს, 1999 წლის ივლისში როგორ ვასწავლიდი ხალხს ელ.ფოსტის სიაში სტილის განლაგების სიამოვნების შესახებ. მას შემდეგ ცოტა რამ შეიცვალა.
    თუმცა რაღაც შეიცვალა. ჩემი შეხედულება CSS-ზე და (X)HTML-ზე, რომელიც სტილის ჩარჩოს როლს ასრულებს, შეიცვალა. მაგალითად, აღმოვაჩინე, რომ გვერდების უმეტესობა შეიცავს ნავიგაციის ზოლს. ყველაზე ხშირად ის ფორმატირებულია, როგორც მარტივი ტექსტის სტრიქონი თეგებით გამოყოფილი ბმულებით
    ან
    სტრუქტურულად, ისინი წარმოადგენს ბმულების სიებს და, შესაბამისად, უნდა იყოს ფორმატირებული, როგორც ასეთი.
    მიზეზი იმისა, რომ ჩვენ არ ვაკეთებთ მათ სიებს, არის ის, რომ ჩვენ ნამდვილად არ გვინდა პუნქტის ნახვა მენიუში ყველა ბმულის წინ. ადრე მე ვისაუბრე CSS-ის გამოყენებით გვერდების განლაგების რამდენიმე ტექნიკაზე. ერთ-ერთ ამ ხრიკში ვისწავლეთ სიების ჩვენება ხაზში და არა ვერტიკალურად.
    ამ სტატიაში მე გაჩვენებთ, თუ როგორ შეგიძლიათ მოასინჯოთ ეს მოუხერხებელი და მოუხერხებელი სიები CSS-ის გამოყენებით. შეაჩერე ისინი თქვენს ვებ გვერდებზე ხეტიალით. დროა უბრძანო მას, როგორ მოიქცეს.
    არენის მომზადება
    სასწავლო საგანად ავირჩიე მარტივი, უნომრო სიები. აქ ნახსენები CSS-ის ყველა წესი შეიძლება გამოყენებულ იქნას დანომრილ სიებზე იგივე შედეგით. ყველა მაგალითში (გარდა კონკრეტულად მითითებულისა), გამოიყენება შემდეგი სია:
    • პუნქტი 1
    • პუნქტი 2
    • პუნქტი 3
    • პუნქტი 4
    • პუნქტი 5 მოდით გავაგრძელოთ ეს ელემენტი, რომ გადავიდეს შემდეგ სტრიქონზე
    თითოეული სია უბრალოდ მოთავსებულია ცალკეულ ელემენტში
    და სიის ქცევა განისაზღვრება ამ DIV-ის გამოყენებით. ძირითადი წესი, რომელიც ვრცელდება ყველა DIV-ზე, არის:
    დამატებითი სტილის წესების გარეშე, საბაზო DIV-ის სია ასე გამოიყურება:
    პოზიციონირება
    ზოგჯერ სიის ნაგულისხმევი შეწევა შეიძლება იყოს ძალიან დიდი თქვენი დიზაინისთვის. მაგრამ იცვლება მხოლოდ ელემენტის ზღვარი ან padding თვისება
    არ მუშაობს ყველა ბრაუზერზე. იმისათვის, რომ სია მთლიანად მარცხნივ გადავიდეს, ვთქვათ, თქვენ უნდა შეცვალოთ ორივე თვისება: ზღვარი და padding. ეს გამოწვეულია იმით, რომ Internet Explorer და Opera ქმნიან სიის მარცხენა შეწევას მარცხენა ზღვრის გამოყენებით, ხოლო Mozilla/Netscape ამისთვის იყენებს მარცხენა ბალიშს.

    შემდეგ მაგალითში, UL ელემენტის მარცხნივ ზღვარი და ბალიშის მარცხენა თვისებები დაყენებულია 0-ზე:

    

    
    გთხოვთ გაითვალისწინოთ, რომ მარკერები დევს DIV საზღვრებს გარეთ. თუ კონტეინერი არ იყო DIV, არამედ დოკუმენტი, მარკერები იქნებოდა ბრაუზერის ფანჯრის მიღმა, ე.ი. მხედველობიდან გაქრებოდა. თუ გსურთ, რომ მარკერები მოთავსდეს DIV-ის საზღვრებში, მისი მარცხენა კიდის გასწვრივ, დააყენეთ ან მარცხენა padding თვისება ან მარცხენა margin თვისება "1em".

    

    მარკერები

    ვთქვათ, გჭირდებოდათ სია სპეციალური ტყვიებით. რას აკეთებდი ადრე? ჩვენ შევქმენით ცხრილი, მოვათავსეთ მარკერის GIF გამოსახულება ერთ სვეტში და გადავიტანეთ იგი ზევით და მარჯვნივ უჯრედში. მეორე სვეტი შეიცავდა ტექსტს, რომელიც ელემენტებში უნდა ყოფილიყო

    • . CSS ახლა საშუალებას გაძლევთ გამოიყენოთ გამოსახულება მარკერად. თუ ბრაუზერი არ უჭერს მხარს ამ CSS ფუნქციას (ან არ უჭერს მხარს გრაფიკულ გამომავალს), გამოყენებული იქნება ნაგულისხმევი მარკერი (ან ის, რაც თქვენ მიუთითეთ ამ შემთხვევაში).

      სტილის წესი ასე გამოიყურება:

      ul (list-style-image: url(bullet.gif);)

      და ბრაუზერი აჩვენებს სიას შემდეგნაირად:

      

      
      იმ ბრაუზერებისთვის, რომლებსაც არ აქვთ გრაფიკული გამომავალი მხარდაჭერა, დაამატეთ შემდეგი ხაზი წესებს:

      list-style-type: დისკი;

      გამოსახულება, რომელსაც მარკერად აირჩევთ, შესაძლოა „გაიპაროს“ სიის საზღვრებს მიღმა. ამის თავიდან ასაცილებლად, მოათავსეთ სურათი ბლოკის შიგნით

    • . ამისათვის დაამატეთ შემდეგი ხაზი:

      სია-სტილი-პოზიცია: შიგნით;

      სამივე დეკლარაცია შეიძლება გაერთიანდეს ერთ მოკლე წესში:

      ul (სიის სტილი: დისკის url(bullet.gif) შიგნით;)

      რომელიც ექვივალენტურია

      ul (list-style-type: დისკი; list-style-image: url(bullet.gif); list-style-position: inside;)

      შედეგად სია ასე გამოიყურება:

      

      
      შეიძლება მოხდეს, რომ გქონდეთ სია, მაგრამ არ გჭირდებათ ტყვიები, ან გსურთ გამოიყენოთ სხვა პერსონაჟი, როგორც ტყვია. კიდევ ერთხელ, CSS მოდის თქვენს სამაშველოში. დაამატეთ წესები სია-სტილი: none; და გააკეთე ელემენტები
    • "გადაკიდებული". მთელი წესი ასე გამოიყურება:

      ul (სიის სტილი: არცერთი; ზღვარი მარცხნივ: 0; შიგთავსი მარცხნივ: 1em; ტექსტის შეწევა: -1em; )

      მარცხენა padding თვისებას ან მარცხენა margin თვისებას უნდა ჰქონდეს მნიშვნელობა 0, ხოლო მეორეს უნდა ჰქონდეს მნიშვნელობა 1em. ამ თვისების შეცვლით თქვენ შეგიძლიათ დაარეგულიროთ შეწევის ზომა თქვენი მარკერიდან მისაღებზე. ტექსტის შეწევის თვისებაში უარყოფითი მნიშვნელობა იწვევს სიის თითოეული ელემენტის პირველი სტრიქონის მარცხნივ გადაადგილებას და დანარჩენი ტექსტის „გადაკიდებას“.

      ჩვენი შემდეგი სია ნორმალური იქნება, მხოლოდ სტანდარტული HML სიმბოლო იქნება გამოყენებული მარკერად, მაგალითად ", რომელიც შეესაბამება დახურვის ტიპოგრაფიულ ციტატას: ".

      

      
      აქვე უნდა აღინიშნოს, რომ Netscape6/7/Mozilla-ს (და Gecko-დან მიღებული სხვა ბრაუზერებს), ისევე როგორც Opera-ს შეუძლია კონტენტის გენერირება CSS2 სტანდარტის :before ფსევდო ელემენტის გამოყენებით. მოდით გამოვიყენოთ ეს ფუნქცია და ავტომატურად გამოვიმუშავოთ სიმბოლო "ან სხვა სიმბოლო, როგორც მარკერი. ამ გზით ჩვენ არ მოგვიწევს მისი ხელით შეყვანა თითოეულ LI ელემენტში. თუ იყენებთ Opera ბრაუზერს ან Gecko-ს ბრაუზერების ოჯახს, შემდეგი CSS შექმნის იგივე სიას, როგორც წინა, სიაში დამატებით რაიმეს დამატების გარეშე.

      #custom-gen ul li:fore ( შინაარსი: "0BB 020"; )

      შინაარსის თვისება შეიძლება დაყენდეს ტექსტის სტრიქონზე, URL-ზე ან სხვა რამეზე, სპეციალური სიმბოლოების ჩათვლით. თუ თქვენ აირჩიეთ სიმბოლო, როგორიცაა "", თქვენ უნდა შეიყვანოთ ამ სიმბოლოს თექვსმეტობითი კოდი თვისებაში. სწორ ტიპოგრაფიულ ციტატას აქვს კოდი 0BB (სხვა სიმბოლო 020 არის სივრცე, რომელიც დამატებულია ესთეტიკური მიზეზების გამო). საბოლოო შედეგი ნაჩვენებია ქვემოთ (უყურეთ Opera ან Mozilla/Netscape ბრაუზერში):

      

      სიის ზედიზედ დალაგება

      ვინ თქვა, რომ სიები უნდა წავიდეს ვერტიკალურად და დაფორმატებული იყოს მარკერებით მარცხნივ? მაგალითად, გსურთ ბმულების დანომრილი სია, მაგრამ ვიზუალურად გსურთ სია გამოიყურებოდეს ვერტიკალური ნავიგაციის ზოლს გვერდზე. ან დავუშვათ, რომ გსურთ ბმულები ჰორიზონტალურად გაშვებული იყოს გვერდის ზედა კიდეზე.

      ეს ეხება არა მხოლოდ ბმულების ჩამონათვალს. შეიძლება დაგჭირდეთ რამდენჯერმე ჩამოთვლა აბზაცში (მაგალითად, წიგნების სია). სტრუქტურულად, ეს არის სია, მაგრამ ადრე, თუ ამას გააკეთებდით, სია გაანადგურებდა თქვენს აბზაცს. CSS ისევ თქვენს სამაშველოში მოდის!

      ვინაიდან ეს სია არ იქნება რაიმე ცალკე გვერდზე, მე არ განვათავსებ მას საბაზისო DIV-ში, როგორც წინა სიები. ამჯერად მარკირება ასე გამოიყურება: აბზაცი, სია, შემდეგი აბზაცი.

      უკვე მესმის შეძახილები: „იდიოტო! ჩვენ ვიფიქრეთ, რომ თქვენ გვასწავლით, როგორ ჩავდოთ სიები აბზაცში, ორ აბზაცს შორის."

      და ამაზე მე ვპასუხობ: ”კარგი, დიახ, მართალი ხარ. სამწუხაროდ (X)HTML არ იძლევა სიების განთავსებას აბზაცის შიგნით. თუმცა, სტილებით შეგიძლიათ ამის გაკეთება.”

      პირველი, აქ არის სტილის წესები:

      #inline-list ( საზღვარი: 1px მყარი #000; ზღვარი: 2em; სიგანე: 80%; padding: 5px; font-family: Verdana, sans-serif; ) #inline-list p ( ჩვენება: inline; ) #inline- list ul, #inline-list li (ჩვენება: inline; ზღვარი: 0; padding: 0; ფერი: #339; font-weight: bold;)

      ყველა კოდი მოთავსებულია

      . არის აბზაცი, შემდეგ სტანდარტული UL ჩამონათვალი და შემდეგ სხვა აბზაცი. UL სია ისეა რედაქტირებული, რომ თითოეულ პუნქტს მოსდევს მძიმე, ხოლო ბოლო პუნქტს მოსდევს წერტილი.

      შედეგი ასე გამოიყურება (სია მონიშნულია ლურჯად):

      

      
      ისევე, როგორც ზემოთ მოცემულ მაგალითში, ჩვენ შეგვიძლია გამოვიყენოთ CSS მძიმების და წერტილების ავტომატურად გენერირებისთვის. თუ თქვენი ვიზიტორები მხოლოდ Opera და Gecko ბრაუზერებს იყენებენ, სანერვიულო არაფერი გაქვთ. სტილის წესები ასე გამოიყურება:

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

      აქ ვიყენებთ :after ფსევდო ელემენტს სიის თითოეული ელემენტის ბოლოს მძიმის დასამატებლად და წერტილის დასამატებლად class="last" გამოყენებით. შედეგი იქნება ასეთი (გახსოვდეთ, ის მუშაობს მხოლოდ Opera-ში ან Mozilla/Netscape-ში):

      

      ნავიგაცია

      როგორც თავიდანვე ვთქვი, ბმულების მენიუ, რომელსაც ჩვენ ვხედავთ ყველა საიტზე, უნდა იყოს ჩამოყალიბებული, როგორც სიები, რაც არსებითად არის. ვინაიდან ჩვენ არ გვინდა ამ სიის ნახვა ისე, როგორც ნაგულისხმევი ბრაუზერი აჩვენებს მას, ჩვენ გამოვიყენებთ CSS-ს გარკვეული კოსმეტიკური ცვლილებების შესატანად. ჩვენ უკვე ვიცით, რომ სიების კონკრეტულად ჩვენება შესაძლებელია ჰორიზონტალურად (ერთ ხაზზე), და არა მხოლოდ ვერტიკალურად (როგორც ისინი ნაჩვენებია ნაგულისხმევად). სტილების დახმარებით შესაძლებელია მარკერების ამოღება და თქვენ გაქვთ ფართო არჩევანი, თუ როგორ უნდა გამოვყოთ სიის ერთი ელემენტი მეორისგან.

      აქ მოცემულია ჰორიზონტალური სიების მაგალითები, რომლებიც განთავსებულია იმავე საბაზისო DIV-ში შემდეგი წესებით.

      ქვემოთ მოცემული ორი მაგალითი იყენებს ერთსა და იმავე UL-ს მხოლოდ ბოლო აბზაცის გრძელი ტექსტის გარეშე. ასევე დამატებულია დამატებითი კლასი, რომელიც საშუალებას გაძლევთ ცალკე იმუშაოთ სიაში ერთ-ერთ LI-სთან.

      საზღვრები

      სიმბოლო | ხშირად გამოიყენება სხვადასხვა არჩევანის აღსანიშნავად. მენიუში მისი გამოყენება ბუნებრივია. მოდით ამ სიმბოლოს სიმულაცია LI-ის საზღვრების გამოყენებით.

      #pipe ul ( margin-მარცხნივ: 0; padding-left: 0; ჩვენება: inline; ) #pipe ul li (ზღვარი-მარცხნივ: 0; padding: 3px 15px; სასაზღვრო მარცხნივ: 1px მყარი #000; სიის სტილი: არცერთი; ჩვენება: inline.

      
      წესები შეიძლება შეიცვალოს, რათა სია გამოიყურებოდეს სანიშნეების სახით:

      #tabs ul ( margin-მარცხნივ: 0; padding-left: 0; ჩვენება: inline; ) #tabs ul li (ზღვარი-მარცხნივ: 0; margin-ქვემო: 0; padding: 2px 15px 5px; საზღვარი: 1px მყარი #000 list-style: none;

      
      ამ მაგალითში, ჩვენ დავამატეთ class="here" ერთ-ერთ LI-ს, რის გამოც სიის ელემენტის ქვედა საზღვრები იგივე ფერისაა, როგორც ფონი. ამრიგად, მენიუში ჩვენ მივუთითებთ მომხმარებლის ამჟამინდელ პოზიციას საიტზე.

      შენიშვნა: ეს ტექნიკა შემოგვთავაზა Randal Rust-მა და მოგვიანებით გააუმჯობესა css-discuss დაგზავნის სიის აბონენტებმა

      ჯაჭვის ბმულები

      ბმულის კიდევ ერთი ტიპი, რომელიც, როგორც წესი, ჰორიზონტალურად მდებარეობს ვებ გვერდზე, არის ნაცნობი breadcrumb ბმულები. ეს ბმულები ნათლად აჩვენებს სად იმყოფებით ამჟამად საიტის იერარქიაში - თქვენი მთელი გზა მთავარი გვერდიდან მიმდინარე განყოფილებამდე ან გვერდზე. თუ ნამდვილად გსურთ თქვენი გვერდის კოდი სემანტიკურად სწორი გახადოთ, ამ ტიპის ბმული უნდა იყოს სტილიზებული, როგორც ჩადგმული სიების სერია, რადგან თითოეული სექცია წინა განყოფილების ნაწილია:

      • მთავარი
        • » პროდუქტები
          • » კომპიუტერები
            • » პროგრამული უზრუნველყოფა

      შედეგად ვიღებთ:

      
      შემდეგი წესების გამოყენება:

      #bread ( ფერი: #cccc; ფონის ფერი: #006; padding: 3px; margin-bottom: 25px; ) #bread ul ( margin-left: 0; padding-left: 0; display: inline; border: none; ) #bread ul li ( margin-მარცხნივ: 0; padding-left: 2px; კონტური: none; list-style: none; ჩვენება: inline; )

      ჩვენ ვიღებთ ამას:

      
      ისევ, """ სიმბოლო (ან ნებისმიერი სხვა შესაფერისი სიმბოლო) შეიძლება ავტომატურად გენერირებული იყოს :before ფსევდოელემენტის გამოყენებით class="first" კლასთან ერთად ისე, რომ პირველ LI ელემენტს არ ჰქონდეს ეს სიმბოლო.

      #bread-gen ul li:fore ( შინაარსი: "020 020 020 0BB 020"; ფერი: #ff9; ) #bread-gen ul li.first: ადრე ( შინაარსი: " "; )

      Საბოლოო შედეგი:

      რეალობის სამყარო

      მე დავასრულებ ჩემს სტატიას რეალური მაგალითით, რომელიც იყენებს ზემოთ აღწერილ ხრიკს. ჩვენ ავიღებთ სტანდარტულ UL სიას ბმულებით და შევქმნით დინამიურ მენიუს მოძრავი ეფექტებით. მოძრავი ეფექტის შესაქმნელად, ვიზუალური სტილები გამოყენებული იქნება A ელემენტებზე, ხოლო UL და LI ელემენტები მხოლოდ სტრუქტურული ჩარჩოს როლს შეასრულებენ.

      

      
      ეს მენიუ რეალურად არის პასუხი მაიკლ ეფორდის მიერ დასმულ შეკითხვაზე css-discuss დაგზავნის სიაში. მაიკლმა შექმნა ზუსტად იგივე მენიუ ცხრილების, გრაფიკისა და JavaScript-ის გამოყენებით. შემდეგ მან იკითხა დაგზავნის სიაში, შეიძლებოდა თუ არა იგივეს მიღწევა CSS-ის გამოყენებით.

      • მთავარი
      • ფარული კამერები
      • CCTV კამერები
      • თანამშრომლების ქურდობა
      • სასარგებლო მინიშნებები
      • F.A.Q
      • Ჩვენს შესახებ
      • Დაგვიკავშირდით

      მოდით შევხედოთ სტილის ფურცელს წესით და მე აგიხსნით, რატომ არის საჭირო თითოეული მათგანი.

      #ღილაკი ( სიგანე: 12em; კონტური-მარჯვნივ: 1px მყარი #000; padding: 0 0 1em 0; ზღვარი-ქვედა: 1em; შრიფტი-ოჯახი: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva, Helvetica , Arial, sans-serif; background-color: #90bade;

      პირველი წესი არის #ღილაკი DIV. ის განსაზღვრავს რამდენ ადგილს დაიკავებს მენიუ და ქმნის კონტექსტს, რათა გავაკონტროლოთ ბმულების და სიის ელემენტების ქცევა. მე ვამჯობინე მენიუ გავხადო მოქნილი და დამოკიდებული ბრაუზერის პარამეტრებზე, ამიტომ (თითქმის) ყველა მნიშვნელობა მითითებულია "em"-ში. მენიუს სიგანის ჩათვლით. შავი საზღვარი აღებულია მაიკლის ორიგინალური დიზაინიდან. მენიუს დიდი ქვედა შიგთავსი კეთდება ისე, რომ თქვენ შეგიძლიათ ნახოთ DIV-ის ფონი. ისევ და ისევ, ეს გაკეთდა ორიგინალური დიზაინის გასამეორებლად. ქვედა ზღვარი (ზღვარი) გამოიყენება მენიუს შემდგომი განცალკევებისთვის. ყველა ფერი აღებულია ორიგინალური დიზაინიდან.

      #ღილაკი ul ( სიის სტილი: არცერთი; ზღვარი: 0; შიგთავსი: 0; საზღვარი: არცერთი; ) #ღილაკი li (ბოლო-ბოლო: 1 პიქსელი მყარი #90bade; ზღვარი: 0; )

      აქ დავადგინე, როგორი უნდა იყოს სია. ვინაიდან ჩვენი სიის ყველა ელემენტი არის ბმულები და მოძრავი ეფექტი ჯერჯერობით მხოლოდ ბმულებისთვისაა ხელმისაწვდომი, მე განზრახ წავშალე ყველა სტილისტური წესი სიებიდან. მე უბრალოდ დავამატე ერთი პიქსელიანი საზღვრები, რომლის ფერი ემთხვევა #button DIV-ის ფონის ფერს. ეს საზღვარი ემსახურება როგორც გამყოფი მენიუს ელემენტებს შორის. ორიგინალურ დიზაინში ამისათვის გამოიყენებოდა ცალკე სურათი.

      #ღილაკი li a ( ეკრანი: ბლოკი; შიგთავსი: 5px 5px 5px 0.5em; მარცხნივ საზღვარი: 10px მყარი #1958b7; საზღვარი მარჯვნივ: 10px მყარი #508fc4; ფონის ფერი: #2175bc; ფერი: #fff; ტექსტი-დეკორაცია : none; width: 100% ) html>body #button li a ( width: auto; ) #button li a:hover (საზღვარი-მარცხნივ: 10px მყარი #1c64d1; საზღვარი-მარჯვნივ: 10px მყარი #5ba3e0; : #2586d7 ფერი: #fff;

      ბოლოს მივედი ლინკებზე. თავდაპირველ დიზაინს ჰქონდა 10 პიქსელიანი საზღვრები მარცხნივ და მარჯვნივ. ამ საზღვრებმა მაუსის დაჭერისას ფონთან ერთად ფერი იცვალა. ამ ქცევის მიღწევა საკმაოდ მარტივია :hover ფსევდოკლასის გამოყენებით, ამიტომ საზღვრების და ფონის ფერის შეცვლის ეფექტი გამოიყენება ელემენტებზე. .

      აქ გამოვიყენე ერთი ხრიკი: ისე, რომ ბმულების ქცევა მთელ ბლოკზე (სიგანე და სიმაღლე) გავრცელდა, მათ მივანიჭე წესის ჩვენება: block;. ეს მუშაობდა ყველა ბრაუზერში, გარდა IE Windows-ისთვის. თუ თქვენ პირდაპირ დააყენეთ სიგანე 100%, IE for Windows-ისთვის ყველაფერს გაიგებს. მაგრამ პრობლემები გაქვთ IE5-ში Mac და Netscape/Mozilla ბრაუზერებისთვის. ასე რომ, მე მოვატყუე: ბავშვის სელექტორის გამოყენებით ">" მე დავაყენე სიგანე "auto". ვინაიდან IE for Windows-ისთვის არ ესმის ბავშვის სელექტორები, ის უგულებელყოფს ამ წესს. IE5 Mac-ისთვის, Opera და Netscape/Mozilla-სთვის ეს წესი ესმით და ყველა ბედნიერია.

      ფსევდო-კლასის წესი: hover ცვლის ფონის ფერს და საზღვრებს, როდესაც მაუსი მოძრაობს ბმულზე.

      სტილის ყველა წესმა და სიამ (კოდი 1 კბ) ჩაანაცვლა დაახლოებით 5 კბ JavaScript და ჩადგმული ცხრილები, რომ აღარაფერი ვთქვათ დაახლოებით 8 კბ გრაფიკულ ფაილებზე, რომლებიც გამოიყენება მოძრავი ეფექტის შესაქმნელად. გარდა ამისა, მარკირება გახდა უფრო იკითხება და უფრო ადვილი განახლება, რადგან მენიუს სახელის შეცვლის შემთხვევაში ახალი სურათების შექმნა არ გჭირდებათ. თქვენ უბრალოდ უნდა შეცვალოთ ტექსტი. მენიუს საბოლოო ვერსია შეგიძლიათ ნახოთ Asset Surveillance-ის ვებსაიტზე.

      აისბერგის წვერი

      გინდ დაიჯერეთ თუ არა, ჩვენ მხოლოდ სიების ზედაპირი გავფცქვნათ და რა შეგიძლიათ გააკეთოთ მათთან CSS-ის გამოყენებით. მე არ ვამბობ, რომ აქ აღწერილი ყველა ტექნიკა სრულყოფილების სიმაღლეა, მაგრამ ნამდვილად ვიმედოვნებ, რომ ეს სტატია შეცვლის თქვენს დამოკიდებულებას CSS-ის მიმართ და თქვენს ყურადღებას გაამახვილებს სტრუქტურული განლაგების იდეაზე.

      Კარგი ცუდი