اللوائح التجارية وأماكن العمل

تقدم برنامج Tableless CSS Layout Tutorial

قم بإنشاء تخطيطات CSS ثابتة أو مرنة لمواقع الويب والمدونات والبرامج. يبدأ التنسيق الأساسي لتخطيط CSS مع إعدادات الحاوية ، ثم الرأس ، وقسم تنقل أفقي ، وقسم المحتوى الرئيسي ، وشريط جانبي وتذييل الصفحة. يتم استخدام حاويات DIV لوضع الأقسام المختلفة ، ثم يتم تخصيص كل قسم بسمات مثل الألوان والخطوط. استخدم Notepad أو محرر نص آخر لإنشاء نص تخطيط CSS.

حاوية DIV

1.

افتح المفكرة الجديدة أو وثيقة محرر نصوص أخرى. احفظه كملف TXT باسم "csslayout.txt".

2.

إنشاء تخطيط حاوية DIV الأساسي عن طريق كتابة ترميز HTML التالي:

3.

اكتب عنوان العنوان وأي علامات رأس بين علامتي "" و "". يجب أن يشبه الترميز هذا:

موقعي الموقع

4.

إضافة قائمة غير مرتبة "

    و "
"العلامات بين علامتي" "و" ". كل منها بنمط"
  • "في القائمة غير المرتبة بأسماء العناصر في شريط التنقل. يشبه الترميز هذا:

    • البند الأول
    • البند الثاني

        • 5.

        أضف عناصر علامة العنوان والفقرة داخل علامتي "" و "". هذا هو المحتوى الرئيسي. يشبه الترميز هذا:

        رأس المحتوى الرئيسي

        هنا هو المحتوى الخاص بي للقسم الرئيسي الكبير.

        أضف نفس رأس المحتوى وتشفير المحتوى داخل العلامتين "و" ".

        6.

        أضف نص التذييل ضمن علامتي "و" "". يشبه الترميز هذا:

        حقوق الطبع والنشر موقعي. كل الحقوق محفوظة.

        يتم إنشاء محتوى HTML حاوية DIV.

        سمات CSS

        1.

        اكتب مسافة أسفل العلامة "" النهائية لحاوية DIV. اكتب اسم كل "" من حاوية DIV متبوعة بقوسين CSS. يجب أن يكون لكل اسم "#" في المقدمة. يشبه الترميز هذا:

        الجسم { }

        لف {

        }

        العنوان {

        }

        2.

        قم بتعيين العرض والموضع لكل عنصر CSS. عرض "#wrap" هو عرض الموقع بالكامل وعرض عروض "#sidebar" و "#main" معاً يساوي العرض بالكامل. استخدم "float: left / right؛" السمة لتعويم المحتوى الرئيسي والشريط الجانبي إلى اليسار أو اليمين. مثال على هذا الشكل:

        الأساسية {

        العرض: 600 بكسل ؛ تعويم: يمين }

        3.

        عيّن الهوامش والحشو ولون الخلفية ولون النص لكل عنصر CSS. استخدم "الهوامش: Xpx Xpx Xpx Xpx؛" و "padding: Xpx Xpx Xpx Xpx؛" الترميز. أضف "background: #XXXXXX؛" و "اللون: #XXXXXX؛" كذلك. مثال على هذا الشكل:

        العنوان { 

        width: 900px; float: left; margins: 0px 5px 15px 20px; padding: 0px 0px 5px 5px; color: #eeeeee; background: #FFFFFF;

        }

        4.

        إزالة الترميز "عائم" من تذييل الصفحة واستخدم "clear: both؛" لدفع التذييل لأسفل إلى أسفل الموقع. يبدو مشابهًا لهذا:

        تذييل {

        العرض: 900 بكسل ؛ واضحة على حد سواء؛ الخلفية: #eeeeee}

        5.

        قسّم العنصر "#nav {" إلى عنصرين منفصلين: "#nav ul {" و "#nav li {" لتصميم كل عنصر. أضف "list-style: none؛" إلى ترميز العنصر "#nav ul" و "display: none؛" إلى الترميز #nav li. يبدو مثل هذا:

        nav ul {

        نمط القائمة: لا شيء ؛ }

        nav li {

        عرض لا شيء؛ }

        يجعل هذا الإصلاح شريط التنقل أفقيًا ولا يعرض شريط التنقل كقائمة مرتبة.

        تقدم المغلق

        1.

        افصل عنصر العنوان وقم بتكوينه باستخدام سمات CSS. على سبيل المثال ، لتغيير عنوان العنوان ، تبدو الشفرة كالتالي:

        header h2 {

        اللون: # 000000؛ font-family: Arial، Trebuchet، sans-serif؛ }

        2.

        روابط النمط في النص بلون مختلف وجعلها تحته. يمكن أن تكون السمة "تحويل النص" تحتها ، أو كبيرة أو صغيرة. على سبيل المثال ، يشبه الترميز هذا:

        الرئيسي {

        اللون: # 000000؛ زخرفة النص: تسطير؛ }

        3.

        أضف حدًا إلى أي عنصر باستخدام "الحد: Xpx #XXXXXX؛" صفة، عزا. يمكن أن تكون الحدود في أعلى "الحدود" أو أسفل "الحد السفلي".

        4.

        حدد خطًا باستخدام "font-family: font؛" صفة، عزا. تغيير حجم الخط باستخدام السمة "font-size: Xpx؛ التغيير إلى غامق أو مائل باستخدام السمة" font-weight: bold / italics؛ "على سبيل المثال:

        الرئيسية ص { 

         font-family: Times New Roman, serif; font-size: 12px; font-weight: italics;

        }

        الأشياء المطلوبة

        • المفكرة أو محرر نص آخر

        تلميح

        • ضع المخطط المطلوب قبل إنشاء الشفرة كمرئية مفيدة.

    • none

    موصى به