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
- Предыдущая
Календарь макет
Следующая -
Проект пластилиновый мультик Буравлева — копия

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

Мой профессиональный выбор
Рыцари
Опытные образцы пневматических тренажеров для использования в тренировочном процессе спортсменов паралимпийских видов спорта
MARKETING course Instructor
Учетная норма площади жилья по договору социального найма
Великие реформы Александра II (1855 -1881)
Природа. Фото
Дни воинской славы
Загадки «Лингвистических сказочек»
Четвёрка отраслей — металлургия, машиностроение, электроэнергетика и химическая промышленность
Презентация на тему Виды параллелограмма
Открытый урок в 5 «б» классе
ДИДАКТИЧЕСКИЙ МАТЕРИАЛ ПО ТЕМЕ «ВНЕШНЯЯ ПАМЯТЬ КОМПЬЮТЕРА » Основные устройства внешней памяти Технические характеристики Спра
Шаблон проектная неделя
UFO LED High Bay Lights
Презентация на тему Материя
Гражданская война в США вторая половина XIX в.
Слайд 1 из 19 «1С-Рарус». Слайд 2 из 19 О компании «1С-Рарус» - совместное предприятие фирм «1С» и «Рарус», работающее на рынке автоматиза
Презентация на тему Внутреннее строение млекопитающих
Ранние дезадаптивные схемы. Диагностика Джеффри Янг
Фотосъемка цифровым микроскопом
Презентация на тему Жизнь и творчество Бетховена
Результати опитування: «Оцінка стану свободи слова в місті Чернівці: погляд ЗМІ»
Первый подологический центр г. Казани!
Школьный референдум
Всемирный потоп
Презентация на тему Зарядка для глаз
Внешние параметры исследования личности