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%;
}
Имя файла: 7.-Bloklar-2.pptx
Количество просмотров: 21
Количество скачиваний: 0
- Предыдущая
Правила поведения в школе
Следующая -
Prava_i_svobody

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

Mazda RХ-8
Бизнес-проект Б1Б2Б3 Банк Конечный спрос 111 10 111213,214,2 15,6 Сумма кредитов: 36,2 10% Сырье, материалы, условия производства 16,6.
Обстоятельство 5 класс
Основные нормативные правовые акты и руководящие документы МЧС России
Normal labour
Человеческие ресурсы как объект управления
island
Зрительный диктант11
Доставка грузов по России автомобильным транспортом Подготовила: Клеутина С. ДС-01
Презентация на тему Металлургия России
Учет основных средств
Основные виды памяти человека
Политические партии и движения
Автор разработки и презентации - учитель русского языка и литературы ЛЫСУНЬ ЛАРИСА НИКОЛАЕВНА ГС(к)ОУ «Специальная коррекционн
Символика Древнего Египта
Электронный портфолио как форма оценки профессиональной компетентности учителя
Презентация на тему Appetite comes with eating
Изображение человека. Древние цивилизации
Программа курса «Технологияразработки мультимедиа проектов»
Великие географические открытия
Презентация на тему ИЗВЕСТНЯК
Ориентирование и топография
Этнические общности
Техника движения (трава, осыпи, скалы) лекция для слушателей «Школы горного туризма базового уровня» лектор: Бер Александр Андр
Презентация на тему Импрессионизм в живописи
Открываем свой интернет-магазинв социальных сетях
Проблемы и перспективы развития «Детско-юношеской спортивной школы» во взаимодействии с учреждениями образования района
Все ли ты знаешь об овощах?