7. Bloklar 2

Содержание

Слайд 2

Suzuvchi elementlar (Float)

float
Qiymatlari: left | right | none
kenglik (width) aniqlanishi kerak
float

Suzuvchi elementlar (Float) float Qiymatlari: left | right | none kenglik (width)
qo'llanilgan inline elementlar block elementlarga aylanadi
element joylashuvi bo'yicha teparoqqa chiqib ketmaydi
float qo'llanilmagan elementlar oddiy oqimda (flow) taqdim etiladi

QODIRBEK MAXAROV

Слайд 3

Suzuvchi elementlar (Float)

p {
    border: 2px red solid;
}
#float {
    float: left;
    width: 300px;
    margin: 1em;
    background: white;
}
...

If you ...


After ...


Remove...


Make sure...


As cold ...


QODIRBEK MAXAROV

Suzuvchi elementlar (Float) p { border: 2px red solid; } #float {

Слайд 4

Suzuvchi elementlarni tozalash

clear (faqatgina blokli elementlarga qo'llaniladi)
Qiymatlari: left | right | both

Suzuvchi elementlarni tozalash clear (faqatgina blokli elementlarga qo'llaniladi) Qiymatlari: left | right
| none
img {
    float: left;
    margin-right: .5em;
}
h2 {
    clear: left;
    margin-top: 2em;
}

QODIRBEK MAXAROV

Слайд 5

Bir nechta suzuvchi elementlar

[PARAGRAPH 1]


[P2]…


[P3]…


[P4]…


[P5]…


[P6]…


[P7]…


[P8]…


[P9]…


[P10]…


...
p.float {
    float: left;
    width: 200px;
    margin: 0px;
    background: #F2F5d5;
    color: #DAEAB1;
}

QODIRBEK MAXAROV

Elementlar bir qatorda chap tomondan joylashgan

Ammo joy yetarli

Bir nechta suzuvchi elementlar [PARAGRAPH 1] [P2]… [P3]… [P4]… [P5]… [P6]… [P7]…
bo'lmaganda elementlar pastdan va chapdan joylashadi

Слайд 6

Bir nechta suzuvchi elementlar


  


  Lorem ipsum dolor!



...
#header {
    background: #f2f5d5;
    border: 2px dashed green;
}
#header>div {
    float: left;
    width: 44%;
    padding: 5px;
    background-color: lightcyan;
    margin: 5px;
}

QODIRBEK MAXAROV

Bir nechta suzuvchi elementlar Lorem ipsum dolor! ... #header { background: #f2f5d5;

Слайд 7

Bir nechta suzuvchi elementlar


  


  Lorem ipsum dolor!



...
#header {
    ...
}
#header>div {
    ...
}
#header:after {
    content: " ";
    display: block;
    clear: both;
    background-color: #f2f5d5;
    border: 2px dashed green;
    height: 10px;
}

QODIRBEK MAXAROV

Bir nechta suzuvchi elementlar Lorem ipsum dolor! ... #header { ... }

Слайд 8

Joylashuv

position
Qiymatlari: static | relative | absolute | fixed | sticky
top, right, bottom,

Joylashuv position Qiymatlari: static | relative | absolute | fixed | sticky
left
Qiymatlari: uzunlik | foiz | auto
static – oddiy joylashuv sxemasi, elementlar oqimga qanday kelsa shunda joylashadi.
relative – nisbiy joylashuv, elementni oqimdagi dastlabki joylashuviga nisbatan harakatlantiradi, bunda elementning oddiy oqimdagi joylashuvdagi maydoni bo'sh maydonligicha qoldiriladi.
absolute – absolyut joylashtirilgan elementlar oqimdan olib to'liq olib tashlanadi va ko'rinish sohasi yoki o'zi joylashgan elementga nisbatan joylashadi.
fixed – element ko'rinish sohasiga (viewport) nisbatan joylashtiriladi va scrolling bo'lganida ham bitta joylashuvida qoladi.
sticky – foydalanuvchining scroll sohasiga nisbatan joylashadi, ya'ni scroll sohasi kelgunicha relative qiymatidagi kabi, scroll sohasi o'tib ketganda esa fixed qiymatidagi kabi ishlaydi.

