كيفية إنشاء: إنشاء رسالة النشرة

تعلم كيفية إنشاء رسائل النشرة باستخدام CSS (رسالة النشرة).

إنشاء رسالة النشرة

الخطوة الأولى - إضافة HTML:

<div class="callout">
  <div class="callout-header">عنوان رسالة النشرة</div>
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  <div class="callout-container">
    <p>نص...</p>
  </div>
</div>

إذا كنت ترغب في إضافة وظيفة إغلاق رسالة النشرة، أضف <span> العنصر، وضبطه على onclick خصائص، التي تعني "إذا قمت بالنقر على، اخفاء العنصر الأب لى، أي <div class="callout">。

إشارة:استخدام رمز HTML "&:times;"إنشاء حرف "x"."

الخطوة الثانية - إضافة CSS:

إعداد النمط لنافذة رسالة النشرة و زر الإغلاق:

/* نافذة رسالة النشرة - ثابتة في أسفل الصفحة */
.callout {
  position: fixed;
  أسفل: 35px;
  يمين: 20px;
  م margins-left: 20px;
  أقصى عرض: 300px;
{}
/* عنوان رسالة النشرة */
.callout-header {
  ملء: 25px 15px;
  لون الخلفية: #555;
  حجم الخط: 30px;
  لون: أبيض;
{}
/* وحدة رسالة النشرة / الجسم */
.callout-container {
  ملء: 15px;
  لون الخلفية: #ccc;
  لون: أسود
{}
/* زر الإغلاق */
.closebtn {
  position: absolute;
  أعلى: 5px;
  يمين: 15px;
  لون: أبيض;
  حجم الخط: 30px;
  cursor: pointer;
{}
/* تغيير اللون عند مرور الفأرة */
.closebtn:hover {
  لون: ضوء الرمادي;
{}

جربها بنفسك

الصفحات ذات الصلة

دليل:كيفية إنشاء رسالة تحذير

دليل:كيفية إنشاء وصفة