Return to Video

CSS პოზიციები

  • 0:00 - 0:02
    ახლა ჩვენ ვისწავლით,
    როგორ გამოვიყენოთ CSS
  • 0:02 - 0:04
    ელემენტების გადაადგილებისთვის.
  • 0:04 - 0:06
    არა უბრალოდ ერთმანეთის გვერდით
    დასალაგებლად,
  • 0:06 - 0:08
    არამედ ერთმანეთის მიყოლებით
  • 0:08 - 0:09
    ერთი მეორეს შემდეგ დასაწყობად.
  • 0:09 - 0:12
    აქ გვაქვს ვებ-გვერდი
  • 0:12 - 0:16
    რამდენიმე სათაურითა და სურათებით და
  • 0:16 - 0:18
    კიდევ გვაქვს რამდენიმე აბზაცი
  • 0:18 - 0:20
    ეს ყველაფერი ახლა განლაგებულია
  • 0:20 - 0:22
    სტანდარტული წყობის მიხედვით.
  • 0:22 - 0:24
    რასაც ძირითადად იყენებს ბრაუზერი.
  • 0:24 - 0:27
    ჩვენ მას სტატიკურ ან ჩვეულებრივ
    განლაგებას ვუწოდებთ,
  • 0:27 - 0:29
    რაც ნიშნავს, რომ ერთ ხაზის ელეენტები,
  • 0:29 - 0:31
    მაგალითად, სურათები,
  • 0:31 - 0:32
    განლაგებულია მარცხნიდან მარჯვნივ
  • 0:32 - 0:34
    ბლოკები კი, ისეთები, როგორც
  • 0:34 - 0:35
    სათაურები(ჰედერები) და აბზაცები
  • 0:35 - 0:38
    განლაგებულია ზემოდან ქვემოთ.
  • 0:38 - 0:40
    შეგვიძლია, შევცვალოთ განლაგების სტრატეგია
  • 0:40 - 0:43
    CSS-ის პოზიციონირების თვისების გამოყენებით
  • 0:43 - 0:46
    მოდი ვცადოთ ეს ამ სურათის მაგალითზე.
  • 0:46 - 0:49
    დავწეროთ: position:
  • 0:49 - 0:51
    და შემდეგ მნიშვნელობად მივუთითოთ
    relative
  • 0:51 - 0:53
    relative განლაგების სტრატეგია
  • 0:53 - 0:55
    ნიშნავს, რომ ელემენტს ჩვეულებრივად ვსვამთ
  • 0:55 - 0:58
    შემდეგ კი რაღაც მანძილით დავაშოროთ
  • 0:58 - 1:00
    ახლა მივუთითოთ ბრაუზერს,
  • 1:00 - 1:02
    რა მანძილით გვინდა დაშორება
  • 1:02 - 1:03
    ამისთვის უნდა გამოვიყენოთ
  • 1:03 - 1:05
    CSS-ის ოთხი ახალი
    თვისების კომბინაცია
  • 1:05 - 1:07
    ზედა, ქვედა, მარცხენა და მარჯვენა.
  • 1:07 - 1:09
    მაგალითად, გვინდა დავაშოროთ
  • 1:09 - 1:12
    ოცი პიქსელით ქვემოდან
  • 1:12 - 1:14
  • 1:14 - 1:15
    და კიდევ ათით...
  • 1:15 - 1:17
    დავუშვათ, ათით მარცხნიდან.
  • 1:17 - 1:19
    კარგია, არა?
  • 1:19 - 1:21
    მაგრამ კიდევ უფრო მაგარი რამე
  • 1:21 - 1:23
    შემიძლია გაჩენოთ.
  • 1:23 - 1:25
    კერძოდ, აბსოლუტური განლაგება.
  • 1:25 - 1:26
    ეს შეგვიძლია გამოვიყენოთ
  • 1:26 - 1:29
    თუ გვინდა ამოვიღოთ ელემენტი
    სტანდარტული წყობიდან
  • 1:29 - 1:31
    და ეკრანზე რომელიმე სხვა
    ადგილას დავსვათ.
  • 1:31 - 1:32
    ამისთვის
  • 1:32 - 1:33
    შევცვალოთ relative მნიშვნელობა
  • 1:33 - 1:34
    ჩავწეროთ absolute
  • 1:34 - 1:35
    მაგრამ დავტოვოთ
  • 1:35 - 1:37
    ზემოთა და მარცხენა თვისებები
  • 1:37 - 1:38
    როგორც ხედავთ
  • 1:38 - 1:39
    ახლა ჩვენი სურათი
  • 1:39 - 1:41
    ფარავს როგორც სხვა სურათებს,
    ასევე ჰედერს.
  • 1:41 - 1:43
    ეს არ გვაწყობს, გამოვასწოროთ.
  • 1:43 - 1:45
    დავიწყოთ უინსტონით.
  • 1:45 - 1:48
    დავამატოთ მისთვის წესი
  • 1:48 - 1:52
    position: absolute
  • 1:52 - 1:54
    და, დავუშვათ,
  • 1:54 - 1:56
    ზემოდან 40 პიქსელი
  • 1:56 - 1:58
    არა, 50 იყოს
  • 1:58 - 2:00
    და 50 მარცხნივ
  • 2:00 - 2:02
    აი, ახლა კარგია.
  • 2:02 - 2:04
    ჰუპერსაც უნდა ზემოთ
  • 2:04 - 2:06
    ამიტომ
  • 2:06 - 2:07
    მასაც მივანიჭოთ
  • 2:07 - 2:12
    position: absolute
  • 2:12 - 2:15
    თვისებები: top: 30
  • 2:15 - 2:18
    left:70
  • 2:18 - 2:20
    ჩემი მიზანია
  • 2:20 - 2:21
    ჩანდეს ისე, თითქოს ჰუპერი
  • 2:21 - 2:24
    უინსტონის ირგვლივ ცეკვავს.
  • 2:24 - 2:27
  • 2:27 - 2:28
  • 2:28 - 2:30
  • 2:30 - 2:32
  • 2:32 - 2:34
  • 2:34 - 2:35
  • 2:35 - 2:37
  • 2:37 - 2:39
  • 2:39 - 2:42
  • 2:42 - 2:44
  • 2:44 - 2:45
  • 2:45 - 2:46
  • 2:46 - 2:47
  • 2:47 - 2:48
  • 2:48 - 2:51
  • 2:51 - 2:53
  • 2:53 - 2:56
  • 2:56 - 2:59
  • 2:59 - 3:00
  • 3:00 - 3:03
  • 3:03 - 3:04
  • 3:04 - 3:05
  • 3:05 - 3:08
  • 3:08 - 3:10
  • 3:10 - 3:12
  • 3:12 - 3:14
  • 3:14 - 3:17
  • 3:17 - 3:19
  • 3:19 - 3:21
  • 3:21 - 3:22
  • 3:22 - 3:23
  • 3:23 - 3:24
  • 3:24 - 3:25
  • 3:25 - 3:27
  • 3:27 - 3:29
  • 3:29 - 3:30
  • 3:30 - 3:31
  • 3:31 - 3:33
  • 3:33 - 3:36
  • 3:36 - 3:38
  • 3:38 - 3:39
  • 3:39 - 3:41
  • 3:41 - 3:43
  • 3:43 - 3:45
  • 3:45 - 3:48
  • 3:48 - 3:50
  • 3:50 - 3:52
  • 3:52 - 3:54
  • 3:54 - 3:56
  • 3:56 - 3:58
  • 3:58 - 3:59
  • 3:59 - 4:01
  • 4:01 - 4:03
  • 4:03 - 4:04
  • 4:04 - 4:06
  • 4:06 - 4:08
  • 4:08 - 4:11
  • 4:11 - 4:12
  • 4:12 - 4:15
  • 4:15 - 4:16
  • 4:16 - 4:17
  • 4:17 - 4:19
  • 4:19 - 4:20
  • 4:20 - 4:22
  • 4:22 - 4:23
  • 4:23 - 4:26
  • 4:26 - 4:29
  • 4:29 - 4:31
  • 4:31 - 4:34
  • 4:34 - 4:36
  • 4:36 - 4:39
  • 4:39 - 4:41
  • 4:41 - 4:44
  • 4:44 - 4:46
  • 4:46 - 4:48
  • 4:48 - 4:49
  • 4:49 - 4:51
  • 4:51 - 4:53
  • 4:53 - 4:54
  • 4:54 - 4:56
  • 4:56 - 4:57
  • 4:57 - 4:59
  • 4:59 - 5:00
  • 5:00 - 5:02
  • 5:02 - 5:03
  • 5:03 - 5:04
  • 5:04 - 5:06
  • 5:06 - 5:08
  • 5:08 - 5:09
  • 5:09 - 5:12
  • 5:12 - 5:14
  • 5:14 - 5:15
  • 5:15 - 5:17
  • 5:17 - 5:19
Title:
CSS პოზიციები
Description:

more » « less
Video Language:
English
Duration:
05:20
Nina Nutsubidze edited Georgian subtitles for CSS positioning
Nina Nutsubidze edited Georgian subtitles for CSS positioning
Mari Telia edited Georgian subtitles for CSS positioning
Mari Telia edited Georgian subtitles for CSS positioning
Mari Telia edited Georgian subtitles for CSS positioning

Georgian subtitles

Revisions