QODIRBEK MAXAROV

Слайд 9

Nisbiy joylashuv (relative)

em {
    position: relative;
    top: 2em;
    left: 3em;
    background-color: fuchsia;
}

QODIRBEK MAXAROV

Nisbiy joylashuv (relative) em { position: relative; top: 2em; left: 3em; background-color: fuchsia; } QODIRBEK MAXAROV

Слайд 10

Absolyut joylashuv (absolute)

em {
    position: absolute;
    top: 2em;
    left: 3em;
    background-color: fuchsia;
}
* Absolyut element ierarxiya bo'yicha joylashuv o'rnatilgan elementga nisbatan absolyut

Absolyut joylashuv (absolute) em { position: absolute; top: 2em; left: 3em; background-color:
joylashadi, agar joylashuv o'rnatilmagan elementlar mavjud bo'lmasa html elementiga nisbatan joylashadi.

QODIRBEK MAXAROV

Слайд 11

Absolyut joylashuv (absolute)
p {
    position: relative;
    padding: 15px;
    background-color: #F2F5D5;
    border: 2px solid purple;
}
em {
    position: absolute;
    top: 2em;
    left: 3em;
    background-color: fuchsia;
}

QODIRBEK MAXAROV

Absolyut joylashuv (absolute) p { position: relative; padding: 15px; background-color: #F2F5D5; border:

Слайд 12

Absolyut joylashuv (absolute)

em {
    width: 200px;
    margin: 25px;
    position: absolute;
    top: 2em;
    left: 3em;
    background-color: fuchsia;
}

QODIRBEK MAXAROV

Absolyut joylashuv (absolute) em { width: 200px; margin: 25px; position: absolute; top:

Слайд 13

Joylashuv va o'lcham


   



...
div#A {
  position: relative;
  width: 600px;
  height: 300px;
  background-color: #C6DE89;
}
div#B {
  position: absolute;
  top: 25px;
  right: 50px;
  bottom: 75px;
  left: 100px;
  background-color: steelblue;
}

QODIRBEK MAXAROV

Joylashuv va o'lcham   ... div#A { position: relative; width: 600px; height:

Слайд 14

Joylashuv

img#A {
    position: absolute;
    top: 50%;
    left: 0%;
}
img#B {
    position: absolute;
    bottom: 0%;
    right: 0%;
}

QODIRBEK MAXAROV

Joylashuv img#A { position: absolute; top: 50%; left: 0%; } img#B {

Слайд 15

Joylashuv - fixed

body {
    background-color: bisque;
}
div.f {
    position: fixed;
    top: 50%;
    right: 0;
    background-color: blueviolet;
    width: 200px;
    height: 50px;
}

QODIRBEK MAXAROV

Joylashuv - fixed body { background-color: bisque; } div.f { position: fixed;

Слайд 16

Joylashuv - sticky

body {
    background-color: bisque;
}
div.f {
    position: sticky;
    top: 0;
    right: 0;
    background-color: blueviolet;
    width: 200px;
    height: 50px;
}

QODIRBEK MAXAROV

Joylashuv - sticky body { background-color: bisque; } div.f { position: sticky;

Слайд 17

Elementlar tartibi

z-index
Qiymatlari: son | auto




...

QODIRBEK MAXAROV

#A { 
  position: absolute;
  top: 175px;
  left: 200px;
}
#B { 
  position: absolute;
  top: 275px;
  left: 100px;
}
#C { 
  position: absolute;
  top: 325px;
  left: 250px;
} 

