أقسام كاملة العرض باستخدام HTML5 وCSS3 (مستجيبة)

https://stackoverflow.com//questions/25076798

02-01-2020
|

سؤال

أنا جديد نسبيًا على StackOverflow وأواجه بعض الصعوبات أثناء إنشاء صفحة ويب

لذا فإن ما أحتاجه هو موقع ويب مكون من صفحة واحدة مقسم إلى أقسام مختلفة، وهي عبارة عن أقسام كاملة العرض (أي عرض الشاشة بنسبة 100%) ومتتالية بألوان خلفية مختلفة.

المشكلة التي أواجهها هي أن divs لا تشغل العرض الكامل للشاشة ولها مساحة بيضاء ليس فقط على الجوانب، ولكن أيضًا بين قسمين
أيضًا، عندما يقل حجم النافذة، تزداد الفجوة بين div

والنتيجة المرجوة كما هو ملاحظ في المواقع التالية:

http://classrebels.com/
http://startbootstrap.com/templates/freelancer/

الكود الذي أستخدمه هو كما يلي:

ط) HTML:

    <html>
    <body>
    <div class="full" id="one">
    <h1>Just something</h1>
    </div>
    <div class="full" id="two">
    <h1>Just something</h1>
    </div>
    </body>
    </html>

ثانيا) CSS:

    .full{
    width= 100%;
     }
    #one{
     background-color: #fff;
    }  
    #two{
     background-color: #f13;
    }

من فضلك قل لي أين أخطأ

المحلول

نصائح أخرى

كمان تجريبي

لإزالة الهامش/المساحة الافتراضية في إطار العرض (الذي يمنحك المسافة البيضاء)، تحتاج إلى إضافة CSS التالي:

html, body{
  width:100%; /* <-- also a good idea to add */
  margin:0;
  padding:0;
}

والتغيير:

.full{
  width= 100%;
}

ل:

.full{
  width:100%;
}

يتم فصل أزواج خصائص/قيمة نمط CSS بنقطتين : وليس متساويا =

هل حاولت إعداد الهامش والحشو 0 بالكامل وفي علامة الجسم أيضا مثل

giveacodicetagpre.

وبالمثل، فإن عنوانك يأخذ أيضا بعض الهامش، لذا تعيين هامش العنوان كما هو مطلوب. للأفضل يرجى الرجوع إلى هذا الرابط w3schools

عليك تغيير الهوامش الهيغفية والجسم، لأنها تحتوي على قيم افتراضية في المتصفح. لقد قمت بإصلاحها لك في هذا الكمان:

giveacodicetagpre.

http://jsfiddle.net/pwlgb/

المشكلة هي أنك لا تعطي لون الخلفية كله ولكن فقط النص.

إذا قمت بإجراء حد أن ترى الحجم الحقيقي للحف وسيقوم بملء الدف بأكمله مع اللون.

تحقق من الكمان الذي قمت به لهذا

giveacodicetagpre.

http://jsfiddle.net/2h4kq/

يمكنك ضبط الحدود إلى 0px لذلك لا يظهر وسيعطيك النتيجة الصحيحة

العرض التوضيحي الذي ترتبط أنه لا يستخدم Divs العرض الكامل.أنها تستخدم فعلا عنصر العرض الكامل للعرض الذي يحتوي على لون الخلفية.

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

giveacodicetagpre.

عينة من CSS:

giveacodicetagpre.

قم بتنزيل هذا القالب، ويستخدم bootstrap ، والتشغيل معها للحصول على الشكل الذي تريده.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow