كيفية جعل متداخلة CSS DIV إسقاط الألواح
عند استخدامها بمفردها ، لن تغير علامة HTML مظهر أو وظيفة المحتوى الموجود داخلها. وإلى أن يتم وضع علامة على بعض أنماط CSS وما لم يتم ذلك ، فكل ما تفعله هو العمل كفاصل للمحتوى في شفرتك. إذا كان موقع الويب لنشاطك التجاري يحتوي على لوحات على الجوانب تريد إسقاطها وتداخل بعضها بعضًا ، فيمكنك القيام بذلك عن طريق تعيين سمة موضع CSS لكل علامة.
1.
افتح صفحة الويب الخاصة بك في محرر HTML ، مثل Dreamweaver أو Notepad ++ أو UltraEdit. قم بالتمرير لأسفل الرمز إلى قسم المحتوى (اللوحة الجانبية) الذي تريد احتوائه في DIV. في بداية القسم ، أدخل علامة. اكتب علامة لإغلاقها وتكرارها لأي أقسام أخرى من المحتوى.
2.
افتح صفحة أنماط CSS لصفحتك على الويب ، أو إذا كان يحتوي على ورقة أنماط مدمجة ، انتقل لأعلى الصفحة حيث توجد ورقة الأنماط ، انقر لتحريك المؤشر هناك ، ثم اضغط على "Enter" عدة مرات لإدراج بضع فواصل الأسطر.
3.
اكتب رمز CSS أدناه في السطر. سيتم حذف جميع وحدات DIV التي تقوم بتطبيق تنسيق "style1" عليها إلى 10 بكسل. سيتم رفع جميع وحدات DIV التي تقوم بتطبيق تنسيق "style2" عليها إلى 10 بكسل. باستخدام هذا المزيج من الأنماط المختلفة ، ستتداخل لوحاتك مع بعضها البعض. لاحظ أنه يمكنك تغيير القيم في التعليمة البرمجية (حاليًا 10 بكسل) إذا كنت ترغب في تراكبها أقل أو أكثر.
div.style1 {position: relative؛ العلوي: 10 بكسل ؛ } div.style2 {position: relative؛ top: -10px؛ }
4.
مرِّر لأسفل إلى علامات DIV التي أدرجتها في البداية وأدخل أحد رمزتي HTML أدناه في كل علامة:
class = "style1" class
يجب أن تبدو علامات DIV النهائية مشابهة لهذه:
محتوى DIV 1 DIV 2 المحتوى5.
جرب قيم CSS مختلفة (على سبيل المثال ، "20 بكسل" بدلاً من "10px") وقم بتبديل مقاطع DIV الخاصة بك بين فئات style1 و style2 حتى تصل إلى مقدار التداخل الذي تفضله. احفظ التغييرات وأعد تحميل الصفحة إلى خادم موقع نشاطك التجاري لتنفيذ تغييراتك.