#A { 
  z-index: 100;
  position: absolute;
  top: 175px;
  left: 200px;
}
#B { 
  z-index: 5;
  position: absolute;
  top: 275px;
  left: 100px;
}
#C { 
  z-index: 1;
  position: absolute;
  top: 325px;
  left: 250px;
} 

Elementlar tartibi z-index Qiymatlari: son | auto ... QODIRBEK MAXAROV #A {

Слайд 18

Soya

box-shadow
Qiymatlari: none | h-offset v-offset [blur] [spread] [color] [inset];
.a1 {
    box-shadow: 6px 6px gray;
}
.a2 {
    box-shadow: 6px 6px 5px gray;
}
.a3 {
    box-shadow: 6px 6px 5px 10px gray;
}
.a4 {
    box-shadow: 6px 6px 5px gray inset;
}
.a5 {
    box-shadow: 6px 6px 5px gray inset, 
6px 6px 5px gray;
}

QODIRBEK MAXAROV

Soya box-shadow Qiymatlari: none | h-offset v-offset [blur] [spread] [color] [inset]; .a1

Слайд 19

Moslashuvchan elementlar - Flex

QODIRBEK MAXAROV

Moslashuvchan elementlar - Flex QODIRBEK MAXAROV

Слайд 20

Flex-konteyner

display: flex xossasi orqali o'rnatiladi.

QODIRBEK MAXAROV

flex-konteyner

flex-elementlar

Flex-konteyner display: flex xossasi orqali o'rnatiladi. QODIRBEK MAXAROV flex-konteyner flex-elementlar

Слайд 21

Flex elementlar yo'nalishi

flex-direction – asosiy o'q bo'yicha yo'nalishi
Qiymatlari: row | row-reverse |

Flex elementlar yo'nalishi flex-direction – asosiy o'q bo'yicha yo'nalishi Qiymatlari: row |
column | column-reverse

QODIRBEK MAXAROV

Слайд 22

Flex-konteyner ko'p qatorliligini boshqarish

QODIRBEK MAXAROV

flex-wrap
Qiymatlari: nowrap | wrap | wrap-reverse

Flex-konteyner ko'p qatorliligini boshqarish QODIRBEK MAXAROV flex-wrap Qiymatlari: nowrap | wrap | wrap-reverse

Слайд 23

Yo'nalish va ko'p qatorlilik

QODIRBEK MAXAROV

flex-flow
Qiymatlari: flex-direction flex-wrap
flex-flow: row-reverse wrap;

Yo'nalish va ko'p qatorlilik QODIRBEK MAXAROV flex-flow Qiymatlari: flex-direction flex-wrap flex-flow: row-reverse wrap;

Слайд 24

Elementlarni tartibi

QODIRBEK MAXAROV

order – flex elementlarning flex-konteynerdagi joylashish tartibini aniqlaydi
Qiymatlari: son

Elementlarni tartibi QODIRBEK MAXAROV order – flex elementlarning flex-konteynerdagi joylashish tartibini aniqlaydi Qiymatlari: son

Слайд 25

Moslashuvchanlik

QODIRBEK MAXAROV

flex
Qiymatlari: flex-grow flex-shrink flex-basis
flex-grow – flex konteyner bo'sh maydonni avlod elementlari

Moslashuvchanlik QODIRBEK MAXAROV flex Qiymatlari: flex-grow flex-shrink flex-basis flex-grow – flex konteyner
orasida taqsimlashi koeffitsienti
Qiymatlari: son
flex-shrink - flex elementni kichrayish koeffitsienti
Qiymatlari: son
flex-basis - bo'sh joy ajratilgunga qadar flex elementning boshlang'ich bazaviy o'lchamini aniqlaydi.
Qiymatlari: uzunlik | auto | content

Слайд 26

Tekishlash (alignment)

QODIRBEK MAXAROV

justify-content – asosiy o'q bo'yicha flex elementlardan qolgan bo'sh joyga

