6. 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
Имя файла: 6.-Bloklar-2.pptx
Количество просмотров: 31
Количество скачиваний: 0
- Предыдущая
Календарь макет
Следующая -
Проект пластилиновый мультик Буравлева — копия

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

Финансовый контроль
Презентация на тему "Приёмы рефлексии учащихся на уроках в начальной школе" - скачать презентации по Педагогике
 
Special Relativity
ТЕМА!!!!4
Театрально-игровая деятельность - как средство развития творческих способностей детей дошкольного возраста
Определение оптимальных параметров технологического процесса термической обработки мелкосортового пруткового проката
Продажи на автопилоте
Кроссворды по математике, 3 класс
Роль корпоративного университета в формировании и развитии корпоративной культуры
Губернаторский кадровый peзерв
American system of government
Признаки объектов
Жизнь одна
Цель: расширить представления о семье, ее обязанностях, традициях, реликвиях; развивать внимание, мышление, воображение, реч
Алюминирование стального профиля Рига, Латвия
Стили архитектуры
Карвинг на уроках кулинарии
МНОГООБРАЗИЕ СТРАН МИРА
Оператор по сервисным инструментам
Внутреннее строение млекопитающих
Презентация на тему Загрязнение водной среды
Коммерческое предложение упаковка багажа
Суп-лапша на мясном бульоне
Железобетонные и каменные конструкции. Лекции 1, 2
Краевой семинар«Внедрение цифровых образовательных ресурсов в учебно-воспитательный процесс»
Макроэволюция
Типология тайм менеджмента