لوحات W3.CSS
أنا فريق.
أنا فريق.
أنا حاوية.
أنا حاوية.
فئة اللوحة
تضيف فئة اللوحة w3 هامشًا علويًا وسفليًا يبلغ 16 بكسل وحشوة يسار ويمين تبلغ 16 بكسل لأي عنصر HTML.
مثال
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
لوحات للملاحظات
تعتبر فئة w3-panel مثالية لعرض الملاحظات.
غالبًا ما يتم عرض الملاحظات بلون باهت:
لندن هي المدينة الأكثر اكتظاظًا بالسكان في المملكة المتحدة ، حيث يبلغ عدد سكانها أكثر من 9 ملايين نسمة.
مثال
<div class="w3-panel w3-pale-green">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
لمعرفة المزيد حول W3.CSS Notes ، يرجى زيارة فصل W3.CSS Notes .
لوحات للاقتباسات
تعتبر فئة w3-panel مثالية لعرض عروض الأسعار.
مثال
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
لمعرفة المزيد حول W3.CSS Quotes يرجى زيارة فصل W3.CSS Quotes .
لوحات للتنبيهات
تعتبر فئة w3-panel مثالية لعرض التنبيهات.
غالبًا ما يتم عرض التنبيهات باستخدام لون قوي:
خطر!
غالبًا ما يشير اللون الأحمر إلى موقف خطير أو سلبي.
مثال
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or negative situation.</p>
</div>
لمعرفة المزيد حول تنبيهات W3.CSS ، يرجى زيارة فصل تنبيهات W3.CSS .
اللوحات كبطاقات
لندن هي المدينة الأكثر اكتظاظًا بالسكان في المملكة المتحدة ، حيث يبلغ عدد سكانها أكثر من 9 ملايين نسمة.
مثال
<div class="w3-panel w3-blue w3-card-4">
<p>London is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
لوحات مدورة
لندن هي المدينة الأكثر اكتظاظًا بالسكان في المملكة المتحدة ، حيث يبلغ عدد سكانها أكثر من 9 ملايين نسمة.
مثال
<div class="w3-panel w3-blue w3-round-xlarge">
<p>London is the most populous city in the United Kingdom,
with
a metropolitan area of over 9 million inhabitants.</p>
</div>
إخفاء (إغلاق) لوحة
إخفاء لوحة أمر سهل.
انقر فوق X لإغلاق هذه اللوحة.
انقر فوق X لإغلاق هذه اللوحة.
مثال
<div class="w3-panel
w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>
عرض (فتح) لوحة
عرض اللوحة (المخفية) سهل:
مثال
<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Show
panel</button>
<div id="id01" class="w3-panel w3-green
w3-display-container" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>