قائمة أمثلة على نوع CSS3 قواعد CSS لتخصيص مظهر القائمة على صفحة html
23.02.2017
ليس بعد
أهلاً بكم!
في البرنامج التعليمي اليوم، سأتحدث عن كيفية التحكم في المظهر في CSS، أي إنشاء قوائم ذات تعداد نقطي ومرقمة، وتصميم قوائم نقطية مع صورة، وأيضًا، إذا لزم الأمر، إزالة أي تعيين لقائمة ذات تعداد نقطي تمامًا.
سأحاول عدم تأخير هذا الدرس وعدم كتابة الكثير من المعلومات. لكنني سأحاول فقط أن أرى كيف ستسير الأمور.
نوع العلامة في القائمة
خاصية "LIST-STYLE-TYPE"
باستخدام قاعدة "نوع نمط القائمة"، يمكنك ضبط نوع العلامة، على سبيل المثال، لعرض الأرقام والحروف والمربعات والدوائر وما إلى ذلك.
ملكية:
- لا أحد – بدون علامة
- قوائم نقطية:
- القرص- علامة على شكل دائرة مملوءة؛
- دائرة- علامة على شكل دائرة مفتوحة؛
- مربع- علامة على شكل مربع مملوء؛
- قوائم مرقمة:
- عدد عشري- عادي أرقام عشرية(1،2،3،4،5، الخ)؛
- الروماني العلوي- أرقام رومانية كبيرة (I، II، III، IV، V، إلخ)؛
- الرومانية السفلى- الأرقام الرومانية الصغيرة (i، ii، iii، iv، v، وما إلى ذلك)؛
- ألفا العليا – الحروف الكبيرة(أ، ب، ج، د، ه، إلخ)؛
- ألفا أقل- الحروف الصغيرة (أ، ب، ج، د، ه، الخ)
Li ( نوع نمط القائمة: دائرة؛ /* علامات على شكل دائرة مفتوحة */ )
المثال الكامل:
- النص رقم 1
- النص رقم 2
نتيجة:
إذا كنت بحاجة إلى إزالة علامة من القائمة، فاستخدم خاصية "لا شيء":
Li ( نوع نمط القائمة: لا شيء؛ /* إزالة العلامات */ )
نتيجة:
موضع العلامة في القائمة
ملكية "قائمة نمط الموقف
»
يمكن استخدام قاعدة "نمط القائمة-الموضع" لتحديد موضع العلامة.
ملكية:
- الخارج- خارج الكتلة الرئيسية للقائمة؛
- داخل- داخل الكتلة الرئيسية للقائمة.
Li (موضع نمط القائمة: بالداخل؛ /* موضع العلامة */)
قائمة لون العلامة
ملكية "لون
»
أنت تعرف بالفعل قاعدة "اللون"، والتي من خلالها لا يمكنك تغيير لون النص فحسب، بل يمكنك أيضًا تغيير لون العلامة. إلق نظرة.
- النص رقم 1
- النص رقم 2
نتيجة:
صورة بدلاً من علامة في القائمة
ملكية "قائمة نمط الصورة
»
إذا كنت لا تحب ذلك طريقة العرض القياسيةالقوائم المرقمة أو النقطية، يمكنك استخدام قاعدة "نمط القائمة-الصورة" ووضع تعداد نقطي للصور بدلاً من التعداد النقطي العادي.
بناء الجملة:
صورة نمط القائمة: url(image.png);
LI ( صورة نمط القائمة: url("marker1.png"); /* صورة العلامة */ )
"marker1.png" هي صورة العلامة.
نتيجة:
قائمة المسافة البادئة للعلامة
الخاصية "PADDING-LEFT"
إذا كنت تريد وضع مسافة بادئة للتعداد النقطي من النص، فاستخدم قاعدة "الحشوة اليسرى".
Li ( المساحة المتروكة على اليسار: 30 بكسل؛ /* مسافة بادئة من العلامة إلى النص */ )
نتيجة:
هدية لأولئك الذين يقرؤون حتى النهاية
ترقيم القائمة من أي رقم
لا تحتاج إلى معرفة هذا، لكنني قررت أن أقدم هدية لأولئك الذين قرأوا هذا الحد. إذا كنت بحاجة إلى ترقيم القائمة ليس من 1، ولكن على سبيل المثال من 6، فيمكنك القيام بما يلي:
Li ( نوع نمط القائمة: لا شيء؛ /* إزالة الترقيم الأولي من القائمة */ ) ul ( إعادة ضبط العداد: القائمة 5؛ /* بدء العداد */ ) ul li:before ( زيادة العداد: قائمة؛ /* زيادة قيمة العداد */ content: counter(list) "."; /* إخراج الرقم */ )
نتيجة:
وإنني أتطلع إلى رؤيتك في الدروس القادمة! لا تنسى الاشتراك!
المنشور السابق
الإدخال التالي
مرحبا عزيزي القراء لموقع بلوق. اليوم سيكون هناك مقال آخر حول خصائص أوراق الأنماط المتتالية. فيه سنتحدثحول التصميم باستخدام قواعد CSS.
بشكل عام، القوائم بين عناصر الكتلةكن محايدا. ويرجع ذلك إلى حقيقة أنها تحتوي على تعداد نقطي وترقيم يتم وضعه بواسطة المتصفح نفسه.
خاصية نمط القائمة - تصميم قائمة على صفحة html
في لغة سي اس اسهناك ثلاث خصائص تبدأ بنمط القائمة، وهي المسؤولة عن تصميم القوائم النقطية والمرقمة. بالإضافة إلى أن هناك أيضًا قاعدة نمط قائمة مسبقة الصنع تسمح لك بتقليل كمية التعليمات البرمجية.
يمكن استخدام كل هذه الخصائص لكل من عناصر html li وعناصر ul وol. والفرق الوحيد هو أنه إذا تمت كتابة القواعد لقيمة محددة في قائمة li، فسيتم تطبيقها عليها فقط. وإذا تمت كتابة نفس قواعد CSS لحاويات ul أو ul، فسيتم تطبيقها على جميع عناصر li الموجودة في هذه الحاويات.
لنبدأ بالسمة نوع نمط القائمة، الذي يحدد نوع العلاماتأو ترقيملعناصر القائمة:
نوع نمط القائمة: قرص|دائرة|مربع|عشري|عشري بادئ صفر|روماني سفلي|روماني علوي|يوناني سفلي|ألفا سفلية|لاتينية سفلية|ألفا علوية|لاتينية عليا|أرمنية| الجورجية|لا شيء|يرث
كما ترون، تحتوي خاصية list-style-type على العديد من القيم المتاحة، والتي يمكنها تحديد نوع العلامة و أنواع مختلفةترقيم.
- القرص - علامة على شكل دائرة سوداء (القيمة الافتراضية للقوائم النقطية).
- دائرة - علامة على شكل دائرة فارغة.
- مربع - علامة على شكل مربع. يمكن أن يكون فاتحًا أو داكنًا، حسب المتصفح.
- عشري - ترقيم بالأرقام العربية (القيمة الافتراضية للقوائم المرقمة).
- الرقم العشري-الصفر البادئ - الترقيم بالأرقام العربية من 01 إلى 99 بصفر بادئ.
- الرومانية السفلية - الترقيم بالأرقام الرومانية الصغيرة.
- الرومانية العليا - الترقيم بأرقام رومانية كبيرة.
- اليونانية السفلى - الترقيم بأحرف يونانية صغيرة.
- الأبجدية السفلية واللاتينية السفلية - ترقيم بأحرف لاتينية صغيرة.
- ألفا العلوي واللاتيني العلوي - ترقيم بأحرف لاتينية كبيرة.
- الأرمنية - الترقيم باستخدام الأرقام الأرمنية التقليدية.
- الجورجية - الترقيم باستخدام الأرقام الجورجية التقليدية.
- لا شيء - لن يتم وضع العلامات والترقيم على الإطلاق.
هذا هو الشكل الذي ستبدو عليه عناصر القائمة في المتصفح معان مختلفةنوع نمط القائمة:
استخدام أنماط CSSلا يهم العنصر (OL أو UL) المستخدم لإنشاء القائمة. يختلف OL وUL فقط في السلوك الافتراضي، وباستخدام خاصية list-style-type، يمكنك بسهولة تحويل نوع واحد من القائمة إلى نوع آخر.
سمة النمط صورة نمط القائمةيسمح لك بتعيين ك علامةقائمة المواد صورة بيانية . عند استخدام سمة صورة نمط القائمة، يتم تجاهل قيمة سمة نوع نمط القائمة:
صورة نمط القائمة: لا شيء|<интернет-адрес файла изображения>|ورث
معنى لا أحديزيل علامة الصورة ويضبطها على وضعها الطبيعي، وليس الرسم. هذا هو السلوك الافتراضي.
عند تحديد عنوان ملف الصورة، سيتم إدراج الصورة بدلاً من العلامة. كما هو الحال مع استخدام، يمكنك استخدام العناوين المطلقة والنسبية كعنوان للصورة. إذا لم يتمكن المتصفح من تحميل الصورة، فسيتم استخدام العلامة الافتراضية أو الترقيم أو ما هو محدد في الخاصية في نوع نمط القائمة.
مثال لقائمة تحتوي على صورة كعلامة:
- عنصر القائمة الأول؛
- عنصر القائمة الثاني؛
- العنصر الثالث في القائمة.
وهذا ما يبدو عليه الأمر:
- عنصر القائمة الأول؛
- عنصر القائمة الثاني؛
- العنصر الثالث في القائمة.
من الواضح أنه عند اختيار صورة كعلامة، فمن الأفضل تحديد صورة صغيرة.
وآخر خاصية CSS من سلسلة نمط القائمة هي موضع نمط القائمةوالذي يسمح لك بتحديد موقع التعداد النقطي أو الترقيم في عنصر القائمة. يمكن أن يكون هناك خياران للقيمة:
موضع نمط القائمة: داخل|خارج
في حالة القيمة داخليتم وضع علامة أو ترقيم كما لو كان داخل القائمة، وفي هذه الحالة الخارجخارج عناصر لي. القيمة الافتراضية موجودة بالخارج ويتم نقل العلامة للخارج.
قائمة أمثلة ذات قيم مختلفة لموضع نمط القائمة:
- في الفقرة الأولى، كل شيء افتراضي؛
- في الفقرة الثانية، يتم تعيين موضع نمط القائمة على الداخل. في هذه الحالة، لاحظ أن السطر الثاني تم وضعه بشكل متساوي مع العلامة؛
- عند هذه النقطة، يكون موضع نمط القائمة مساويًا للخارج.
قاعدة نمط قائمة CSS مسبقة الصنع
خاصية نمط قائمة CSS التالية هي خاصية جاهزة لقوائم التصميم. يسمح لك بكتابة قواعد CSS الثلاثة التي تمت مناقشتها أعلاه في قاعدة واحدة. يمكن أن يكون ترتيب تحديد القيم فيه موجودًا وسيتم أخذ المعلمات التي لم تحددها في نمط القائمة بواسطة المتصفح افتراضيًا.
يجب فصل القيم الموجودة في قاعدة التجميع على نمط القائمة بمسافات:
نمط القائمة: نمط القائمة، نوع القائمة، نمط الصورة، قائمة نمط الموقف؛
قد تبدو قاعدة CSS الحقيقية لقوائم التصميم كما يلي:
نمط القائمة: عنوان URL للدائرة (http://site/images/marker.png) بالخارج؛
وبالتالي، تتيح لك خاصية نمط القائمة تقليل كمية التعليمات البرمجية بشكل كبير، لأنه بدلا من ثلاث قواعد، يكفي تعيين واحدة فقط.
كما ذكرنا أعلاه، يمكن تحديد القيم بأي ترتيب وبأي كمية. لذلك، على سبيل المثال، من أجل إزالة العلامات من قائمة القائمةيكفي أن أكتب:
نمط القائمة: لا شيء؛
يمكن فعل الشيء نفسه باستخدام خاصية نوع القائمة:
نوع نمط القائمة: لا شيء؛
هذه هي القصة حول تصميم أتش تي أم ألالقوائم التي تستخدم أوراق الأنماط المتتالية سأنتهي منها. للتعرف على الآخرين خصائص CSS x يمكنك قراءة المقالات من قسم "" ولا تنس الاشتراك في تحديثات المدونة. نراكم مرة أخرى!
مرحبا عزيزي القراء لموقع بلوق. اليوم سيكون هناك مقال آخر في البنك الخنزير. وسوف يركز على التصميم باستخدام قواعد أوراق الأنماط المتتالية. كل شيء بسيط للغاية هنا، ولكن مع ذلك، قررت تخصيص منشور منفصل لهذا الموضوع.
قبل ذلك بقليل تمكنا بالفعل من معرفة كيف وكيف وكيف يمكنك العمل. حسنا، في وقت سابق قليلا نظرنا بالتفصيل في جميع أنواع الأشياء وما هي مجموعات مختلفةللإشارة بالضبط إلى هذا العنصر كود HTML، والتي ستحتاج إلى تطبيق خصائص تصميم معينة عليها.
نمط القائمة - تصميم القوائم في كود HTML
لذلك، في لغة ترميز النمط، توجد ثلاث قواعد منفصلة تبدأ بنمط القائمة، والتي تعمل على التهيئة مظهرقوائم (مرقمة أو نقطية) في كود مستندات الويب. بالإضافة إلى ذلك، هناك قاعدة نمط قائمة CSS مسبقة الصنع، والتي تسمح لك بتقليل كمية التعليمات البرمجية قليلاً. ولكن أول الأشياء أولا.
ما سننظر فيه الآن يمكن استخدامه في كليهما عناصر HTML LI، وللعنصرين Ul وOl (قوائم نقطية ومرقمة، على التوالي). ما هو الفرق في استخدام نمط القائمة لهذه العلامات؟
في الواقع، يمكنك معرفة ما إذا كانت الخاصية موروثة أم لا على موقع المدقق (اقرأ عنها على الرابط المقدم) في القسم المخصص لمواصفات أوراق الأنماط المتتالية. في العمود "الموروثة"، ستظهر "نعم" مقابل القواعد الموروثة:
دعنا نبدء ب نوع نمط القائمة، والذي يسمح لك بتعيين نوع العلامة العناصر الفرديةقائمة HTML. القيم التالية صالحة لهذه القاعدة:
- لا شيء - لن يتم تنفيذ أي علامة على الإطلاق (نوع نمط القائمة: لا شيء؛ يتم تطبيقه على هذا العنصر وبالتالي لا يحتوي على علامة)
- القرص عبارة عن دائرة مملوءة (نوع نمط القائمة: قرص؛ يُستخدم لهذا السطر)
- الدائرة - دائرة كعلامة
- مربع - مربع كعلامة
- عشري - الأرقام العربية (نوع نمط القائمة: عشري؛)
- ألفا السفلى — حروفأحرف صغيرة
- ألفا العلوي - الحروف اللاتينية الكبيرة
- Lower-roman — أرقام رومانية صغيرة
- Upper-roman — أرقام رومانية بأحرف كبيرة
في رأيك، ما الذي تم استخدامه لإنشاء القائمة أعلاه مباشرةً، Ul أو Ol؟ سؤال مخادع. اتضح أن هذا لم يعد مهمًا، رغم أنه في هذا حالة محددةلقد استخدمت Ol، ولكن تغييره إلى Ul - سيبقى المظهر كما هو، لأنه تم ضبطه بشكل مختلف لكل عنصر قيمة CSSقواعد نوع نمط القائمة.
في الواقع، يختلف Ul وOl فقط في سلوكهما الافتراضي (علامات Ul وأرقام Ol). ولكن إذا أردت، يمكنك بسهولة تحويل نمط قائمة إلى آخر باستخدام نوع نمط القائمة. الخط المستخدم لوضع علامات على الأرقام أو الحروف هو تمامًا نفس الخط الذي حددته لمحتوى علامات LI. على سبيل المثال، عن طريق تغيير لون الخط للقائمة سوف نقوم بتغيير و لون العلامة:
- تم تغيير لون النص (نوع نمط القائمة: Lower-roman؛ اللون: أحمر) وتغيير لون العلامة
دعنا ننتقل إلى خاصية CSS التالية - موضع نمط القائمة. باستخدامه، يمكنك ضبط موضع (موضع) المنطقة باستخدام العلامة. هناك قيمتان محتملتان فقط لذلك:
أولئك. بشكل أساسي، في موضع نمط القائمة، نشير إلى المكان الذي يجب وضع المنطقة ذات العلامات فيه - خارج عنصر LI (في الخارج) أو داخله (في الداخل). بشكل افتراضي، يتم إخراج المنطقة التي تحتوي على العلامة خارج الحدود، أي. يتم استخدام القيمة خارج.
دعونا نرى هذا مع مثال. في العنصر الأول من القائمة، سأكتب على وجه التحديد list-style-position:inside وسنرى ما سيحدث:
- كل شيء افتراضي هنا
- هذا هو الشكل الذي سيبدو عليه وضع منطقة التحديد بالداخل. يرجى ملاحظة أن السطر الثاني في هذا العنصر والعلامة يقعان على نفس المستوى
- كل شيء افتراضي هنا
قائمة نمط الصورة وقاعدة Css الجاهزة
بعد ذلك لدينا صورة نمط القائمة - تسمح لك بتحديد الصورة التي سيتم استخدامها كعلامة. يتم تعيين هذه القاعدة على لا شيء افتراضيًا (أي لا يتم استخدام أي صورة كعلامة)، ولكن يمكنك كتابة وظيفة Url() عن طريق تحديد المسار إلى الصورة، والتي ستعمل لاحقًا كعلامة في هذه القائمة:
قد يبدو مثل هذا:
صورة نمط القائمة: url(https://site/images/list_star.png);
- كل شيء افتراضي هنا
- هذا هو ما قد يبدو عليه استخدام الصورة كعلامة. من الواضح أنه يمكنك اختيار صورة أكثر ملاءمة لهذا الغرض.
- على سبيل المثال، مثل هنا.
كما تتذكر، في المقال الذي قلت فيه أن الصور تشير إلى العناصر المضمنة(في الواقع، بالنسبة للمتصفح، هذا هو نفس الحرف، ولكن في بعض الأحيان يكون كبيرًا جدًا).
هنا تأخذ الصورة مكان العلامة (حروف أو أرقام). في هذه الحالة، سيتم زيادة ارتفاع السطر الذي يحتوي على عنصر القائمة إذا قمت بإدراجه كعلامة الصورة الكبيرة(كما حدث في العنصر الثاني من المثال أعلاه).
في وظيفة القائمة صورة النمطيمكن الإشارة إليها كصور. إذا لم يتم تحميل الصورة، فسيتم استخدام العلامة الافتراضية أو الترقيم، أو ما هو محدد في نوع نمط القائمة لعنصر القائمة هذا.
لكتابة قواعد CSS الثلاث الموضحة أعلاه في قاعدة واحدة، يمكنك استخدام نمط القائمة، وهو نمط جاهز لتصميم القوائم. لا يهم الترتيب الذي يتم به تحديد القيم. سيتم تفسير تلك القيم التي لم تحددها في نمط القائمة بشكل صريح بواسطة المتصفح بالقيم الافتراضية.
أين يمكنني رؤية القيم الافتراضية؟ نعم، كل هذا موجود - في مواصفات CSS الخاصة بمدقق W3C في عمود "القيمة الأولية" مقابل الخصائص التي تهمك:
يتم فصل قيم الخصائص الفردية في قاعدة نمط القائمة الجاهزة بمسافات. الموقع، كما ذكرنا سابقًا، ليس مهمًا:
من الناحية العملية قد يبدو الأمر كما يلي:
نمط القائمة: داخل عنوان url الروماني العلوي (https://site/images/list_star.png)؛
يمكنك استخدام القيم بأي ترتيب وبأي رقم (بدءًا من واحد). بالمناسبة، يتم تشكيل القوائم والقوائم في أغلب الأحيان على مواقع الويب باستخدام القوائم. خاصية على شكل قائمةفي هذه الحالة يتم استخدامه ل لإزالة العلامات من قوائم القائمة، وهي غير ضرورية على الإطلاق هناك:
نوع نمط القائمة: لا شيء؛
نمط القائمة: لا شيء؛
كل التوفيق لك! نراكم قريبا على صفحات موقع المدونة
يمكنك مشاهدة المزيد من الفيديوهات بالذهاب إلى");">
أنت قد تكون مهتم
العرض (كتلة، لا شيء، مضمّن) في CSS - اضبط النوع عرض HTMLالعناصر الموجودة على صفحة الويب كيفية إعداد الدوران لون الخلفيةصفوف من الجداول والقوائم وعناصر Html الأخرى على الموقع باستخدام الفئة الزائفة nth-child 
تعويم ومسح في CSS - الأدوات تخطيط الكتلة
ما هو CSS وكيفية ربط أوراق الأنماط المتتالية بها وثيقة HTMLوبناء الجملة الأساسي لهذه اللغة 
تحديد المواقع باستخدام Z-index وقاعدة CSS Cursor لتغيير مؤشر الماوس 
الموقف (المطلق والنسبي والثابت) - الطرق تحديد المواقع أتش تي أم ألالعناصر في CSS (قواعد اليسار واليمين والأعلى والأسفل) 
خصائص CSS زخرفة النص، والمحاذاة العمودية، ومحاذاة النص، والمسافة البادئة للنص لتزيين النص في Html
قوائم CSS— مجموعة الخصائص المسؤولة عن تصميم القوائم. يعد استخدام قوائم HTML أمرًا شائعًا جدًا عند إنشاء أشرطة التنقل في موقع الويب. تمثل عناصر القائمة مجموعة من عناصر الكتلة.
باستخدام خصائص CSS القياسية يمكنك ذلك تغيير مظهر علامة القائمة, إضافة صورة للعلامة، و تغيير موقع العلامة. يمكن ضبط ارتفاع كتلة العلامة خاصية ارتفاع الخط.
تصميم القوائم باستخدام أنماط CSS
1. نوع علامة القائمة، نوع القائمة
تقوم الخاصية بتغيير نوع العلامة أو يزيل العلامةللقوائم النقطية والمرقمة. وارث.
| نوع نمط القائمة | |
|---|---|
| قيم: | |
| القرص | القيمة الافتراضية. تعمل الدائرة المملوءة كعلامة لعناصر القائمة. |
| الأرمينية | الترقيم الأرمني التقليدي |
| دائرة | تعمل الدائرة المفتوحة كعلامة. |
| CJK-إيديوغرافي | الترقيم الإيديوغرافي |
| عدد عشري | 1, 2, 3, 4, 5, … |
| العلامة العشرية الرائدة صفر | 01, 02, 03, 04, 05, … |
| الجورجية | الترقيم الجورجي التقليدي. |
| اللغة العبرية | الترقيم العبري التقليدي |
| هيراغانا | الترقيم الياباني: a، i، u، e، o، ... |
| هيراغانا إيروها | الترقيم الياباني: i، ro، ha، ni، ho، ... |
| كاتاكانا | الترقيم الياباني: A، I، U، E، O، ... |
| كاتاكانا-ايروها | الترقيم الياباني: I، RO، HA، NI، HO، ... |
| ألفا أقل | أ، ب، ج، د، ه،… |
| اليونانية السفلى | الأحرف الصغيرة من الأبجدية اليونانية. |
| اللاتينية السفلى | أ، ب، ج، د، ه،… |
| الرومانية السفلى | الأول، الثاني، الثالث، الرابع، الخامس، ... |
| لا أحد | لا يوجد علامة. |
| مربع | يعمل المربع المملوء أو غير المملوء كعلامة. |
| ألفا العليا | أ، ب، ج، د، ه،… |
| اللاتينية العليا | أ، ب، ج، د، ه،… |
| الروماني العلوي | الأول، الثاني، الثالث، الرابع، الخامس، … |
| أولي | يضبط قيمة الخاصية على القيمة الافتراضية. |
| يرث | يرث قيمة الخاصية من العنصر الأصل. |
بناء الجملة
Ul (نوع نمط القائمة: لا شيء؛) ul (نوع نمط القائمة: مربع؛) ol (نوع نمط القائمة: لا شيء؛) ol (نوع نمط القائمة: ألفا أقل؛) 
أرز. 1. مثال على تصميم قوائم نقطية ومرقمة
2. صور لعناصر القائمة، list-style-image
يمكنك استخدام الصور والتعبئة المتدرجة كعلامات لعناصر القائمة. وارث.
بناء الجملة
Ul (صورة نمط القائمة: url("images/romb.png");) ul (صورة نمط القائمة: خطي متدرج(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);) 
أرز. 2. تصميم قائمة ذات تعداد نقطي باستخدام صورة أرز. 3. تصميم قائمة ذات تعداد نقطي باستخدام التدرج
3. موقف نمط القائمة
توفر هذه الخاصية القدرة على وضع العلامة خارج أو داخل محتوى عنصر القائمة. وارث.
اليوم لا يوجد عمليا موقع واحد لا يستخدمونه قوائم HTML (
- يمثل قائمة مرتبة،
- بيت
- مدونة
- عن
- اتصال
- جافا
- .شبكة
- تورنتو 2004
- بكين 2008
- لندن 2012
- ريو دي جانيرو 2016
- جوجل
- بيكاسا
- فيدبورنر
- موقع YouTube
- مايكروسوفت
- شركة كوريل
- زيجنالس
- byteTaxi
- ياهو!
- زوبيت
- BuzzTracker
- MyBlogLog
- أبجد هوز دولور الجلوس امات، ...
فوسس سيت أميت... - Aenean placerat lectus tristique...
فيفاموس إنتردوم... - موريس eget sapien arcu، السيرة الذاتية...
فاسيلوس نيكي ريسوس... - فاسيلوس فيوجيات لاكوس...
دويس رونكوس... - العنصر المضمن الأول
- العنصر المضمن الثاني
- العنصر المضمن الثالث
- البند الرابع المضمن
- بيت
- مدونة
- عن
- اتصال
- - قائمة غير مرتبة). في هذا البرنامج التعليمي، سأعرض لك 8 طرق رائعة لجعل قوائم HTML البسيطة والمملة تبدو جذابة. سنضيف فقط بعض الأشياء البسيطة فني CSSولن تتمتع قوائمنا بمظهر مذهل فحسب، بل ستحصل أيضًا على العديد من الميزات الإضافية.
شاهد الآن العرض التوضيحي لترى ما سنقوم بإنشائه.
تبدو أفضل بكثير، أليس كذلك؟ ويمكنك أيضًا إنشاء مثل هذه القوائم باستخدام CSS بسيطشفرة. تريد أن تعرف كيف؟ يقرأ!
القائمة رقم 1: نظام بسيطملاحة
في أغلب الأحيان يتم استخدام القوائم عند الإنشاء قائمة الإبحار. يتيح لك نموذج HTML/CSS هذا إنشاء نظام تنقل بسيط، وحتى متواضع بعض الشيء، ولكنه جذاب.
/* LIST #1 */ #list1 ( ) #list1 ul ( نمط القائمة: لا شيء؛ محاذاة النص: مركز؛ حد أعلى: 1px صلب #eee؛ حد أسفل: 1px صلب #eee؛ الحشو: 10px 0؛ ) #list1 ul li ( العرض: مضمن؛ تحويل النص: أحرف كبيرة؛ الحشو: 0 10 بكسل؛ تباعد الحروف: 10 بكسل؛ ) #list1 ul li a ( زخرفة النص: لا شيء؛ اللون: #eee؛ ) #list1 ul li a أ:تحويم (زخرفة النص:تسطير؛)
القائمة رقم 2: الاستخدام خط مختلفعند الترقيم
المشكلة في استخدام القائمة هي أنها تمتزج مع النص. وتكون الأرقام دائمًا بنفس لون النص.
لكن أضف القليل من الأسلوب وستنسى القيود المذكورة أعلاه وستصبح قوائمك أكثر جاذبية. وإليك كيف يتم ذلك:
هولنداهي دولة في...
الولايات المتحدة الأمريكيةهي دستورية اتحادية..
الفلبينيينالمعروفة رسمياً بالجمهورية..
المملكة المتحدةلبريطانيا العظمى و...
/* LIST #2 */ #list2 ( width:320px; ) #list2 ol ( نمط الخط: مائل; Font-family:Georgia, Times, serif; حجم الخط:24px; اللون:#bfe1f1; ) #list2 ol li ( ) #list2 ol li p ( الحشو: 8px; نمط الخط: عادي; عائلة الخط: Arial; حجم الخط: 13px; اللون:#eee; الحد الأيسر: 1px صلب #999; ) #list2 ol li ص م (عرض:كتلة؛)
القائمة رقم 3: صور العلامة
يمكنك بسهولة تغيير مظهر علامات القائمة غير المرتبة عن طريق تحديد واحدة منها القيم القياسية، ولكن يمكنك أيضًا استخدام الصور كعلامات. سيساعد هذا الحل في جعل قوائمك أكثر إبداعًا. وهنا هو الكود:
/* القائمة #3 */ #list3 ( ) #list3 ul ( list-style-image: url("../images/arrow.png"); color:#eee;font-size:18px; ) #list3 ul لي (ارتفاع الخط: 30 بكسل؛)
القائمة رقم 4: نمط الآيفون
هذه القائمة مأخوذة من المقال جهات اتصال ايفونالتطبيق الذي تم إنشاؤه بواسطة مساعدة في CSSو مسج. هذا ما تبدو عليه القوائم على iPhone. جذابة للغاية، أليس كذلك؟ هل تريد واحدة لموقع الويب الخاص بك؟
/* القائمة #4 */ #list4 ( العرض: 320px; الخط-family:Georgia, Times, serif; حجم الخط:15px; ) #list4 ul ( نمط القائمة: لا شيء; ) #list4 ul li ( ) #list4 ul li a ( العرض: كتلة؛ زخرفة النص: لا شيء؛ اللون: #000000؛ لون الخلفية: #FFFFFF؛ ارتفاع الخط: 30 بكسل؛ نمط الحدود السفلي: الصلبة؛ عرض الحدود السفلية: 1 بكسل؛ الحدود- Bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; :repeat-x;) #list4 ul li a strong (الهامش الأيمن:10px;)
القائمة رقم 5: القوائم المتداخلة
يمكن أن تكون القوائم المتداخلة مفيدة بشكل لا يصدق وتبدو جميلة. ومن خلال تعديل التقنية الثالثة (الصور النقطية)، يمكننا إنشاء "قائمة موسعة". بالطبع، ليس بدون مساعدة jQuery:
/* القائمة #5 */ #list5 ( اللون:#eee; ) #list5 ol ( حجم الخط:18px; ) #list5 ol li ( ) #list5 ol li ol ( list-style-image: url(".. /images/nested.png"); الحشو:5px 0 5px 18px; حجم الخط:15px; ) #list5 ol li ol li ( اللون:#bfe1f1; الارتفاع:15px; هامش اليسار:10px; )
القائمة رقم 6: الترقيم الروماني + النوع متعدد الأسطر
بشكل افتراضي، تستخدم القائمة الترقيم القياسي (1، 2، 3، 4، وما إلى ذلك). من خلال تغيير القيمة في CSS، يمكنك تحديد نوع مختلف من الترقيم، على سبيل المثال، Roman.
أيضًا، بشكل افتراضي، يوجد الترقيم والتعداد النقطي خارج القائمة (قائمتنا رقم 2 هي مثال ممتاز على ذلك). ولكن يمكن إصلاح ذلك، ما عليك سوى تغيير قيمة خاصية list-style-position إلى الداخل.
/* القائمة #6 */ #list6 (عائلة الخط: "Trebuchet MS"، "Lucida Grande"، Verdana، Lucida، Jennifer، Helvetica، Arial، sans-serif؛) #list6 ol (نوع نمط القائمة: علوي -roman؛ اللون:#eee حجم الخط:14px؛
القائمة رقم 7: قائمة خطية تحتوي على عناصر مفصولة بفواصل
عادةً، يتم استخدام القوائم لعرض كمية شيء ما ويتم عرضها كعمود. ولكن ماذا لو كنت بحاجة إلى قائمة خطية؟ يتم تحقيق ذلك عن طريق تغيير قيمة خاصية العرض إلى مضمنة. ولكن إذا كنت بحاجة فجأة إلى تضمين القائمة في النص، وفقا للقواعد، يجب فصل العناصر الموجودة في القائمة بفاصلة. كيفية تحقيق ذلك؟ وببساطة، استخدم عنصر:after من التعليمات البرمجية الرمزية.
/* القائمة #7 */ #list7 ( ) #list7 ul ( اللون:#eee; حجم الخط:18px; الخط-family:Georgia, Times, serif; ) #list7 ul li ( العرض: inline; ) #list7 ul li:after ( content: "، "؛ ) #list7 ul li.last:after ( content: "."؛ )
القائمة رقم 8: قائمة التنقل الدوارة
إليك التقنية الأخيرة التي تتطلب عمل CSS3 (مدعومة فقط أحدث الإصداراتفايرفوكس وسفاري وكروم). عند تحريك المؤشر فوق أحد عناصر الكتلة، يتم تنشيط تأثير التدوير. بالطبع ليس الأفضل طريقة ملائمة، لكن جميل جدا.
/* LIST #8 */ #list8 ( ) #list8 ul ( نمط القائمة: لا شيء; ) #list8 ul li ( عائلة الخط:Georgia,serif,Times; حجم الخط:18px; ) #list8 ul li a ( Display:block height:28px; border-left:5px Solid #222; -moz-box-shadow:10px 10px 20px #000000; -webkit-transform:rotate(-5deg); -webkit -box-shadow:10px 10px 20px #000000; 10 بكسل 20 بكسل #000000;
خاتمة
كما ترون، من الممكن إنشاء أشياء فريدة من نوعها قائمة HTML العادية. وكل هذا يتم باستخدام CSS. أنا سعيد جدًا إذا تعلمت الكثير من الأشياء المثيرة للاهتمام بنفسك.