مساعدة في التصميم الصفحة

https://stackoverflow.com/questions/1842853

12-09-2019
|

سؤال

لدي الصورة التالية التي يتم وضعها في الجزء العلوي من الصفحة.

<body>
    <form id="form1" runat="server" >
    <div>
        <div>
            <img src="Images/top.png" width="100%" height="115px" alt="top.png" />
        </div>
    </div>
    </form>
</body>

المشكلة هي أن هناك القليل من الحشو الذي يظهر على اليسار والأعلى واليمين وأسفل الصورة. لا أريد أن الحشو هناك. بمعنى آخر، أريد أن تكون الصورة تتدفق مع اليسار وأعلى الصفحة، ولقد تمتد عبر عرض الصفحة. كيف يمكنني تحقيق ذلك بأسلوب؟

المحلول

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

    body { margin: 0; border: 0 }

نصائح أخرى

تحتاج إلى استخدام قواعد إعادة تعيين CSS لإعادة تعيين أنماط المتصفح، ثم بناء من هناك. أنا أستعمل http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

<img style="display: block; padding: 0; margin: 0;" ... />

ومع ذلك، إذا كانت صورة لها في الأساس Decoratin من Somesort (IE. لا "محتوى" أو مرتبط بصفحة أخرى) أفضل استخدامها كصورة خلفية في العنصر الأصل.

علي سبيل المثال

# صورة الزائفة {الارتفاع: 100px؛ العرض: 200PX؛ خلفية: عنوان URL الشفاف (المسار / إلى / الصورة) التمرير غير متكرر أعلى اليسار؛}

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

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

لا تنتمي إلى StackOverflow