6. Bloklar 2

Март 16, 2021

Содержание

2. Suzuvchi elementlar (Float) float Qiymatlari: left | right | none kenglik (width) aniqlanishi kerak float qo'llanilgan
3. Suzuvchi elementlar (Float) p { border: 2px red solid; } #float { float: left; width: 300px;
4. Suzuvchi elementlarni tozalash clear (faqatgina blokli elementlarga qo'llaniladi) Qiymatlari: left | right | both | none
5. Bir nechta suzuvchi elementlar [PARAGRAPH 1] [P2]… [P3]… [P4]… [P5]… [P6]… [P7]… [P8]… [P9]… [P10]… ...
6. Bir nechta suzuvchi elementlar Lorem ipsum dolor! ... #header { background: #f2f5d5; border: 2px dashed green;
7. Bir nechta suzuvchi elementlar Lorem ipsum dolor! ... #header { ... } #header>div { ... }
8. Joylashuv position Qiymatlari: static | relative | absolute | fixed | sticky top, right, bottom, left
9. 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
11. Absolyut joylashuv (absolute) p { position: relative; padding: 15px; background-color: #F2F5D5; border: 2px solid purple; }
12. Absolyut joylashuv (absolute) em { width: 200px; margin: 25px; position: absolute; top: 2em; left: 3em; background-color:
13. Joylashuv va o'lcham   ... div#A { position: relative; width: 600px; height: 300px; background-color: #C6DE89; }
14. Joylashuv img#A { position: absolute; top: 50%; left: 0%; } img#B { position: absolute; bottom: 0%;
15. Joylashuv - fixed body { background-color: bisque; } div.f { position: fixed; top: 50%; right: 0;
16. Joylashuv - sticky body { background-color: bisque; } div.f { position: sticky; top: 0; right: 0;
17. Elementlar tartibi z-index Qiymatlari: son | auto ... QODIRBEK MAXAROV #A { position: absolute; top: 175px;
18. Soya box-shadow Qiymatlari: none | h-offset v-offset [blur] [spread] [color] [inset]; .a1 { box-shadow: 6px 6px
20. Скачать презентацию

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

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

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 elementlarni tozalash
clear (faqatgina blokli elementlarga qo'llaniladi)
Qiymatlari: left | right | both

| none
img {
    float: left;
    margin-right: .5em;
}
h2 {
    clear: left;
    margin-top: 2em;
}

QODIRBEK MAXAROV

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

bo'lmaganda elementlar pastdan va chapdan joylashadi

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 {
    ...
}
#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 { ... }

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

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

Слайд 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

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

Слайд 12

Absolyut joylashuv (absolute)
em {
    width: 200px;
    margin: 25px;
    position: absolute;
    top: 2em;
    left: 3em;
    background-color: fuchsia;
}
QODIRBEK MAXAROV

Слайд 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:

6. Bloklar 2

Содержание

Слайд 2

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

Слайд 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

Слайд 4

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

Слайд 5

Слайд 6

Bir nechta suzuvchi elementlar

Lorem ipsum dolor!

Слайд 7

Bir nechta suzuvchi elementlar

Lorem ipsum dolor!

Слайд 8

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

Слайд 9

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

Слайд 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

Слайд 12

Absolyut joylashuv (absolute)
em {
    width: 200px;
    margin: 25px;
    position: absolute;
    top: 2em;
    left: 3em;
    background-color: fuchsia;
}
QODIRBEK MAXAROV

Слайд 13

Joylashuv va o'lcham

Слайд 14

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

Слайд 15

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

Слайд 16

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

Слайд 17

Слайд 18

6. Bloklar 2

Содержание

Suzuvchi elementlar (Float)floatQiymatlari: left | right | none kenglik (width) aniqlanishi kerakfloat

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 elementlarni tozalashclear (faqatgina blokli elementlarga qo'llaniladi)Qiymatlari: left | right | both

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 MAXAROVElementlar bir qatorda chap tomondan joylashganAmmo joy yetarli

Bir nechta suzuvchi elementlar Lorem ipsum dolor!

Bir nechta suzuvchi elementlar Lorem ipsum dolor!

JoylashuvpositionQiymatlari: static | relative | absolute | fixed | stickytop, right, bottom,

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

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)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)em { width: 200px; margin: 25px; position: absolute; top: 2em; left: 3em; background-color: fuchsia;}QODIRBEK MAXAROV

Joylashuv va o'lcham

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

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

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

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

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

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 elementlarni tozalash
clear (faqatgina blokli elementlarga qo'llaniladi)
Qiymatlari: left | right | both

Bir nechta suzuvchi elementlar

Lorem ipsum dolor!

Bir nechta suzuvchi elementlar

Lorem ipsum dolor!

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

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

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)
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)
em {
width: 200px;
margin: 25px;
position: absolute;
top: 2em;
left: 3em;
background-color: fuchsia;
}
QODIRBEK MAXAROV

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

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

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