Navigatsiya yo‘li (breadcrumbs)
CSS yordamida navigatsiya yo‘li (breadcrumb) yaratishni o‘rganing.
Navigatsiya yo‘li (breadcrumb) qanday yaratiladi
Navigatsiya yo‘li (breadcrumb) foydalanuvchi o‘tgan har bir oldingi sahifaga qaytish havolalarini taqdim etadi va uning veb-saytdagi joriy o‘rnini ko‘rsatadi.
1-qadam) HTML qo‘shing:
Misol
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Summer 15</a></li>
<li>Italy</li>
</ul>
2-qadam) CSS qo‘shing:
Misol
/* Style the list */
ul.breadcrumb {
padding: 10px 16px;
list-style: none;
background-color: #eee;
}
/* Display list items side by side */
ul.breadcrumb li {
display: inline;
font-size: 18px;
}
/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
/* Add a color to all links inside the list */
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}
/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}
O‘zingiz sinab ko‘ring »
Sahifalash haqida ko‘proq bilish uchun CSS sahifalash (pagination) darsligimizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!