Tekishlash (alignment) QODIRBEK MAXAROV justify-content – asosiy o'q bo'yicha flex elementlardan qolgan
nisbatan tekishlash
Qiymatlari: flex-start | flex-end | center | space-between | space-around
Qo'llanilishi: flex konteynerga
#container {
    display: flex;
    justify-content: flex-start;
}

Слайд 27

Tekishlash (alignment)

QODIRBEK MAXAROV

justify-content – asosiy o'q bo'yicha tekishlash
Qiymatlari: flex-start | flex-end | center |

Tekishlash (alignment) QODIRBEK MAXAROV justify-content – asosiy o'q bo'yicha tekishlash Qiymatlari: flex-start
space-between | space-around
Qo'llanilishi: flex konteynerga
#container {
    display: flex;
    justify-content: flex-start;
}

Слайд 28

Tekishlash (alignment)

QODIRBEK MAXAROV

align-items – asosiy o'qga perpendikulyar o'q bo'yicha tekishlash
Qiymatlari: flex-start | flex-end | center | baseline | stretch
Qo'llanilishi:

Tekishlash (alignment) QODIRBEK MAXAROV align-items – asosiy o'qga perpendikulyar o'q bo'yicha tekishlash
flex konteynerga
#container {
    display: flex;
    flex-direction: row;
    height: 200px;
    align-items: flex-start;
}

Слайд 29

Tekishlash (alignment)

QODIRBEK MAXAROV

align-self – alohida olingan flex elementni flex konteyner uzunligi bo'yicha

Tekishlash (alignment) QODIRBEK MAXAROV align-self – alohida olingan flex elementni flex konteyner
tekishlash
Qiymatlari: auto | flex-start | flex-end | center | baseline | stretch
Qo'llanilishi: flex elementlarga
.box4 {
    align-self: flex-end;
}

Слайд 30

Tekishlash (alignment)

QODIRBEK MAXAROV

align-content – perpendikulyar o'q bo'yicha qo'shimcha bo'sh joy qolganda qatorlarni

Tekishlash (alignment) QODIRBEK MAXAROV align-content – perpendikulyar o'q bo'yicha qo'shimcha bo'sh joy
tekishlash
Qiymatlari: flex-start | flex-end | center | space-around | space-between | stretch
Qo'llanilishi: ko'p qatorli flex konteynerlarga
#container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 350px;
    align-items: flex-start;
}
.box {
    width: 25%;
}
- Предыдущая
Правила поведения в школе
Следующая -
Prava_i_svobody

Похожие презентации

Реки Дальнего Востока
Киев
От иконоскопа до плазмы
История создания тепловых машин
Требования к оформлению текста
Информационные и коммуникационные технологии
Семейное право
Презентация страхового продукта Зеленые каникулы (страхование от потери работы)
Возникновение баланса, первые записи о балансе в трактате Л. Пачоли
System of government of Lebanon
Магаданский заповедник
Образец решения шахматной задачи вида Мат в 1 ход
Насосы и электрооборудование насосов
Античный костюм Древней Греции
Тема презентации:Американский традиционный институционализм начала ХХ века. Условия появления институционализма и этапы
LIGA OF LEGENDS
Зарплатные ожидания работников
Сонная болезнь
Гондурас
Приемы развития ИСУД ученика средствами предмета
Презентация на тему Сьерра-Леоне
Конкурс чтецов. Карпова Ксения
Ask about the film “La La Land”
У меня растут года
Путешествие на поезде «Здоровье»
Психологические синдромы, как причина поведенческих нарушений. Дошкольный возраст
Виконала студентка Херсонського кооперативного економіко-правового коледжу групи П-291 Кулик Вікторія Херсон крізь призму розвитк
Презентация проекта 01.09.2011. Лаптев Владислав Владимирович 32 Уральский Федеральный Университет (УГТУ-УПИ), Физико-Технический факул