Qalqib chiquvchi blok (callout)
CSS yordamida diqqat xabarlarini (callout) yaratishni o‘rganing.
Diqqat xabari (callout)
Diqqat xabari (callout) ko‘pincha foydalanuvchini biror muhim narsa haqida xabardor qilish uchun sahifaning pastki qismida joylashtiriladi: maslahatlar va usullar, chegirmalar, bajarilishi kerak bo‘lgan amallar va boshqalar.
Diqqat xabarini yaratish
1-qadam) HTML qo‘shing:
Misol
<div class="callout">
<div class="callout-header">Callout Header</div>
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<div class="callout-container">
<p>Some text...</p>
</div>
</div>
Agar diqqat xabarini yopish imkoniyati kerak bo‘lsa, "meni bosganingizda ota elementimni yashir" degan onclick atributiga ega <span> elementini qo‘shing — ota element konteyner <div> (class="alert") hisoblanadi.
Maslahat: "x" harfini hosil qilish uchun "×" HTML belgisidan (entity) foydalaning.
2-qadam) CSS qo‘shing:
Diqqat xabari bloki va yopish tugmasiga uslub bering:
Misol
/* Callout box - fixed position at the bottom of the page */
.callout {
position: fixed;
bottom: 35px;
right: 20px;
margin-left: 20px;
max-width: 300px;
}
/* Callout header */
.callout-header {
padding: 25px 15px;
background: #555;
font-size: 30px;
color: white;
}
/* Callout container/body */
.callout-container {
padding: 15px;
background-color: #ccc;
color: black
}
/* Close button */
.closebtn {
position: absolute;
top: 5px;
right: 15px;
color: white;
font-size: 30px;
cursor: pointer;
}
/* Change color on mouse-over */
.closebtn:hover {
color: lightgrey;
}
O‘zingiz sinab ko‘ring »
Maslahat: Ogohlantirish xabarlari bilan ham tanishib chiqing.
Maslahat: Eslatmalar sahifasini ham ko‘rib chiqing.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!