بناء موقع ويب الاستجابة من الصفر
في هذا الفصل سوف نبني موقع على شبكة الانترنت تستجيب 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="http://www.w3ii.com/lib/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 الطبقة = "W3-الحاويات">)
لتجعل من الممكن تحديد فئات منفصلة لرؤوس. فصل الرأس عن بقية محتوى، وذلك باستخدام عنصر منفصل <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 sage
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> أو <رأس>. |
|---|
مثال
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3ii.com/lib/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 الطبقة = "W3-صف الحشو">
- استخدام فئات محددة مسبقا مثل "ثالث W3" لجعل بسرعة أعمدة الشبكة
- وضع محتوى النص داخل أعمدة الشبكة
هذا المثال يوضح كيفية إنشاء ثلاثة أعمدة متساوية العرض:
مثال
<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-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> انها محاولة لنفسك » الإنتقال الجانب
مع التنقل الموجود على الجانب، لديك عدة خيارات:
- عرض دائما جزء التنقل إلى اليسار من محتوى الصفحة.
- فتح جزء التنقل، ويخفي الجزء الأيسر من محتوى الصفحة.
- فتح جزء التنقل، إخفاء كل من محتوى الصفحة.
- تحويل محتوى الصفحة إلى اليمين، عند فتح جزء التنقل.
يفتح هذا المثال جزء التنقل، إخفاء جزء من محتوى الصفحة:
<nav class="w3-sidenav w3-black w3-card-2" style="display:none">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
<a href="#">Link 4</a>
<a
href="#">Link 5</a>
</nav>
يستخدم جافا سكريبت لفتح وإخفاء القائمة:
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
انها محاولة لنفسك »