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

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

Автор жития Евфросина Синозерского как древнерусский книжник
Gоршки от Vовочки. Проект
EA-OD19
Юридическая ответственность за нарушения градостроительного законодательства. Лекция 10
ПРАВИЛА ПОВЕДЕНИЯ В СИТУАЦИЯХ КРИМИНОГЕННОГО ХАРАКТЕРА
ПРАВИЛЬНЫЙ ДИАГНОЗ- ЭФФЕКТИВНОЕ ЛЕЧЕНИЕ ПРИГЛАШАЕТ ОТДЕЛЕНИЕ ФУНКЦИОНАЛЬНОЙ ДИАГНОСТИКИ
Презентация на тему Водоросли 7 класс
Влага в атмосфере
Презентация на тему Основные виды сложных предложений
Strategija razvoja turizma u Rijeci
Художники XIX (19) века
Приготовление пончиков
От Босха до Дали
А. Платонов «Волшебное кольцо»
Интересные факты компании Paulig
Чужие долги и как их можно использовать. Законы о несостоятельности и банкротстве
Квадратное уравнение и его корни
Как быть мудрым родителем в безумном мире Божий метод обучения ребенка послушанию ребенка послушанию Занятие 4.
Анализ факторов внешней среды. Проверка стратегии на эффективность.
Компьютерная графика. Виды графики
Яркие представители мира динозавров
Презентация на тему Биологические особенности раннецветущих растений
Архитектурный ансамбль Московского Кремля
Культура Древнего Рима
Бернар Люке генеральный директор
Исследование и разработка механизма пересматриваемых рассуждений для систем поддержки принятия решений
Цветные капельки
Презентация на тему Планета знаний