Labaratoriya-1
Yoqtirgan klubingizni tanlangReal Madrid Barcelona Natija: Checkbox Birdaniga birnechta elementni tanlash uchun ishlatiladi: Kursdoshlaringizni tanlangElchin 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>
ul {
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> *{
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. 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. Yüklə 354,55 Kb. Dostları ilə paylaş:
|