إنتاج صفحات الويب: استخدم div+css لمحاكاة أقطار الجدول

الكاتب：Eve Cole وقت التحديث：2009-06-12 17:24:05

في بعض الأحيان، عند إدراج مستند، يلزم استخدام أقطار الجدول. الطريقة الشائعة هي استخدام الصور لمعالجتها، وهناك أيضًا استخدام vml لرسم الأقطار. هل يمكن تحقيق ذلك باستخدام html+css؟ الجواب هو نعم، دعونا نحاكي قطر الجدول.

استخدم خطوط الحدود لمحاكاة الخطوط القطرية. نحن نعلم أنه إذا تم تعيين خط الحدود لـ DIV على نطاق واسع وتم تحديد ألوان مختلفة، فإن تقاطع خطي الحدود المتجاورين سيكون خطًا قطريًا. بمعرفة هذا المبدأ، يمكننا استخدام border-left و border-top لمحاكاة تأثير الخطوط المائلة.

لنقم أولاً بإنشاء الهيكل:

الفئة
الاسم

نستخدم

كحاوية قطرية، ونقوم بتعيين نمط الشرطة المائلة كما يلي:
.خارج{
border-top:40px #D6D3D6 Solid;/*عرض الحد العلوي يساوي ارتفاع الصف الأول من الجدول*/
width:0px;/*دع عرض الحاوية يكون 0*/
height:0px;/*دع ارتفاع الحاوية يكون 0*/
border-left:80px #BDBABD Solid;/*عرض الحد الأيسر يساوي عرض الخلية الأولى في الصف الأول من الجدول*/
Position:relative;/*اجعل الحاويتين الفرعيتين بالداخل في وضع مطلق*/
}

يتم استخدام علامتي و لتعيين فئتين وتعيينهما لحظر الهياكل على التوالي إلى الموضع المطلق، بحيث يمكنك إزاحته إلى الموضع الذي تريد تحديده.

ب {نمط الخط: عادي؛ العرض: كتلة؛ الموضع: مطلق؛ الأعلى: -40px؛ اليسار: -40px؛ العرض: 35px؛}
م {نمط الخط: عادي؛ العرض: كتلة؛ الموضع: مطلق؛ الأعلى: -25px؛ اليسار: -70px؛ العرض: 55x؛}

تتم محاكاة هذا الخط القطري. إذا كنت تعرف هذا المبدأ، فيمكنك تحويله إلى العديد من الأشياء المثيرة للاهتمام.

عيوب

طريقة المحاكاة القطرية هذه:

1. يجب معرفة العرض والارتفاع

2. لا يمكن أن يكون طول العرض والارتفاع مختلفًا جدًا، يمكنك محاولة جعل العرض أطول عدة مرات من الارتفاع لرؤية التأثير

كما لا يمكن ضبط لون الخطوط القطرية.

ملاحظة أخرى: تم اختبار الكود أعلاه فقط على ie6 وff3، ولم يتم اختبار المتصفحات الأخرى.