استخدم كود CSS لمحاذاة القوائم النقطية في HTML.
يستخدم مصممو الويب قوائم التعداد النقطي لأكثر من مجرد إضافة الرموز النقطية والنصوص. تعد علامة HTML المستخدمة لإنشاء قوائم تعداد نقطي في متناول اليد لإنشاء القوائم أو تنظيم الصور لتحميل JavaScript في عرض الشرائح. إن تعلم استخدام كود ورقة الأنماط المتتالية جنبًا إلى جنب مع قوائم التعداد النقطي - تسمى "القوائم غير المرتبة" بلغة HTML العامية - سيفتح العديد من إمكانيات تصميم الويب المثيرة.
الخطوة 1
افتح ملف HTML الذي يحتوي على قائمة التعداد النقطي وابحث بين العلامات وعلامة باتجاه الجزء العلوي من الكود. أضف العلامات إذا لم تكن موجودة بالفعل. إذا كان الرمز الخاص بك يتضمن ملف علامة في مكان ما بعد العلامة ، وذلك يحتوي على مرجع إلى ملف CSS ، ثم افتح هذا الملف بدلاً من ذلك. ينتقل كود CSS الخاص بك بين العلامات أو في سطر جديد من ملف CSS الخاص بك.
فيديو اليوم
الخطوة 2
قم بمحاذاة النص داخل جميع الرموز النقطية عن طريق تعيين "محاذاة النص" لملف
- بطاقة شعار. ال
- و العلامات لتعريفها كجزء من قائمة واحدة. عندما تقوم بمحاذاة النص لملف
- العلامة يلتف حول
- علامة ، فإن المحاذاة تؤثر على النص في كل تعداد نقطي ولكنها لا تحاذي القائمة نفسها إلى يسار أو يمين الصفحة. فيما يلي مثال على رمز CSS لتعيين "محاذاة النص":
ul {text-align: right؛}
لاحظ أن الرموز النقطية لا تتحرك مع النص. الرصاص يبقى على اليسار في هذه الحالة.
الخطوه 3
قم بمحاذاة القائمة بأكملها إلى يسار الصفحة أو يمينها عن طريق تعيين "عائم" لملف
- بطاقة شعار. عند تعيين "تعويم" على اليسار أو اليمين على
- علامة ، فإنه ينقل القائمة النقطية بأكملها إلى يسار أو يمين الصفحة. تعيين تعويم مثل هذا:
ul {float: right؛}
يمكنك تعيين "تعويم" إلى اليسار أو اليمين ، ولكن ليس إلى الوسط.
الخطوة 4
التفاف الخاص بك
- العلامات في
و
العلامات لإنشاء غلاف يقوم بتوسيط القائمة النقطية على صفحتك. سيبدو الرمز الناتج كما يلي:- قائمة الاغراض
- قائمة الاغراض
ال
لا تقوم العلامة بتوسيط أي شيء بمفرده ؛ يجب عليك استخدام CSS لتوسيط كل شيء. أضف الكود التالي بين ملف
