Labaratoriya-1

Download 354.55 Kb.

bet	2/3
Sana	04.04.2023
Hajmi	354.55 Kb.
	#1327243

1 2 3

Kursdoshlaringizni tanlang

Yoqtirgan klubingizni tanlang

Real Madrid
Barcelona

Natija:

Checkbox
Birdaniga birnechta elementni tanlash uchun ishlatiladi:

Kursdoshlaringizni tanlang

Elchin
Muslim
Ronaldo
Messi

Natija:

Submit
Forma to'ldirilgandan keyin barcha ma'lumotni serverga yoki ko'rsatilgan url ga jo'natish uchun ishlatiladigan tugma hisoblanadi.

Username:

Natija:

HTML ni CSS ga bog’lash
HTML ni CSS ga 3 xil usulda bog’laymiz.
Inline CSS – o’rnatilgan CSS-HTML element ichidagi style atributida CSS xususiyatlarini qo’llash maqsadida foydalaniladi:

Example

Internal CSS – Veb-sahifaning HEAD qismida style elementi Ichida CSS xususiyatlarni berish:

External CSS – Veb-sahifaning HEAD qismida tashqi CSS faylga murojaat qilinadi. Tashqi CSS fayl .css kengaytmaga ega bo’ladi.

Font awesome va Bootstrapdan ikonkalar joylashtirish
DOCTYPE html>

Document

Home

About

Contact

Settings

Quit

ul {
list-style: none;

background-color: black;
}
ul li {
display: inline-block;
margin: 0 25px;
}
a{
font-size: 40px;
text-decoration:none;
color: chartreuse;
}

Natija:

Gorizontal , vertical , ichma-ish (multi menu) menular yaratish
DOCTYPE html>

Document

*{
padding: 0;

margin: 0;
}
nav {
width: 200px;
}
nav ul {
list-style: none;
width: 100%;
}
nav a {
display: block;
background-color: #333;
text-decoration: none;
color: #fff;
text-align: center;
font-size: 18px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 14px 0;
font-weight: 600;
}
nav a:hover{
background-color:gray;
}
nav li {
position: relative;
}
ul li:hover ul {
visibility: visible;
opacity: 1;
}
.menu {
position: absolute;
visibility: hidden;
opacity: 0;
left: 200px;
top: 0;
}

Joylashish (position)
Position - elementni joylashish turini aniqlab berish uchun ishlatiladigan xossa.
static - HTMLda har bir element boshida shu qiymatga ega bo'ladi
relative - element o'zini hozirgi (normal) joylashuviga nisbatan joylashadi.
fixed - Fixed - element "viewport"ga nisbatan joylashadi. Bu degani, u har doim o'zini joyida qoladi va scroll paytida joyini o'zgartirmaydi
absolute - Absolute - element o'zining eng yaqin joylashtirilgan (positioned) ajdod (ancestor) elementiga nisbatan joylashadi. Joylashtirilgan degani, position xossasi static qiymatdan boshqa qiymatga ega bo'lgan elementga aytiladi
sticky - Sticky - element "scroll"ning qayerda joylashganiga qarab joylashadi. Bu qiymat relative va fixed qiymatlarini o'zida saqlaydi va "scroll"ni qayerda joylashganiga qarab shu ikki qiymatdan birini o'ziga oladi
Statikga misol:
DOCTYPE html>

position: static;

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

This div element has position: static;

Natija:

Relativga misol:
DOCTYPE html>

position: relative;

An element with position: relative; is positioned relative to its normal position:

This div element has position: relative;

Natija:

Fixedga misol:
DOCTYPE html>

position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:

This div element has position: fixed;

Natijasi:

Absolutega misol:
DOCTYPE html>

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):

This div element has position: relative;

This div element has position: absolute;

Natijasi:

Stickyga misol:
DOCTYPE html>

Try to scroll inside this frame to understand how sticky positioning works.

I am sticky!

In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.

Scroll back up to remove the stickyness.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Download 354.55 Kb.

Do'stlaringiz bilan baham:

Natija:

Radio Button
RadioButton birnechta elementdan bittasini tanlash uchun ishlatiladi:

1 2 3