Sahifalash uslublari
Bu sahifa hover effektlari, o‘tishlar va nonushta xaritasi (breadcrumbs)ni o‘z ichiga olgan ilg‘or sahifalash uslublarini yoritadi.
Hover effektli sahifalash
Foydalanuvchi sichqonchasini olib borganda har bir sahifa havolasining fon rangini o‘zgartirish uchun :hover selektoridan foydalaning:
Misol
Hover effekti bilan sahifalash:
.pagination li a:hover:not(.active) {
background-color: lightgray;
}
O‘zingiz sinab ko‘ring »
Hover paytidagi o‘tish effekti
Hover paytida o‘tish effekti yaratish uchun sahifa havolalariga transition xossasini qo‘shing:
Misol
Hover paytida o‘tish effekti qo‘shish:
.pagination li a {
display: block;
padding: 8px 12px;
text-decoration: none;
border: 1px solid gray;
color:
black;
margin: 0 4px;
border-radius: 5px;
transition: background-color 1s;
}
O‘zingiz sinab ko‘ring »
Kichik yo‘l (breadcrumb) sahifalash
Sahifalashning yana bir turi — "breadcrumb" deb ataladigan navigatsiya:
Misol
Nonushta xaritasi (breadcrumb) yaratish:
ul.breadcrumb {
padding: 8px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li a {color: green;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!