دراسة حالة W3.CSS
بناء موقع ويب سريع الاستجابة من الصفر
في هذا الفصل ، سننشئ موقع ويب W3.CSS سريع الاستجابة من البداية.
أولاً ، ابدأ بصفحة HTML بسيطة ، بإطار عرض أولي ورابط إلى W3.CSS.
مثال
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<h1>My first W3.CSS website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
ضع العناصر في حاويات
لإضافة هوامش ومساحات شائعة ، ضع عناصر HTML داخل الحاويات (<div class = "w3-container">)
افصل العنوان عن باقي المحتوى باستخدام عنصرين منفصلين من نوع <div>:
مثال
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
فئات اللون
تحدد فئات الألوان لون العناصر.
يضيف هذا المثال لونًا إلى عنصر <div> الأول:
مثال
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
فئات الحجم
تحدد فئات الحجم حجم النص للعناصر.
يضيف هذا المثال حجمًا إلى كلا عنصري الرأس:
مثال
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
استخدم العناصر الدلالية
إذا كنت ترغب في اتباع توصيات HTML5 الدلالية. افعل من فضلك!
لا يهم W3.CSS إذا كنت تستخدم <div> أو <header>.
مثال
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html>
تخطيط متجاوب متعدد الأعمدة
باستخدام W3.CSS ، من السهل إنشاء تخطيط متجاوب متعدد الأعمدة.
ستعيد الأعمدة ترتيب نفسها تلقائيًا عند عرضها على أحجام شاشات مختلفة.
بعض قواعد الشبكة:
- ابدأ بفئة صف <div class = "w3-row-padding">
- استخدم الفئات المحددة مسبقًا مثل "w3-third" لإنشاء أعمدة الشبكة بسرعة
- ضع محتوى النص داخل أعمدة الشبكة
يوضح هذا المثال كيفية إنشاء ثلاثة أعمدة متساوية العرض:
مثال
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
يوضح هذا المثال كيفية إنشاء أربعة أعمدة متساوية العرض:
مثال
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
أعمدة ذات عروض مختلفة
ينشئ هذا المثال تخطيطًا من ثلاثة أعمدة حيث يكون العمود في المنتصف أعرض من العمود الأول والأخير:
مثال
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
أشرطة التنقل
شريط التنقل هو رأس تنقل يتم وضعه في أعلى الصفحة.
مثال
<nav class="w3-bar w3-black w3-large">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a
href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</nav>
التنقل في الصفحة
مع التنقل الجانبي ، لديك عدة خيارات:
- اعرض دائمًا جزء التنقل على يسار محتوى الصفحة.
- استخدام التنقل الجانبي القابل للطي "التلقائي بالكامل" سريع الاستجابة.
- افتح جزء التنقل فوق الجزء الأيسر من محتوى الصفحة.
- افتح جزء التنقل فوق محتوى الصفحة بالكامل.
- حرك محتوى الصفحة إلى اليمين عند فتح جزء التنقل.
- اعرض جزء التنقل على الجانب الأيمن بدلاً من الجانب الأيسر
يفتح هذا المثال جزء التنقل فوق الجزء الأيسر من محتوى الصفحة:
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none"
id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a
class="w3-bar-item w3-button" href="#">Link 2</a>
<a
class="w3-bar-item w3-button"
href="#">Link 3</a>
</nav>
تُستخدم JavaScript لفتح القائمة وإخفائها:
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}