كيفية إنشاء خط عمودي في هتمل: نصائح وأمثلة

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

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

إذا كنت تريد إنشاء خط عمودي بين عنصرين ، يمكنك استخدام علامة

مع سمة الطبقة. ثم ، باستخدام كس ، يمكنك تعيين الأنماط المطلوبة لهذه الفئة ، بما في ذلك العرض واللون وارتفاع الخط. على سبيل المثال:

5. هناك أيضا عدة طرق أخرى لإنشاء خطوط عمودية في هتمل ، مثل استخدام العناصر الزائفة قبل وبعد ، أو استخدام الرسومات سفغ. ومع ذلك ، فإن الطرق الموضحة أعلاه هي الأبسط والأكثر سهولة بالنسبة لمعظم المطورين.
6. طرق لإنشاء خط عمودي في هتمل
7. استخدام كس لإنشاء خط عمودي
8. 1. باستخدام حدود العنصر

2. باستخدام العنصر الزائف:: بعد

3. باستخدام الجدول

3. لون الخلفية: أسود;

}

استخدام الجدول: استخدام العلامات

,

و

يمكنك أيضا إنشاء خط عمودي. يتيح لك وضع البيانات وتعيين الحدود لخلايا الجدول إنشاء الخط العمودي المطلوب. على سبيل المثال:

يمكن أن يكون استخدام كس لإنشاء خط عمودي مفيدا جدا عند تصميم صفحات الويب. وهنا عدد قليل من الطرق للقيام بذلك:

1. باستخدام حدود العنصر

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

• .ميديف {

الحدود اليسرى: 1 بكسل أسود صلب;

الارتفاع: 100 بكسل;

}

مثال الاستخدام:

2. باستخدام العنصر الزائف:: بعد

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

المحتوى: "";

العرض: 1 بكسل;

لون الخلفية: أسود;

الارتفاع: 100 بكسل;

مثال الاستخدام: